@charset "UTF-8";
/* 
CSS Document 
Author: Aoyama
*/

/* リセット定義 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {display: block;}
body {line-height: 1;color: #111;width: 100%;height: 100%;}
html {font-size: 13px;font-family: 'YakuHanJP', 'Noto Sans JP', sans-serif;font-feature-settings: "pkna" 1;position: inherit;height: 100%;-webkit-text-size-adjust: 100%;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {content: '';content: none;}
table {border-collapse: collapse;border-spacing: 0;}
img {display: block;}
a{text-decoration: none;}
*{ -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
/* リセット定義ここまで */

/* 改行の切り替え */
.br-pc {display: block;}
.br-sp {display: none;}

/* 画像の切り替え */
.pc {display: block !important;}
.sp {display: none !important;}

@media screen and (max-width:1039px) {
/* 改行の切り替え */
.br-pc {display: none;}
.br-sp {display: block;}

/* 画像の切り替え */
.pc {display: none !important;}
.sp {display: block !important;}
}

/*----------------------- 全体 ----------------------- */
body {width: 100%;line-height: 2;overflow-wrap: break-word;box-sizing: border-box;word-break: break-all;position: relative;letter-spacing: 1.2px;background-color: #fff;color: #231815;}
#stage{margin: 0;padding:0;width: 100%;}

#particles-js {position: fixed;width: 100%;z-index: -100;top: 0;}

/*----------------------- header ----------------------- */
header{margin: 0;padding:0;width: 100%;}
.ltop a{position: fixed;z-index: 1000;width:11%;transition: all 0.21s ease-out;}
.ltop a img{width:100%;}
.ltop:hover a {transform: scale3d(1.1, 1.1, 1.1) translate(5px, 5px);transition: all 0.21s ease-out;}

@media screen and (max-width:1039px) {
.ltop a{width:30%;}
}

/*----------------------- main ----------------------- */

/*----------------------- mv ----------------------- */
#mv{margin: 0;padding:0;width: 100%;}
#mv img{width: 100%;}

/*Q&A*/
#mv_qa{margin: 0;padding:5em 0;text-align: center;width: 100%;background: #eeeeee;}
#mv_qa h2{display: inline-block;}

@media screen and (max-width:1039px) {
#mv_qa{padding:10em 0 0;}
#mv_qa h2 img{width: 100%;}
}


/*----------------------- entry ----------------------- */
.entry_btn{position: relative;text-align: center;padding: 5em 0 0;}
.entry_btn a{display: inline-block;padding: 0.6em 3em 0.2em 3em;background: linear-gradient(45deg, #a5cf3e, #c0b889, #e2a13e);color:#fff;font-weight: bold;font-size: 1.6em;border-radius: 100px;letter-spacing: 10px;line-height: 0.9em;}
.entry_btn a span{display: block;font-size: 0.5em;letter-spacing: 2px;}
.entry_btn a:hover{background: linear-gradient(45deg, #93cc05, #d6ce80, #ee9205);}
.corner:after {content: "";width: 277px;height: 151px;position: absolute;top: 0;right: 0;background: url("img/corner_img.png") no-repeat;z-index: -1;}

@media screen and (max-width:1039px) {
.corner:after {content: "";background-size: 40%;background-position: top right;}
.entry_btn a{padding: 0.6em 1em 0.2em 1em;width: 90%;}
}

/*----------------------- prologue ----------------------- */
#prologue{margin: 0 auto;padding: 10em 0;width:100%;background: url("img/prologue_bg.png") no-repeat;background-position: left top;background-size: cover;text-align: center;}
#prologue h3{margin: 0 0 2em;}
#prologue ul{margin:0 auto;padding:0;display: flex;justify-content: space-between;max-width:1040px;width:90%;}
#prologue ul li{width:49%;text-align: left;line-height: 2.8em}
#prologue ul li:first-child{display: flex;align-items: center;}
#prologue ul li:first-child img{width:100%;}

@media screen and (max-width:1039px) {
#prologue{padding: 3em 0 5em;background-position: center bottom;background-size: 170%;}#prologue h3{margin: 0 0 2em;}
#prologue h3{margin: 2em 0;}
#prologue h3 img{max-width: 389px; width:100%;}
#prologue ul{flex-flow: row wrap;}
#prologue ul li{width:100%;}
}

/*----------------------- point ----------------------- */
#point{margin: 0 auto;padding: 0;width:100%;background: url("img/point_bg.png") no-repeat;background-position: left top;background-size: contain;text-align: center;}
#point h2{margin: 5em 1em 3em;}
#point h2 img{display: inline-block;}
#point h3{margin: 0 0 2em;}
#point ul.img{margin:0 auto;padding:0;display: flex;justify-content: space-between;max-width:1040px;width:100%;}
#point ul.img li:first-child{margin: -5em 0 0;width:41%;}
#point ul.img li:last-child{width:58%;}
#point ul.txt{margin:0 auto;padding:0;display: flex;justify-content: space-between;max-width:1040px;width:90%;flex-flow: row wrap;}
#point ul.txt li{margin: 0 0 2em;width:50%;font-size: 1.6em;letter-spacing: 10px;font-weight: bold;text-align: left;}
#point ul.txt li::before {font-family: "Font Awesome 6 Free";content:'\f067';font-weight: 900;padding-right: 3px;color:#faa320;}

@media screen and (max-width:1039px) {
#point{padding: 2em 0;background-position: left bottom;background-size: 25%;}
#point h3{margin: 2em 0;}
#point ul.img li img,#point h2 img{width:100%;}
#point ul.img li:first-child{margin: 0;width:50%;}
#point ul.img li:last-child{width:49%;display: flex;align-items: center;}
#point ul.txt li{width:100%;}
}

/*----------------------- online ----------------------- */
#online{margin: 0 auto;padding: 0 0 5em;width:100%;background: url("img/online_bg.png") no-repeat;background-position: left top;background-size:100%;text-align: center;}
#online .box{border: 2px solid #000;background: #fff;display: inline-block;padding: 1em 2em;font-weight: bold;font-size: 1.2em;letter-spacing: 5px;}
#online .anime{position: relative;}
#online .arrow {position: absolute;top: 0;left: 50%;animation: 2s arrow-animation infinite ease-in-out;width: 0;height: 5em;border: .5px solid #000;}
#online .arrow::after{content: '';display: block;position: absolute;top: 88%;left: 0;width: 7px;height: 7px;border-top: 2px solid #000;border-right: 2px solid #000;transform: translateX(-50%) rotate(135deg);}
#online ul{margin:10em auto 5em;padding:0;display: flex;justify-content: space-between;max-width:940px;width:90%;}
#online ul li:first-child{display: flex;align-items: center;}

@keyframes arrow-animation {0%{height: 0;}66% {height: 5em;}}

@media screen and (max-width:1039px) {
#online{background: url("img/online_bg-sp.png") no-repeat;background-position: center top;background-size: inherit;}
#online ul{flex-flow: row wrap;width:70%;margin-bottom: -2em;}
#online ul li,#online ul li img{width:100%;}
#online ul li:first-child{margin-bottom: 2em}
}

/*----------------------- video ----------------------- */
#video{padding: 10em 0;position: relative;}
#video h3{position: absolute;top:-3em;left: 0;z-index: -1;}
#video ul{margin:0 auto;padding:0;display: flex;justify-content: space-between;max-width:1040px;width:90%;}
#video ul li{width:24%;}
#video::after{content: '';display: block;background: #eee;position: absolute;top: 0;right: 0;height: 100%;width: 80%;z-index: -99;}

@media screen and (max-width:1039px) {
#video{padding: 10em 0 8em;}
#video ul{flex-flow: row wrap}
#video ul li{width:49%;margin-bottom: 5px;}
#video ul li img{width:100%;}
#video h3{left: -10em;}
#video h3 img{width:85%;}
#video::after{display: none;}
}

/*----------------------- area ----------------------- */
#area{margin: 0 auto;padding: 0 0 22em;width:100%;background: url("img/area_bg.png") no-repeat;background-position: left bottom;background-size:100%;text-align: center;}
#area h2{margin: 5em 0 2em;display: inline-block;}
#area ul{margin:0 auto;padding:0;display: flex;justify-content: space-between;max-width:1040px;width:90%;}
#area ul li{text-align: left;}
#area h3{font-size: 48px;line-height: normal;margin-right: 0.2em;}
#area figcaption{display: flex;align-items: center;}

@media screen and (max-width:1039px) {
#area{padding: 0 0 5em;background:none;position: relative;}
#area h2 img{width:90%;margin: 0 auto;}
#area ul{margin:0 0 -4em;flex-flow: row wrap;width:97%;}
#area ul li,#area ul li img,#area figure{width:100%;}
#area ul li{margin: 0 0 2em;display: flex;align-items: center;}
#area h3 {font-size: 55px;line-height: 1em;margin: 0 0 0.2em 0;letter-spacing: -3px;}
#area figure{box-shadow: 5px 5px 0 #fba31d;}
#area figcaption{writing-mode: vertical-rl;text-orientation: mixed;margin-left: 0.5em;}
#area figcaption a{width:100%;}
#area figcaption img{width:88% !important;}
#area::after{content: '';display: block;background: #fdf7ee;position: absolute;top: 0;right: 0;height: 100%;width: 80%;z-index: -99;}
}

/*----------------------- movie ----------------------- */
#movie{margin:0 auto;text-align: right;position: relative;max-width:1400px;width:100%;}
#movie img{position: absolute;right: 0;top: -25em;}

@media screen and (max-width:1039px) {
#movie{text-align: right;position:unset;}
#movie img{position:unset;display: inline-block;margin-top: 3em;width: 70%;}
}

/*----------------------- flow ----------------------- */
#flow{margin: 0 auto;padding: 0;width:100%;background: url("img/flow_bg.png") no-repeat;background-position: left top;text-align: center;}
#flow h3{line-height: 40px;font-size: 30px;margin: 8px 0 8px 1em;font-weight: 100;background: linear-gradient(transparent 60%, #fdeed8 0%);display: inline-block;}
#flow ol{counter-reset:num;list-style-type: none!important;padding:0;margin:0 auto;max-width:800px;width:90%;}
#flow ol li{position: relative;padding-left: 30px;line-height: 1.5em;padding: 0.5em 0.5em 10em 30px;text-align: left;}
#flow ol li:before{position: absolute;counter-increment: num;content: counter(num);display:inline-block;background: #faa320;color: #FFF;font-family: 'Arial',sans-serif;font-weight:bold;font-size: 35px;border-radius: 50%;left: 0;width: 50px;height: 50px;line-height: 50px;text-align: center;top: 10px;z-index: 1;}
#flow ol li:first-child:after,#flow ol li:nth-child(2):after{position: absolute;content: '';border: 1px solid #faa320;height: 100%;top: 1em;z-index: 0;left: 2em;}
#flow p{margin: 0 0 0 2em;}
#flow div.color_box{margin: 0 auto;padding: 2em;max-width: 1040px;width:90%;background: #fdeed8;letter-spacing: 0;}
#flow div.color_box h3{display: block;}
#flow div.color_box h3 span{margin: 0 0.5em;}

@media screen and (max-width:1039px) {
#flow{background: url("img/flow_bg-sp.png") no-repeat;background-position: right top;text-align: center}
#flow ol li{padding: 0.5em 0.5em 5em 30px;}
#flow div.color_box h3{margin: 0;font-size: 2em;}
}

/*----------------------- contact ----------------------- */
#contact{margin: 10em 0 0;padding: 5em;text-align: center;background: #e8f0d3;}
#contact h3{margin: 0 0 0.5em;font-size: 4em;line-height: 1em;}
#contact h3 span{font-size: 8px;display: block;line-height: 1em;}
#contact ul{margin:2em auto 0;padding:0;display: flex;justify-content: center;width:90%;}
#contact ul li a{width: 150px;height:150px;background: #fff;color:#a5cf3f;display: flex;justify-content: center;align-items: center;line-height: 1.4;}
#contact ul li a:hover{color:#faa320;}
#contact ul li i{font-size: 3em;}
#contact ul li span{display: block;}
#contact ul li:nth-child(2){margin: 0 1em;}

@media screen and (max-width:1039px) {
#contact{margin: 5em 0 0;padding: 5em 1em;}
#contact ul li{width: 33%;}
#contact ul li a{width: 100%;height:100px;}
#contact ul li span{font-size: 0.8em;}
}

/*----------------------- footer ----------------------- */
footer{margin:5em 0 0;padding:5em 0 0.5em;text-align: center;color:#fff;background: url("img/footer_bg.jpg")top center no-repeat;background-size: cover;}
footer div.ft_menu{margin: 0 auto 2em;max-width: 1040px;width:90%;display: flex;justify-content: space-between;}
footer div.ft_menu ul{width:65%;display: flex;justify-content: center;align-items: center;}
footer div.ft_menu ul a{padding: 0 3em;color:#fff;}
footer div.ft_menu ul a:hover{color:#faa320;}

@media screen and (max-width:1039px) {
footer{padding:2em 0 0.5em;}
footer div.ft_menu p{margin: 1.5em 1em 0;width:40%;}
footer div.ft_menu img{width:100%;}
footer div.ft_menu{flex-wrap: wrap;}
footer div.ft_menu ul.ftsp{display: flex !important;width:100%;justify-content: space-between;}
footer div.ft_menu ul.ftsp a{padding: 0;font-size: 0.9em;}
}


/*----------------------- Q&A ----------------------- */
.cp_qa *, .cp_qa *:after, .cp_qa *:before {-webkit-box-sizing: border-box;box-sizing: border-box;}
.cp_qa {overflow-x: hidden;margin: 3em auto 0;color: #333333;width:90%;max-width: 1000px;}
.cp_qa .cp_actab {padding: 20px 0;border-bottom: 1px dotted #cccccc;}
.cp_qa label {font-size: 1.2em;position: relative;display: block;width: 100%;margin: 0;padding: 4px 10px 0 48px;cursor: pointer;}
.cp_qa .cp_actab-content {font-size: 1em;position: relative;overflow: hidden;height: 0;margin: 0 0 0 40px;padding: 0 14px;-webkit-transition: 0.4s ease;transition: 0.4s ease;opacity: 0;}
.cp_qa .cp_actab input[type=checkbox]:checked ~ .cp_actab-content {height: auto;padding: 14px;opacity: 1;}
.cp_qa .cp_plus {font-size: 2.4em;line-height: 100%;position: absolute;z-index: 5;margin: 3px 0 0 10px;-webkit-transition: 0.2s ease;transition: 0.2s ease;}
.cp_qa .cp_actab input[type=checkbox]:checked ~ .cp_plus {-webkit-transform: rotate(45deg);transform: rotate(45deg);}
.cp_qa .cp_actab input[type=checkbox] {display: none;}



/*----------------------------------------------------------*/
/* モーダル動画 */
/*----------------------------------------------------------*/

body.fixed {position: fixed;width: 100%;height: 100%;}
/* モーダル全体を囲うタグ */
.modal-movie,.modal-movie2,.modal-movie3,.modal-movie4{display: none;}
/* モーダルウインドウ／背景 */
.modal-movie-bg,.modal-movie-bg2,.modal-movie-bg3,.modal-movie-bg4 {width: 100%;height: 100%;background: linear-gradient(rgba(251, 164, 30, 0.8), rgba(192, 184, 137, 0.8), rgba(166, 206, 66, 0.8));position: fixed;top: 0;left: 0;transition: .3s;z-index: 2;}
/*モーダル動画枠の指定*/
.modal-movie-body,.modal-movie-body2,.modal-movie-body3,.modal-movie-body4{position: fixed;z-index: 11;overflow: hidden;transition: .3s;top: 50%;left: 50%;transform: translate(-50%, -50%);max-height: 85vh;transition: .3s;}
#video video{height:85vh;}

@media screen and (max-width:1039px) {
#video video{height:70vh;}
}