@charset "utf-8";

*{
	margin: 0px;
	padding: 0px;
}

html{
}

body {
	-webkit-text-size-adjust: 100%;
	background:#fff;
}

.main{
	color: #000;
	font-size: 2.0rem;
	font-family: 'Noto Sans JP', 'Noto Sans Japanese','メイリオ',Meiryo,'ヒラギノ角ゴ ProN W3',Helvetica,'Hiragino Kaku Gothic ProN','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック','MS PGothic', Osaka,sans-serif;
	font-weight: 500;
	letter-spacing: 0.05em;
	line-height: 2;
	-webkit-font-feature-settings: "palt" 1;
	font-feature-settings: "palt" 1;
}

/* 基本設定 */
img{
	vertical-align: middle;
	width: 100%;
}

.br_pc{display: block;}
.br_sp{display: none;}



.block_1{
	background: url(../images/tp_bg1.jpg) no-repeat center top;
	height:100hw;
	width:100%;
	background-size:100%;
	padding-top:150px;

}
.block_2{
	padding-top:300px;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+92&0+0,0.5+10,1+18 */
background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 10%, rgba(255,255,255,1) 18%, rgba(255,255,255,1) 92%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.5) 10%,rgba(255,255,255,1) 18%,rgba(255,255,255,1) 92%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.5) 10%,rgba(255,255,255,1) 18%,rgba(255,255,255,1) 92%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */

}
.block_2-2{
	background: url(../images/tp_bg2-2.png) center top;
	background-size:100%;
}

.block_3{
	background: url(../images/tp_bg2.jpg) center top;
	background-size:100%;
	padding-bottom:5em;
	padding-top:5em;
}

.block_4{
	background-size:100%;
	padding-top:5em;
	padding-bottom:5em;

}

.block_5{
	background: url(../images/tp_bg2.jpg) center top;
	background-size:100%;
	padding-bottom:5em;
	padding-top:5em;
}

.block_float_ol{
	display:table;
	width:1200px;
	margin:0 auto;
}

.block_float2{
	display:table-cell;
	vertical-align: top;
}

p.tp_logo{margin-top:3em; width:80%;}
p.tp_saikyo{margin-top:2em; width:80%;}
p.tp_cacth{margin-top:2em;width:120%;}
p.tp_hontai{padding-top:15em;width:120%;margin-left:-4em;}
p.tp_desc{padding-top:2em;width:70%;text-align:center;margin:0 auto;}

p.tp_pack{width:40%;margin-right:0;margin-left:auto;vertical-align: bottom;margin-top:80px;}

.block_2 p.tp_hontai{margin:0 auto;padding:5em 0 10em;width:40%;}

p.tp_graph1_line img{height:510px;width:auto;margin-left: 50px;margin-top: 30px;}
p.tp_graph2_line img{height:510px;width:auto;margin-left: 80px;margin-top: 30px;}
div.tp_graph1_bg{
	background: url(../images/tp_graph1_bg.png) no-repeat center top;
	background-size:580px 620px;
	width:600px;
	height:600px;
	margin-bottom:2em;
}
div.tp_graph2_bg{
	background: url(../images/tp_graph2_bg.png) no-repeat center top;
	background-size:580px 620px;
	width:600px;
	height:600px;
	margin-bottom:2em;
}
p.tp_graph1_ma{
	margin-right:0;margin-left:auto;
	width:60%;
	position:relative;
	top:-500px;
}
p.tp_graph2_ma{
	margin-right:0;margin-left:auto;
	width:60%;
	position:relative;
	top:-500px;
}
.block_3 p.caution{color:#fff;}
.block_4 p.{}

h2{font-size:3em;font-weight:bold;text-align:center;margin-bottom:1em;}
h4{font-size:2em;font-weight:normal;text-align:center;}

h2.point1{}
h2 img{width:40%;}


.text-white{color:#fff;}
.text-yellow{color:#fdb57e;font-weight:bold;}
.rspace1{padding-right:1em;}
.lspace1{padding-left:1em;}
.toughmovie{
width:740px;
height:480px;
margin:2em auto;
}


@media (max-width: 1100px) {
.block_1{
	background: url(../images/tp_bg1.jpg) no-repeat center top;
	height:auto;
	width:100%;
	background-size:100%;
	padding-top:100px;

}	
.block_2{
	padding-top:200px;
}
.block_float_ol{
	display:table;
	width:90%;
	margin:0 auto;
}

.block_float2{
	display:table-cell;
	vertical-align: top;
}


p.tp_logo{margin-top:0em; width:80%;}
p.tp_saikyo{margin-top:2em; width:80%;}
p.tp_cacth{margin-top:2em;width:120%;}
p.tp_hontai{padding-top:5em;width:120%;}
p.tp_desc{padding-top:0em;width:80%;}
p.tp_pack{width:40%;margin-right:0;margin-left:auto;vertical-align: bottom;margin-top:80px;}


.block_2 p.tp_hontai{margin:0 auto;padding:5em 0 10em;width:80%;}

p.tp_graph1_line img{height:255px;width:auto;margin-left: 25px;margin-top: 15px;}
p.tp_graph2_line img{height:255px;width:auto;margin-left: 40px;margin-top: 15px;}
div.tp_graph1_bg{
	background: url(../images/tp_graph1_bg.png) no-repeat center top;
	background-size:290px 310px;
	width:300px;
	height:300px;
	margin-bottom:2em;
}
div.tp_graph2_bg{
	background: url(../images/tp_graph2_bg.png) no-repeat center top;
	background-size:290px 310px;
	width:300px;
	height:300px;
	margin-bottom:2em;
}
p.tp_graph1_ma{
	margin-right:0;margin-left:auto;
	width:60%;
	position:relative;
	top:-250px;
}
p.tp_graph2_ma{
	margin-right:0;margin-left:auto;
	width:60%;
	position:relative;
	top:-250px;
}
h2{font-size:3em !important;font-weight:bold;text-align:center;margin-bottom:1em;}
h2 img{width:90%;}

.toughmovie{
width:480px;
height:250px;
margin:2em auto;
}

}

@media (max-width: 680px) {
h2{font-size:2em !important;font-weight:bold;text-align:center;margin-bottom:1em;}

	.block_2{
	padding-top:50px;
}
.block_3 .block_float2{
	display: block;
}
.toughmovie{
width:280px;
height:150px;
margin:2em auto;
}

}	
/*---------------------
スクロールアニメーション
---------------------*/
.is_scrollanime{
	opacity: 0 !important;
	transition: all .8s ease !important;
}

.is_scrollanime.show{
	opacity: 1 !important;
	transform: none !important;
}

.is_rl{         transform: translate(-100px, 0) !important;}
.is_rr{         transform: translate(100px, 0) !important;}
.is_up{         transform: translate(0, 100px) !important;}
.is_down{       transform: translate(0, -100px) !important;}
.is_scaleUp{    transform: scale(.8) !important;}
.is_scaleDown{  transform: scale(1.5) !important;}
.is_rotateL{    transform: rotate(180deg) !important;}
.is_rotateR{    transform: rotate(-180deg) !important;}
.is_scaleyUp{    transform: scaleY(0) !important;}


a.btn {
    width: 300px;
    padding: 12px 0;
}

/*---------------------
ページトップへ戻る
---------------------*/
#is_pagetop{
	position: fixed;
	z-index: 999;
	bottom: 5%;
	right: 2.5%;
}

#is_pagetop a{
	width: 80px;
	height: 80px;
	display: block;
}

#is_pagetop a:hover{
	opacity: 0.5;
}



/*---------------------
メインビジュアル
---------------------*/
.l_header{
	background: url(../img/bg.jpg) repeat-x center center;
	background-size: auto 100%;
}

.md_header{
	background: url(../img/img_main.png) no-repeat center bottom;
	height: 666px;
}

h1.is_logo{
	max-width: 200px;
	width: 21vw;
	position: absolute;
	top: 2.8%;
	right: 5%;
}

.is_logo_aron{
	max-width: 300px;
	width: 30vw;
	margin: 0 auto;
	padding: 2% 0 0 0;
}

.md_header a:hover{
	opacity: 0.5;
}





/*---------------------
外枠
---------------------*/
.l_main{
	display: block;
	clear: both;
	overflow: hidden;
	margin-top: -60px;
}



/*---------------------
バナー
---------------------*/
.l_banner{
	background: linear-gradient(transparent 60px, #ffc837 0);
}

.l_banner ul{
	display: flex;
	max-width: 1024px;
	margin: 0 auto;
}

.l_banner ul li{
	list-style: none;
	margin: 0 10px 20px 10px;
}

.l_banner ul li a{
	display: block;
}

.l_banner ul li a:hover{
	outline: 10px solid #ffee00;
	outline-offset: -10px;
}


/*---------------------
今日も、くっつく感動を。
---------------------*/
.l_concept{
	background: #fff url(../img/bg_concept.jpg) no-repeat center top;
	background-size: 100% auto;
}

.md_concept{
	background: url(../img/bg_concept.png) no-repeat center center;
	background-size: 100% auto;
	max-width: 1000px;
	margin: 0 auto;
	padding: 90px 0 60px 0;
}

.md_concept h1{
	width: 440px;
	margin: 0 auto 40px auto;
}

.md_concept p{
	text-align: center;
}


/*---------------------
アロンアルフアTVCM
---------------------*/
.l_cm{
	background: #ffc837 url(../img/bg_cm.png) no-repeat center center;
	background-size: 100% auto;
	padding: 40px 0;
}

.l_cm h1{
	width: 505px;
	margin: 0 auto 40px auto;
	position: relative;
}

.is_icon50{
	width: 140px;
	position: absolute;
	top: -20px;
	left: -110px;
}

.md_cm{
	max-width: 500px;
	width: 92%;
	margin: 0 auto;
	position: relative;
}

.md_cm p:nth-child(1){
	background: #ffc837;
}

.md_cm a:hover{
	opacity: 0.5;
}

.md_cm .is_iconcm{
	width: 200px;
	position: absolute;
	top: 70px;
	left: -220px;
}


/*---------------------
キャラクター紹介
---------------------*/
.l_character{
	background: #fff url(../img/bg_character.png) no-repeat center top;
	background-size: auto 100%;
	padding: 40px 0;
}

.l_character h1{
	width: 396px;
	margin: 0 auto 40px auto;
	position: relative;
}

.md_character{
	margin: 0 auto;
	max-width: 950px;
	width: 92%;
	display: flex;
	justify-content: space-between;
}

.md_character div:nth-child(1){
	width: 45%;
	display: flex;
}

.md_character div:nth-child(2){
	width: 51%;
}

.md_character div:nth-child(1) p:nth-child(1){
	width: 48%;
}

.md_character div:nth-child(1) p:nth-child(2){
	width: 56%;
	margin-left: -4%;
}

.md_character div:nth-child(2) h2{
	font-size: 3.0rem;
	font-weight:bold;
}

.md_character div:nth-child(2) ul{
	margin-left: 20px;
}

.b_manga{
	width: 490px;
	margin: 40px auto 0 auto;
}

.b_manga a:hover{
	opacity: 0.5;
}

.mfp-iframe-holder .mfp-content{
	width: 80% !important;
	max-width: 80% !important;
}

.slick-disabled{
	display: none !important;
}



/*---------------------
アロンアルフアTVCMアロンアルフア ブランドムービー
---------------------*/
.l_movie{
	background: #ffc837;
	padding: 40px 0;
}

.l_movie h1{
	width: 671px;
	margin: 0 auto 40px auto;
	position: relative;
}

.md_movie{
	background:  url(../img/bg_movie.png) no-repeat center center;
	background-size: 100% auto;
}

.md_movie p{
	background: #ffc837;
	max-width: 500px;
	margin: 0 auto;
	min-height: 330px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.md_movie p a:hover{
	opacity: 0.5;
}



/*---------------------
アロンアルフアのひみつ
---------------------*/
.l_secret{
	background: #fff url(../img/bg_concept.jpg) no-repeat center top;
	background-size: 100% auto;
	padding: 60px 0 0 0;
}

.b_secret{
	width: 480px;
	margin: 0 auto;
	background: #fff;
}

.l_secret a:hover{
	opacity: 0.5;
}

.md_secret{
	position: relative;
	width: 480px;
	margin: 70px auto;
}

.md_secret p:nth-child(1){
	margin-bottom: 20px;
}

.is_50{
	width: 300px;
	position: absolute;
	top: -60px;
	left: -220px;
}

.is_thankyou{
	width: 300px;
	position: absolute;
	top: -110px;
	right: -280px;
}


/*---------------------
フッター
---------------------*/
.l_footer{
	color: #fff;
	text-align: center;
	background: #ffc837;
	padding: 25px;
}

.l_footer p{
	color: #fff;
	font-size: 1.2rem;
	text-align: center;
}


@media screen and (max-width:767px){
	body, h1,h2,h3,h4,h5,h6,p,ul,li,dl,dt,dd,td,th{
		font-size: 1.4rem;
		letter-spacing: 0.05em;
		line-height: 1.8;
	}
	
	.br_pc{display: none;}
	.br_sp{display: block;}
	
	
	/*---------------------
	ページトップへ戻る
	---------------------*/
	#is_pagetop a{
		width: 50px;
		height: 50px;
	}
	
	
	/*---------------------
	メインビジュアル
	---------------------*/
	.md_header{
		background-size: 150% auto;
		height: 60vw;
	}
	
	h1.is_logo{
		width: 30vw;
		top: 1%;
		right: 2%;
	}
	
	
	/*---------------------
	外枠
	---------------------*/
	.l_main{
		margin-top: 0;
	}
	
	
	/*---------------------
	バナー
	---------------------*/
	.l_banner{
		background: linear-gradient(transparent 0, #ffc837 0);
		padding: 4%;
	}
	
	.l_banner ul{
		display: block;
		max-width: 86%;
		margin: 0 auto;
	}
	
	.l_banner ul li{
		margin: 0 0 4% 0;
	}
	
	
	/*---------------------
	今日も、くっつく感動を。
	---------------------*/
	.md_concept{
		background: url(../img/bg_concept.png) no-repeat center top;
		background-size: 120% auto;
		padding: 20% 6% 10% 6%;
	}
	
	.md_concept h1{
		width: 65vw;
		margin: 0 auto 2vh auto;
	}
	
	
	/*---------------------
	アロンアルフアTVCM
	---------------------*/
	.l_cm h1{
		width: 53vw;
	}
	
	.is_icon50{
		width: 18vw;
		position: absolute;
		top: -2vw;
		left: -15vw;
	}
	
	
	/*---------------------
	キャラクター紹介
	---------------------*/
	.l_character{
		background-size: 160% 100%;
		padding: 8%;
	}
	
	.l_character h1{
		width: 48vw;
	}
	
	.md_character{
		display: block;
	}
	
	.md_character div:nth-child(1),
	.md_character div:nth-child(2){
		width: 100%;
	}
	
	.md_character div:nth-child(1){
		margin-bottom: 8%;
	}
	
	.md_character div:nth-child(1) p:nth-child(1){
		width: 30%;
	    margin-top: 8%;
	}
	.md_character div:nth-child(1) p:nth-child(2){
		width: 52%;
		margin-left: -6%;
	}
	.md_character div:nth-child(2) h2{
		font-size: 2.0rem;
		text-align: center;
		margin-bottom: 2%;
	}
	
	.md_character div:nth-child(2) ul{
		margin-left: 0;
	}
	
	.b_manga{
		width: 80vw;
	}
	
	
	/*---------------------
	アロンアルフアTVCMアロンアルフア ブランドムービー
	---------------------*/
	.l_movie h1{
		width: 65vw;
	    margin: 0 auto 20px auto;
	}
	
	.l_movie p.br_sp{
		width: 92%;
		margin: 4% auto 0 auto;
	}
	
	.md_movie{
		background: none;
		width: 92%;
		margin: 0 auto;
	}
	
	.md_movie p{
		min-height: auto;
	}
	
	
	/*---------------------
	アロンアルフアのひみつ
	---------------------*/
	.l_secret{
		padding: 8% 0;
	}
	.b_secret{
		width: 62%;
		margin: 0 auto;
		background: #fff;
	}
	
	.md_secret{
		width: 60%;
		margin: 8% auto 0 auto;
	}
	
	.is_50{
		width: 100px;
		top: 0%;
		left: -34%;
	}
	
	.is_thankyou{
		width: 100px;
		top: -65%;
		right: -38%;
	}
	
	/*---------------------
	フッター
	---------------------*/
	.l_footer{
		padding: 3%;
	}
}


@media (min-width: 769px){
div.cmBox {
    margin-bottom: 101px;
}

div.cmBox > div:nth-child(odd) {
    width: 420px;
    float: left;
}
div.cmBox > div:nth-child(even) {
    width: 420px;
    float: right;
}

div.cmBox h4 {
    font-weight: 600;
    font-size: 1.5rem;
    padding: 35px 0 0;
    margin-bottom: 7px;
    white-space: nowrap;
}
div.cmBox div.ifBox {
    height: 316px;
    margin-bottom: 17px;
}
.sp {
    display: none !important;
}
}

@media screen and (max-width: 768px){
	
div.cmBox h4 {
    font-weight: 600;
    font-size: 2.0rem;
    padding: 4.33% 0 0;
    margin-bottom: 1.13%;
    line-height: 140%;
}
 div.cmBox .ifBox {
    height: 200px;
    margin-bottom: 2%;
}
.pc {
    display: none !important;
}
}


@media (min-width: 1367px) and (max-width: 1920px){
#wrap .inner {
    width: 1200px;
    margin: 0 auto;
}
div.cmBox > div:nth-child(odd) {
    width: 560px;
}
div.cmBox > div:nth-child(even) {
    width: 560px;
}
div.cmBox div.ifBox {
    height: 316px;
    margin-bottom: 17px;
}

}