@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@500;700&display=swap');

/*  Layout
-----------------------------------------------------------------------------*/
/* Body */
html{font-size:62.5%; overflow-x: hidden;}
/* 1801px以上でフォントサイズ比率を変える*/
@media only screen and (min-width :2001px) {
html{font-size:.45vw; transition: 0.2s;}
}    
body.customize-support{margin-top:-32px !important;}
body {
background:#FFF;
color:#555555; /*コンテンツの主となる文字色*/
font-size: 2.0rem; /*コンテンツの主となる文字サイズ*/
line-height: 2.0; /*コンテンツの主となる文字高さ*/
margin: 0;
letter-spacing: 0.2em;
font-family:"Zen Maru Gothic", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic","メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
font-weight: 500;
 /*コンテンツの主となるフォント 前の方が優先して使用されるため、必要に応じて前後を入れ替える*/
width:100%; height:100%;
/*文字の自動カーニング設定*/
font-feature-settings: "palt" 1;
}
.zen-maru-gothic-medium {
  font-family: "Zen Maru Gothic", serif;
  font-weight: 500;
  font-style: normal;
}

.zen-maru-gothic-bold {
  font-family: "Zen Maru Gothic", serif;
  font-weight: 700;
  font-style: normal;
}
/*  link*/
a {color:#555555; text-decoration: none;  }
a:visited { color:#555555; text-decoration: none;  }
a:hover { color: #555555; text-decoration:underline; }
a img { border: 0; }
a.link,
a.link:visited,
a.link:hover { color: #2F5883; text-decoration:underline; }

.gothic { font-family:"游ゴシック Medium", "Yu Gothic Medium", "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif !important;}
.mincho{ font-family:"游明朝", "Yu Mincho", "游明朝体", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HiraMinProN-W3", "Times New Roman", "ＭＳ Ｐ明朝", "MS PMincho", serif !important; -ms-font-family: "ＭＳ Ｐ明朝", "MS PMincho";-ms-font-feature-settings:"pkna";}
img{max-width:100%;height:auto;}

/*コンテンツ幅*/
.cont{width: 1200px; max-width: 1200px; margin-left: auto; margin-right: auto;}
.cont.cont_max{width:1300px; max-width: 1300px; margin-left: auto; margin-right: auto; position:relative;box-sizing: border-box;}
.cont.cont_min{width:920px; max-width: 920px; margin-left: auto; margin-right: auto; position:relative;box-sizing: border-box;}
.cont_box{margin-left: 3%; margin-right: 3%;}
.cont_flex{display: flex; justify-content: space-between;}
.cont_flex.flex_center{justify-content: center;}
.cont__main{width:750px; align-self: stretch;}/*メインコンテンツ*/
.cont__aside{width:200px; align-self: stretch;}/*サイドバーコンテンツ*/
/*コンテンツ幅ここまで*/

/*アンカーリンクの上調整*/
a.anchor{display: block;height:100px; margin-top:-100px;}

/*ブロックごとのデフォルトのパディング*/
.box{padding: 80px 0 100px;}

/*画像がはみ出た場合の調整*/
img{max-width: 100%; height: auto;}
/*ブラウザ全面を使って表示*/
.full_vis {height: 100vh; width: 100vw; position: relative;}

@media only screen and (max-width :1101px) {
  .cont.cont_max,
  .cont.cont_min,
  .cont{width: auto; max-width:inherit; margin-left: 3%; margin-right: 3%;}
}
@media only screen and (max-width :769px) {
  body{letter-spacing:0; line-height: 1.6;width:100%;overflow-x:hidden; word-break:break-all; font-size: 1.4rem;}
  img{max-width:100%;width:auto;height:auto;}
  .sp-cont{padding:0 15px;}
  .cont_flex{display: block; }
  .cont__main,
  .cont__aside{width:auto;}
  .box{padding: 20px 5%; margin-bottom: 0px;}
}
@media only screen and (max-width :480px) {
  .cont{width: auto; max-width:inherit;}
  .box .cont{margin-left: 0; margin-right: 0;}
}

/* テーマ内で使いまわすクラス
-----------------------------------------------*/
/* タイトル類 */
#box3 .top_tit .top_tit_ico::after{background-image: url("../../images/lunare/tit_qa_ico.svg");}
#contact .top_tit .top_tit_ico::after{background-image: url("../../images/lunare/contact_tit_ico.svg");}
#company .top_tit .top_tit_ico::after{background-image: url("../../images/lunare/company_tit_ico.svg");}

/* ライン関連 */
.under_line { background: linear-gradient(transparent 70%, #FFFF00 70%);}

@media only screen and (max-width :480px) {
    .top_tit {margin-left: 5%; margin-right: 5%; margin-bottom: 40px; padding-bottom: 25px;}
    .top_tit .top_tit_img img{width: 80%;}
    .top_tit .top_tit_ico::after{width: 60px; height: 50px; right: -10px; bottom: 20px;}
}
/* wrapper
-----------------------------------------------*/
#wrapper{min-width:1200px; overflow-x: hidden;}
#main{}
@media only screen and (max-width :1201px) {
#wrapper{min-width:inherit;}
}
@media only screen and (max-width :769px) {
	#wrapper{min-width:0;overflow-x:hidden;}
	#main{}
}

/* header
-----------------------------------------------*/
#header{width:100%; position: relative; box-sizing: border-box; background: url("../../images/lunare/bg.png") top center no-repeat #fff6d9; background-size: 150% auto; transition: 0.5s; }
#header::after,
#header::before{content: ""; display: block; height: 100%; position: absolute; top: 0;  background:no-repeat; background-size: contain; transition: 0.5s; z-index: 0; width: 18vw;}
#header::before{background-image: url("../../images/lunare/main_box_bg_l.png"); left: 0; background-position: 0% 20%}
#header::after{background-image: url("../../images/lunare/main_box_bg_l.png"); right: 0; background-position: 0% 20%;}
#header #logo{text-align: center; height: 650px; display: flex; justify-content: center; align-items: center; position: relative; z-index: 2;}
#header #logo img{ vertical-align: middle;}
#header .sp_navi-btn{display: none;}

#header #main-read dl{ position: relative; height: 450px; display: flex; align-items: center;}
#header #main-read dl dt{display: table; margin: auto; font-size: 3.5rem; font-weight: 700;}
#header #main-read dl dd{position: absolute; top: 0; z-index: 1;}
#header #main-read dl#main-read01 dt,
#header #main-read dl#main-read02 dt{text-align: center;}
#header #main-read dl#main-read01 dd{left: 0; text-align: left;}
#header #main-read dl#main-read02 dd{right: 0; text-align: right;}
#header #main-read #main-read01_r{position: absolute; top: 20vh; right: 0;}

#header #box1{padding-bottom: 200px;}
#header #box1 .top_tit{background-image: url("../../images/lunare/common/line_gold.png");}
#header #box1 .box1_read{position: relative;}
#header #box1 .box1_read::before,
#header #box1 .box1_read::after{width: 100px; height: 100%; content: ""; display: block; position: absolute; top: 0; background: no-repeat center;background-size: contain; }
#header #box1 .box1_read::before{background-image: url("../../images/lunare/box1_bg_star_l.png"); left: 0;}
#header #box1 .box1_read::after{background-image: url("../../images/lunare/box1_bg_star_r.png"); right: 0;}
#header #box1 .box1_read strong{font-weight: 700; font-size: 3.5rem; color: #F0BF52;}
#header #box1 .box1_read > p{line-height: 2.0; margin-bottom: 25px;}

#header .sp_navi-btn{display: block; cursor: pointer; background-color: #F0BF52; border-radius: 50%; width:80px; height: 80px; z-index: 11; position: fixed; top: 30px; right: 3%; display: flex; justify-content: center; align-items: center;}
#header .sp_navi-btn > p{position: relative; width: 40px; height: 25px; }
#header .sp_navi-btn span{position: absolute;background:#1c2e65; border-radius: 5px; width:100%; height:4px; display: block;}
#header .sp_navi-btn span:nth-child(1){top:0px; left:0px; }
#header .sp_navi-btn span:nth-child(2){top:50%; margin-top:-2px; left:0px; }
#header .sp_navi-btn span:nth-child(3){bottom:0px; left:0px; }

/* ナビモーダル*/
#header .navi{position: fixed;z-index: 10;top: -1px;left: 0;width: 0%;height: 101vh;overflow: hidden;color: #fff;transition: width 0.3s cubic-bezier(.4, 0, .2, 1) 0.2s; display: flex;}
#header .navi .navi_list #cv_navi li{display: block;}
#header .navi_list{opacity: 0; transition: opacity 0.5s 0s; margin: 0 auto; width: 100%; overflow-y: auto;}

#header .navi .navi_list #cv_navi{background-color: #1c2e65; display: flex; justify-content: center; padding: 80px 3%;}
#header .navi .navi_list #cv_navi::before,
#header .navi .navi_list #cv_navi::after{content: ""; display: block; width:85px; height: 75px; background: no-repeat; background-size: contain;}
#header .navi .navi_list #cv_navi::before{background-image: url("../../images/lunare/cv_ico01.svg"); background-position: top left;}
#header .navi .navi_list #cv_navi::after{background-image: url("../../images/lunare/cv_ico02.svg"); background-position: bottom right; margin-top: auto;}


#header .navi .navi_list #cv_navi_list{background-color: #F0BF52; text-align: center; padding: 30px 0;}
#header .navi .navi_list #cv_navi_list > *{padding: 20px 3%;}

#header .navi .navi_list #cv_navi li{display: block; margin-left: 0; margin-bottom: 20px; border-bottom: 1px dotted #fff; padding-bottom: 15px;}
#header .navi .navi_list #cv_navi li:last-child{border-bottom: none; padding-bottom: 0; margin-bottom: 0;}
#header .navi .navi_list #cv_navi li a{ font-size: 2.5rem; line-height: 1.8; letter-spacing: 6px; border: none; text-align: left; color: #fff;}
#header .navi .navi_list #cv_navi li a::before{display: none;}
#header .navi .navi_list ul{position: static; width: auto; text-align: left; padding: 10px 25px 0px 25px; margin: 0;}
#header .navi .navi_list ul li{height: auto; opacity: 1;}
#header .navi .navi_list ul li a{background: none; padding: 0; font-size: 2.5rem; font-weight: bold;}


.navi_active #header .navi {width: 100%; display: flex;}
.navi_active #header .navi_box{width: 100% !important;transition: width 0.1s cubic-bezier(.4, 0, .2, 1) 0s; display: flex; z-index: 2;}
.navi_active #header .navi_list{opacity: 1; transition: opacity 0.5s 0.5s;background-color: #F0BF52;}
.navi_active .header_navi{position:fixed; top: 65px; left: 0; width: 100%; display: block!important;}
.navi_active .header_navi{position:fixed; top: 65px; left: 0; width: 100%; display: block!important;}


@media only screen and (max-width :1769px) {
    /*#header #main-read #main-read01 dd,
    #header #main-read #main-read02 dd,
    #header #main-read #main-read01_r{width: 25vw; transition: 0.5s;}*/
    #header #main-read #main-read01_r{text-align: right;}
    #header #main-read dl{display: block; height: auto;}
    #header #main-read dl dd{position: static; margin-bottom: 40px;}
    #header #main-read dl dt{margin-bottom: 40px;}
}
@media only screen and (max-width :769px) {
    #header #logo {padding: 60px 10%; height: auto; margin-bottom: 40px;}
    #header #main-read #main-read01_r{display: none;}
    #header #main-read dl dd{position: static; text-align: center; width: 100% !important;}
    #header #main-read #main-read01 dd{text-align: left;}
    #header #main-read #main-read02 dd{text-align: right;}
}

@media only screen and (max-width :480px) {
    #header::after, #header::before{display: none;}
    #header .sp_navi-btn{width: 50px; height: 50px;}
    #header .sp_navi-btn > p{width: 25px;}
    #header .navi .navi_list #cv_navi{padding: 35px 3%;}
    #header .navi .navi_list #cv_navi li a{font-size: 1.8rem;}
    #header .navi .navi_list #cv_navi::before, #header .navi .navi_list #cv_navi::after{width: 8%;}
    #header .navi .navi_list #cv_navi_list > *{padding: 10px 0%;}
    #header .navi .navi_list #cv_navi_list img{width: 80%;}
}

/* contents
-----------------------------------------------*/

#box2{background: url("../../images/lunare/box2_bg.jpg") no-repeat; background-size: cover; position: relative;}
#box2::before{content: ""; display: block; background: url("../../images/lunare/box1_img02.png") no-repeat; background-size: contain; width: 391px; height: 391px; top: -130px; left: -50px; position: absolute;}
#box2 .box2_list > li{background: #fff; border-radius: 30px; padding: 5px; margin-bottom: 60px;}
#box2 .box2_list > li > .box2_waku{ border: #F0BF52 2px dotted; padding: 20px; border-radius: 30px; height: 100%;}
#box2 .box2_list .box2_waku .box2_tit{ font-size: 3.0rem; text-align: center; font-weight: 700; margin-bottom: 15px; background: url("../../images/lunare/common/ico_wave.png") repeat-x bottom center; padding-bottom: 20px;}
#box2 .box2_list .box2_waku .box2_tit > span{display: block; text-align: center; line-height: 1.2; color: #1c2e65;}
#box2 .box2_list .box2_waku .box2_tit > span.box2_tit_ico{margin-bottom: 10px; margin-top: -50px;}
#box2 .box2_list .box2_waku .box2_tit > span.box2_tit_txt{}
#box2 .box2_list .box2_waku .box2_list_detail{line-height: 1.6;}
#box2 .box2_other dl{display: flex; justify-content: space-between; align-items: center;}
#box2 .box2_other dl dt{flex-basis: 315px;}
#box2 .box2_other dl dd{position: relative; padding:60px 20px; font-size: 2.5rem; flex: 0.9;}
#box2 .box2_other dl dd::before,
#box2 .box2_other dl dd::after{content: ""; display: block; width: 100%; height: 7px; background: url("../../images/lunare/common/line_blue.png") repeat-x; background-size: contain; position: absolute; left: 0;}
#box2 .box2_other dl dd::before{top: 0;}
#box2 .box2_other dl dd::after{bottom: 0;}
#box2 .box2_flow{background: #fff; border-radius: 30px; padding: 60px;}
#box2 .box2_flow .top_tit{background-image: url("../../images/lunare/common/line_gold.png");}
#box2 .box2_flow .box2_flow_box dt{background-color: #F0BF52; color: #fff; font-size: 3.0rem; font-weight: 700; border-radius: 10px; margin-bottom: 13px; text-align: center; line-height: 1; padding:45px 10px 25px 10px; position: relative;}
#box2 .box2_flow .box2_flow_box dt .box2_flow_no{background-color: #1c2e65; color: #fff; font-size: 3.5rem; border-radius: 50%; width: 57px; height: 57px; position: absolute; top: -20px; left: 50%; transform: translateX(-50%); display: flex; justify-content: center; align-items: center;}
#box2 .box2_flow .box2_flow_box dd{margin-bottom: 80px;}
#box2 .box2_flow .box2_flow_box dd::after{content: "";  display: inline-block; width: 30px; height:30px; border-bottom: 6px solid #DBDEE5; border-right: 6px solid #DBDEE5; transform: rotate(45deg);  position: absolute; left: 50%; margin-left: -15px;}
#box2 .box2_flow .box2_flow_box dd:last-child{margin-bottom: 40px;}
#box2 .box2_flow .box2_flow_box dd:last-child::after{display: none;}



#contact{background: url("../../images/lunare/contact_bg.png") no-repeat; background-size: cover; position: relative;} 
#contact .contact_box > *{display: block; margin-bottom: 10px;}
#contact .contact_box > dt{color: #1c2e65; font-size: 3.0rem; font-weight: 700; text-align: left; line-height: 1.2;}
#contact .contact_box > dt.hissu::after{content: "必須"; display: inline-block; margin-left: 10px; vertical-align: middle; font-size: 1.8rem; color: #fff; background-color: #F0BF52; line-height: 1.2; padding: 4px 10px; border-radius: 10px;}
#contact .contact_box > dd{margin-bottom: 30px;}
#contact .contact_box > dd input[type="number"],
#contact .contact_box > dd input[type="email"],
#contact .contact_box > dd input[type="tel"],
#contact .contact_box > dd input[type="text"],
#contact .contact_box > dd select,
#contact .contact_box > dd textarea{ border: 1px solid #BCBCBC; padding: 10px;box-sizing: border-box; border-radius: 5px; background-color: #fff; width: 100%;} 
#contact .contact_box > dd *::placeholder{color: rgba(220,220,220,1.00);}
#contact .contact_img{top: -80px; right: -30px; position: absolute;}
#contact #contact_btn, #contact #formbtn_box .link_btn{font-size: 2.5rem; height: 75px;}


@media only screen and (max-width :1451px) {
    #box2::before,#contact .contact_img{display: none;}
}
 
@media only screen and (max-width :769px) {
    #box2 .cont{margin-left: 0; margin-right: 0;}
    #box2 .box2_other dl{display: block;}
    #box2 .box2_other dl dt{width: 60vw;  position: relative; z-index: 1; margin: -30px auto 0 auto;}
}

@media only screen and (max-width :480px) {
    #header #main-read dl dt{font-size: 2.2rem;}
    #header #main-read dl#main-read02 dt{margin-left: 10%;}
    #header #box1 {padding-left: 0; padding-right: 0; margin-left: 0; margin-right: 0; padding-bottom: 0px;}
    #header #box1 .box1_read::before, #header #box1 .box1_read::after{width: 70px;background-position: center 25%;}
    #header #box1 .box1_read strong{font-size: 2.2rem;}
    #header #box1 .box1_img img{vertical-align: bottom;}
    #box2 .box2_list .box2_waku .box2_tit > span.box2_tit_ico{width:55px; margin-left: auto; margin-right: auto;}
    #box2 .box2_list .box2_waku .box2_tit > span.box2_tit_txt{font-size: 2.2rem;}
    #box2 .box2_other dl dd{font-size: 1.8rem;}
    #box2 .box2_other dl dd{padding: 30px 0;}
    #box2 .box2_flow{padding: 20px 5%;}
    #box2 .box2_flow .box2_flow_box dt .box2_flow_no{width: 40px; height: 40px; font-size: 2.5rem;}
    #box2 .box2_flow .box2_flow_box dt{font-size: 2.2rem; padding-top: 28px; padding-bottom: 15px;}
    #box2 .box2_img{margin: 0 -6% -20px -6%;}
    #box2 .box2_img img{vertical-align: bottom;}
    #contact .contact_box > dt{font-size: 2.0rem;}
    #contact .contact_box > dt.hissu::after{font-size: 1.4rem;}
}