/* ======================================================
	Reset
====================================================== */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,a,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:none;outline:none;background:transparent;font-size:100%}body{line-height:1}img{line-height: 0; vertical-align: top;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}nav ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}del{text-decoration: line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}li{list-style-type: none}table{border-collapse:collapse;border-spacing:0}input, select{vertical-align:middle}hr{display:block;height:1px;margin:1em 0;padding:0;border:none;border-top:1px solid #ccc}a{outline:none;}.cf:before,.cf:after{content:"";display:table}.cf:after{clear:both}.cf{zoom:1}
[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration {-webkit-appearance: none;}

/* ======================================================
	COMMON
====================================================== */
body{
	background-color: #ffffff;
	color: #2A2F33;
	font-family: 'ヒラギノ角ゴ Pro W3',Hiragino Kaku Gothic Pro,"メイリオ",Meiryo,Osaka,'ＭＳ Ｐゴシック',MS PGothic,sans-serif;
	}
	*{ box-sizing: border-box;}
body{background-image: url(../img/bg.svg);}
/* ======================================================
	PC
====================================================== */
@media screen and (min-width: 769px){
html{font-size: 10px; min-width: 1200px; position: relative; overflow-x: hidden;}
.sp{display: none;}
#header{background: #fff; text-align: center; padding: 15px 0;}
#header .header_logo{display: inline-block;}

#mv{position: relative; height: 750px; margin-bottom: 55px;}
#mv .yellow_bg{background: rgba(255, 229, 102, 1); mix-blend-mode: multiply; width: 1250px; height: 700px; position: absolute; top: 50px; left: 52%; transform: translateX(-50%);}
#mv .inner{position: relative; width: 1200px; height: 100%; margin: 0 auto;}
#mv .inner .mv_img{position: absolute; top: 0; left: -100px;}
#mv .inner .mv_logo{position: absolute; top: 80px; right: 0;}
#mv .inner .mv_text{position: absolute; top: 150px; right: 0;}
#mv .inner .mv_sub_text{position: absolute; bottom: 40px; right: 130px; transition: 500ms ease;}
#mv .inner .mv_sub_text:hover{transform: scale(1.1);}
#mv .inner .mv_sub_img{position: absolute; bottom: 30px; right: -10px;}

#anchArea{text-align: center; margin-bottom: 50px;}
#anchArea .anch_title{display: inline-block; margin-bottom: 35px;}
#anchArea .anch_btnBlock{width: 1100px; display: flex; justify-content: space-between; align-items: flex-end; margin: 0 auto;}

.cv_a{background: #423732; width: 900px; height: 200px; margin: 0 auto; position: relative;}
.cv_a .text{position: absolute; top: 17px; left: 150px;}
.cv_a .img{position: absolute; top: 13px; left: 11px;}
.cv_a .btn{position: absolute; bottom: 17px; right: 20px;}

.cv_b{background: #423732; width: 900px; height: 200px; margin: 0 auto; position: relative;}
.cv_b .text{position: absolute; top: 17px; left: 150px;}
.cv_b .img{position: absolute; top: 13px; left: 11px;}
.cv_b .btn{position: absolute; bottom: 17px; right: 20px;}

#sec01{position: relative; width: 900px; height: 1281px; margin: 0 auto 50px auto; background-color: #fff; background-image: url(../img/sec01_bg_pc.png); background-position: bottom 121px left 40px; background-repeat: no-repeat;}
#sec01 .sec01_title{position: absolute; top: -20px; left: -20px;}
#sec01 .sec01_img_01{position: absolute; top: 130px; left: 50%; transform: translateX(-50%);}
#sec01 .sec01_img_02{position: absolute; top: 628px; left: -20px;}
#sec01 .sec01_img_03{position: absolute; top: 720px; right: 30px;}
#sec01 .sec01_text_01{position: absolute; top: 601px; left: 482px;}
#sec01 .sec01_text_02{position: absolute; top: 948px; left: 30px;}
#sec01 .sec01_text_03{position: absolute; top: 1160px; left: 491px;}

#sec02{position: relative; width: 900px; height: 1100px; margin: 70px auto 50px auto; background-color: #fff; background-image: url(../img/sec02_bg_pc.png); background-position: bottom 217px left 66px; background-repeat: no-repeat;}
#sec02 .sec02_title{position: absolute; top: -20px; left: -20px;}
#sec02 .sec02_img_01{position: absolute; top: 130px; left: 50%; transform: translateX(-50%);}
#sec02 .sec02_img_02{position: absolute; bottom: 30px; right: 30px;}
#sec02 .sec02_text_01{position: absolute; top: 598px; left: 58px;}
#sec02 .sec02_text_02{position: absolute; top: 968px; left: 40px;}

#sec03{position: relative; width: 900px; height: 1107px; margin: 70px auto 50px auto; background-color: #fff; background-image: url(../img/sec03_bg_pc.png); background-position: bottom 217px left 104px; background-repeat: no-repeat;}
#sec03 .sec03_title{position: absolute; top: -20px; left: -20px;}
#sec03 .sec03_img_01{position: absolute; top: 130px; left: 50%; transform: translateX(-50%);}
#sec03 .sec03_img_02{position: absolute; bottom: 30px; right: 30px;}
#sec03 .sec03_text_01{position: absolute; top: 598px; left: 58px;}
#sec03 .sec03_text_02{position: absolute; top: 968px; left: 184px;}

#sec04{position: relative; width: 900px; height: 870px; margin: 70px auto 50px auto;}
#sec04 .yellow_bg{width: 100%; height: 100%; background: rgba(255, 229, 102, 1); mix-blend-mode: multiply;}
#sec04 .inner{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 860px; height: 830px; background-color: #fff;}
#sec04 .sec04_title{position: absolute; top: -30px; left: 50%; transform: translateX(-50%);}
#sec04 .sec04_img_01{position: absolute; top: 217px; left: 50%; transform: translateX(-50%);}
#sec04 .sec04_text{position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);}

.cv02{background: #423732; width: 100%; height: 250px;}
.cv02 .inner{position: relative; width: 900px; margin: 0 auto; height: 100%;}
.cv02 .inner .text{position: absolute; top: 40px; left: 150px;}
.cv02 .inner .img{position: absolute; top: 20px; left: -9px;}
.cv02 .inner .btn{position: absolute; bottom: 30px; right: 0px;}

#footer{text-align: center; background: #fff; padding: 50px;}
#footer .toTop{margin-bottom: 20px;}
#footer .copy{font-size: 1.2rem; line-height: 1.3;}
}
/* ======================================================
	SP
====================================================== */
@media screen and (max-width: 768px){
html{font-size: 2.66666vw; position: relative; overflow-x: hidden;}
body{position: relative; overflow-x: hidden; background-size: 5vw;}
.pc{display: none!important;}
img{width: 100%;} 

#header{background: #fff; text-align: center; padding: 15px 0;}
#header .header_logo{display: inline-block; width: 26vw;}

#mv{position: relative; height: 124vw; margin-bottom: 10vw;}
#mv .yellow_bg{background: rgba(255, 229, 102, 1); mix-blend-mode: multiply; width: 100%; height: 100%; position: absolute; top: 0; left: 0;}
#mv .inner{position: relative; width: 100vw; height: 100%;}
#mv .inner .mv_img{position: absolute; top: 23vw; right: 0px; width: 90vw;}
#mv .inner .mv_logo{position: absolute; top: 10vw; right: 5vw; width: 27vw;}
#mv .inner .mv_text{position: absolute; top: 3vw; left: 5vw; width: 60vw;}
#mv .inner .mv_sub_text{position: absolute; bottom: 5vw; left: 50%; transform: translateX(-50%); width: 80vw;}
#mv .inner .mv_sub_img{position: absolute; bottom: 5vw; left: 13vw; width: 20vw;}

#anchArea{text-align: center; margin-bottom: 15vw;}
#anchArea .anch_title{display: inline-block; margin-bottom: 7vw; width: 80vw;}
#anchArea .anch_btnBlock{width: 90vw; margin: 0 auto;}

.cv_a{background: #423732; height: 43vw; position: relative;}
.cv_a .text{position: absolute; top: 3.5vw; left: 32vw; width: 60vw;}
.cv_a .img{position: absolute; top: 3vw; left: 3vw; width: 29vw;}
.cv_a .btn{position: absolute; bottom: 5vw; right: 5vw; width: 64vw;}

.cv_b{background: #423732; height: 43vw; position: relative;}
.cv_b .text{position: absolute; top: 3.5vw; left: 32vw; width: 60vw;}
.cv_b .img{position: absolute; top: 3vw; left: 3vw; width: 29vw;}
.cv_b .btn{position: absolute; bottom: 5vw; right: 5vw; width: 64vw;}

.cv_c{background: #423732; height: 43vw; position: relative;}
.cv_c .text{position: absolute; top: 3.5vw; left: 32vw; width: 60vw;}
.cv_c .img{position: absolute; top: 3vw; left: 3vw; width: 29vw;}
.cv_c .btn{position: absolute; bottom: 5vw; right: 5vw; width: 64vw;}

#sec01{position: relative; width: 90vw; height: 186vw; margin: 0 auto 15vw auto; background-color: #fff; background-image: url(../img/sec01_bg_pc.png); background-position: bottom 30vw left 3vw; background-repeat: no-repeat; background-size: 41vw;}
#sec01 .sec01_title{position: absolute; top: -5vw; left: -5vw; width: 92vw;}
#sec01 .sec01_img_01{position: absolute; top: 15vw; right: -5vw; width: 92vw;}
#sec01 .sec01_img_02{position: absolute; top: 89vw; left: -5vw; width: 66vw;}
#sec01 .sec01_img_03{position: absolute; bottom: -8vw; right: -5vw; width: 47vw;}
#sec01 .sec01_text_01{position: absolute; top: 75vw; left: 5vw; width: 48vw;}
#sec01 .sec01_text_02{position: absolute; top: 112vw; right: 2vw; width: 27vw;}
#sec01 .sec01_text_03{position: absolute; top: 168vw; left: 6vw; width: 42vw;}

#sec02{position: relative; width: 90vw; height: 140vw; margin: 15vw auto 10vw auto; background-color: #fff; background-image: url(../img/sec02_bg_pc.png); background-position: bottom 30vw left 3.6vw; background-repeat: no-repeat; background-size: 40vw;}
#sec02 .sec02_title{position: absolute; top: -2.6vw; left: -5vw; width: 92vw;}
#sec02 .sec02_img_01{position: absolute; top: 17.3vw; right: -5vw; width: 92vw;}
#sec02 .sec02_img_02{position: absolute; bottom: -5.3vw; right: -5vw; width: 47.3vw;}
#sec02 .sec02_text_01{position: absolute; top: 77vw; left: 6.6vw; width: 39.6vw;}
#sec02 .sec02_text_02{position: absolute; top: 120vw; left: 3.6vw; width: 43vw;}

#sec03{position: relative; width: 90vw; height: 136vw; margin: 15vw auto 10vw auto; background-color: #fff; background-image: url(../img/sec03_bg_pc.png); background-position: bottom 19vw left 8.5vw; background-repeat: no-repeat; background-size: 32vw;}
#sec03 .sec03_title{position: absolute; top: -2.6vw; left: -5vw; width: 92vw;}
#sec03 .sec03_img_01{position: absolute; top: 17.3vw; right: -5vw; width: 92vw;}
#sec03 .sec03_img_02{position: absolute; bottom: -6.6vw; right: -5vw; width: 45.3vw;}
#sec03 .sec03_text_01{position: absolute; top: 77.86vw; left: 4.1vw; width: 39.4vw;}
#sec03 .sec03_text_02{position: absolute; top: 123vw; left: 12.9vw; width: 36vw;}

#sec04{position: relative; width: 90vw; height: 170vw; margin: 15vw auto 10vw auto;}
#sec04 .yellow_bg{width: 100%; height: 100%; background: rgba(255, 229, 102, 1); mix-blend-mode: multiply;}
#sec04 .inner{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 83vw; height: 164vw; background-color: #fff;}
#sec04 .sec04_title{position: absolute; top: 2.3vw; left: -6vw; width: 86vw;}
#sec04 .sec04_img_01{position: absolute; bottom: 5.3vw; left: 50%; transform: translateX(-50%); width: 77.8vw;}

#footer{text-align: center; background: #fff; padding: 7vw;}
#footer .toTop{margin-bottom: 3vw; width: 48vw; display: inline-block;}
#footer .copy{font-size: 1rem; line-height: 1.3;}
}
/* ======================================================
	action
====================================================== */

.anch_title img,
.sec01_title img,
.sec01_img_01 img,
.sec01_img_02 img,
.sec01_img_03 img,
.sec02_title img,
.sec02_img_01 img,
.sec02_img_02 img,
.sec03_title img,
.sec03_img_01 img,
.sec03_img_02 img,
.sec04_title img,
.sec04_img_01 img{opacity: 0; transition: 700ms ease;}

.anch_title.is-show img,
.sec01_title.is-show img,
.sec01_img_01.is-show img,
.sec01_img_02.is-show img,
.sec01_img_03.is-show img,
.sec02_title.is-show img,
.sec02_img_01.is-show img,
.sec02_img_02.is-show img,
.sec03_title.is-show img,
.sec03_img_01.is-show img,
.sec03_img_02.is-show img,
.sec04_title.is-show img,
.sec04_img_01.is-show img{opacity: 1; transition: 700ms ease;}

.sec01_title img,.sec02_title img,.sec03_title img,.sec04_title img{transform: translateX(-20px);}
.sec01_title.is-show img,.sec02_title.is-show img,.sec03_title.is-show img,.sec04_title.is-show img{transform: translateX(0px);}

.sec01_img_01 img{transform: translateX(20px);}
.sec01_img_01.is-show img{transform: translateX(0px);}
.sec01_img_02 img{transform: translateX(-20px);}
.sec01_img_02.is-show img{transform: translateX(0px);}
.sec01_img_03 img{transform: translateY(20px);}
.sec01_img_03.is-show img{transform: translateY(0px);}

.sec02_img_01 img{transform: translateX(20px);}
.sec02_img_01.is-show img{transform: translateX(0px);}
.sec02_img_02 img{transform: translateX(-20px);}
.sec02_img_02.is-show img{transform: translateX(0px);}

.sec03_img_01 img{transform: translateX(20px);}
.sec03_img_01.is-show img{transform: translateX(0px);}
.sec03_img_02 img{transform: translateX(-20px);}
.sec03_img_02.is-show img{transform: translateX(0px);}

.sec04_img_01 img{transform: translateX(20px);}
.sec04_img_01.is-show img{transform: translateX(0px);}

.cv_a,
.cv_b{opacity: 0; transition: 500ms ease; transform: translateY(20px);}
.cv_a.is-show,
.cv_b.is-show{opacity: 1; transform: translateY(0px);}

.anch_btnBlock .anch_btn_01 img{transition: 500ms ease; opacity: 0; transform: translateY(20px);}
.anch_btnBlock .anch_btn_02 img{transition: 500ms 100ms ease; opacity: 0; transform: translateY(20px);}
.anch_btnBlock .anch_btn_03 img{transition: 500ms 200ms ease; opacity: 0; transform: translateY(20px);}
.anch_btnBlock.is-show .anch_btn_01 img{opacity: 1; transform: translateY(0);}
.anch_btnBlock.is-show .anch_btn_02 img{opacity: 1; transform: translateY(0);}
.anch_btnBlock.is-show .anch_btn_03 img{opacity: 1; transform: translateY(0);}

#mv .mv_text img{transform: translate(0,40px); opacity: 0;}
#mv.start .mv_text img{transform: translate(0,0px); opacity: 1; transition: 500ms ease;}
#mv .mv_img img{transform: translate(-40px,0px); opacity: 0;}
#mv.start .mv_img img{transform: translate(0,0px); opacity: 1; transition: 700ms 200ms ease;}
#mv .mv_sub_img img{opacity: 0; transform: translateX(40px);}
#mv .mv_sub_text img{opacity: 0; transform: translateX(40px);}
#mv.start .mv_sub_img img{opacity: 1; transition: 700ms ease; transform: translateX(0px);}
#mv.start .mv_sub_text img{opacity: 1; transition: 700ms 100ms ease; transform: translateX(0px);}