@charset "utf-8";

/* =================================================================
		Reset
================================================================= */
html {
  font-size: 62.5%;
}
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, 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:0;
	outline:0;
	vertical-align:baseline;
	background:transparent;
/*	color: #434343;*/

}
div,h1,h2,h3,h4,h5,h6,p,dl,dt,dd,ol,ul,li,form,input,textarea,button,table,tr,th,td,article,aside,footer,header,hgroup,nav,section{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
body {
	background: #EBF4FD;
	font-size: 1.4rem;
	line-height:1.5;
	/*font-family: Verdana, Roboto, "Droid Sans", "游ゴシック", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", sans-serif;*/
	font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', '游ゴシック  Medium', meiryo, sans-serif;
}
/*@media (max-width: 767px) {
	body {
		font-size:1.2rem;
		line-height:1.6;
	}
}*/
ol, ul {
    list-style: none;
}

img {
	vertical-align:bottom;
	vertical-align:top;
	font-size:0;
	line-height:0;
	max-width:100%;
	height:auto;
}




/*@media screen and (min-width:0px) and (max-width:767px) {
img {
	width:100%;
}
}*/




a {
	transition: all .3s;
	color:#1f8abf;
    text-decoration: none;
}
a:hover {
	color:#1f8abf;
	text-decoration:none;
}
table{
	font-size: inherit;
	font: 100%;
	border: none;
	border-collapse: collapse;
	border-spacing: 0;
}
input[type*="button"] {
	cursor: pointer;
}
em {
    font-weight: bold;
    font-style: normal;
}
/* =================================================================
		レイアウト
================================================================= */
/*ヘッダー*/
.header{
    background-repeat: repeat-y;
    background-position: left top;
    background-image: url( "../image/index/bg01.png");
    position: fixed;
    width: 100%;
    z-index: 100;
}
/*@media (max-width: 768px) {
    .header{
		background:#36394b;
        padding:0;
		min-height: 40px;
    }
}*/
.header__body{
/*	width:1000px;*/
	width:100%;
    position: relative;
	margin:0 auto;
	display: table;
}
/*@media (max-width: 768px) {
    .header__body{
        width:100%;
    }
}*/
.header__logo_wrap {
/*	display: table-cell;*/
	display: none;
	vertical-align: middle;
	background:#36394b;
}
.header__list_wrap{
	background: url("../../image/common/bg_header02.png")no-repeat left top #fff;
	display: table-cell;
	vertical-align: middle;
	padding: 0 0 0 0;
	text-align: right;
}
/*@media (max-width: 768px) {
    .header__list_wrap{
       display: none;
    }
}*/
 .header__logo{
	/*width:260px;*/
	 padding: 0 0 0 10px;
        width:190px;
}
/*@media (max-width: 768px) {
    .header__logo{
		padding: 0 0 0 10px;
        width:190px;
    }
}*/
.header__logo img{
	display: inline-block;
    vertical-align: middle;
	padding: 0 0 4px 0;
}
.header__list > li{
	margin:0 5px 0 0;
	padding: 0 10px 0 0;
	display: inline-block;
/*	border-right: 1px solid #36394b;*/
	margin-right: 0;
	font-size: 1.5rem;
}
.header__list > li:last-child{
	margin-right:0;
}
/*@media (max-width: 768px) {
	.header__list > li{
		margin-right: 0;
	}
}*/
.header__list > li a{
    color: #36394b;
}
.header__list > li a:hover{
    color: #1f8abf;
}
.header__sns_btn a{
	background: #df0069;
	border-radius: 100px;
	/*padding: 4px 20px;*/
	padding: 4px 15px;
	color: #fff;
}
/*@media screen and (min-width:0px) and (max-width:767px) {
	.header__sns_btn a{
		padding: 4px 15px;
	}
}*/
/*フッター*/
.footer__bg {
	background: #36394b;
	/*padding: 40px 0 20px;*/
	padding: 20px 0 20px;
}
/*@media screen and (min-width:0px) and (max-width:767px) {
	.footer__bg {
		padding: 20px 0 20px;
	}
}*/
.footer__body {
	max-width: 1000px;
	margin: 0 auto;
}
.footer__list {
	margin: 0 0 40px;
    text-align: center;
}
@media (max-width: 768px) {
    .footer__list {
		/*width: 80%;
        margin: 0 auto 20px;
		text-align: left;*/
    }
}
.footer__list{
	font-size: 0;
}
.footer__list > li {
	background:  url("../../image/common/bg_line.png") repeat-y left top;
	background-size: 1px auto;
    display: inline-block;
	margin: 0 0 10px;
	padding: 0 10px;
	font-size: 1.4rem;
}
.footer__list > li:last-child {
	background-image:  url("../../image/common/bg_line.png"),url("../../image/common/bg_line.png");
	background-position: left top,right top;
	background-repeat: repeat-y,repeat-y;
	background-size: 1px auto,1px auto;
}
/*@media (max-width: 768px) {
	.footer__list > li:nth-child(4n),
	.footer__list > li:nth-child(7n) {
		background-image:  url("../../image/common/bg_line.png"),url("../../image/common/bg_line.png");
		background-position: left top,right top;
		background-repeat: repeat-y,repeat-y;
		background-size: 1px auto,1px auto;
	}
	.footer__list > li:last-child {
		background-image:  url("../../image/common/bg_line02.png"),url("../../image/common/bg_line.png");
		background-position: left top,right top;
		background-repeat: repeat-y,repeat-y;
		background-size: 1px auto,1px auto;
	}
}*/
.footer__list > li:first-child {
	padding-left: 10px;
}
.footer__list > li a {
    color: #fff;
}
.footer__list > li a:hover {
    color: #1f8abf;
}
.footer__box02{
	text-align: center;
}
.footer__logo {
	display: inline-block;
	color: #fff;
	margin-right: 10px;
}
/*@media (max-width: 768px) {
	.footer__logo {
		margin-right: 10px;
	}
}*/

.footer__logo img{
		width: 180px;
	}


/*@media (max-width: 768px) {
	.footer__logo img{
		width: 180px;
	}
}*/
.footer__tel {
	display: inline-block;
}
.footer__tel a{
	display: inline-block;
	border: 1px solid #fff;
	margin: 0 10px;
	/*padding: 4px 20px;
	font-size: 1.8rem;
	color: #fff;*/
	padding: 4px 10px;
		font-size: 1.6rem;
		margin: 0 0;

}
/*@media (max-width: 768px) {
	.footer__tel a{
		padding: 4px 10px;
		font-size: 1.6rem;
		margin: 0 0;
	}
}*/
.footer__address {
	text-align: left;
	display: inline-block;
	vertical-align: middle;
	color: #fff;
	font-size: 1.1rem;
		margin: 10px 4px 0;

}
/*@media (max-width: 768px) {
	.footer__address {
		font-size: 1.1rem;
		margin: 10px 4px 0;
	}
}*/
.copy {
	padding: 20px 0;
	/*font-size: 1.2rem;*/
	font-size: 1rem;
	text-align: center;
	color: #237673;
}
/*@media (max-width: 768px) {
	.copy {
		font-size: 1rem;
	}
}*/

/* OPEN / CLOSE BTNS */
.js-sp_btn {
	display: none;
    /*position: absolute;*/
	display: inline-block;
    top:0;
    right:0;
    z-index: 999;
}
/*@media (max-width: 768px) {
	.js-sp_btn {
		display: inline-block;
	}
}*/
.js-sp_btn a {
    display: inline-block;
    text-decoration: none;
    /* safari hack */
}
.js-sp_btn img {
    max-width: 41px;
    width:100%;
}
/* OVERLAY */
.js-overlay {
    position: fixed;
    position: absolute;
    top: 120%;
    right: 0;
    z-index: 99;
    display: none;
    overflow: auto;
    width: 90%;
    border: 1px solid #fff;
    background:#42476a;
}

.header__sp_list {
    margin: 0;
    padding: 0;
    width: 100%;
}
.header__sp_list li {
    width: 100%;
}
.header__sp_list li a {
    color: #fff;
    padding:.7em 1em;
    display:block;
    font-size:1.4rem;
    font-weight: normal;
    text-decoration: none;
    border-bottom: 1px dotted #fff;
    text-shadow: 0px 0px 7px rgba(0,0,0,0.2);
}
.header__sp_list li:last-child a{
    border-bottom: none;
}
/* =================================================================
		コンテンツ
================================================================= */
.wrapper {
    position: relative;
	/*padding: 42px 0 0;*/
	padding: 0px 0 38px 0;

}
/*@media (max-width: 768px) {
	.wrapper {
		padding: 38px 0 0;
	}
}*/
.main {
	background: #eee;
	/*padding: 40px 0 0;*/
	padding: 0;
}
/*@media (max-width: 768px) {
	.main {
		padding: 0;
	}
}*/
.main__body {
/*	max-width: 1920px;*/
	max-width: 640px;
	margin: 0 auto;
	padding: 0 0 0px;
}



/*@media (max-width: 768px) {
	.main__body {
	}
}*/
.key {
	position: relative;
}
.cv__key {
	/*position: absolute;
	left: 0;
	right: 0;
	bottom:4%;
	width: 56%;
	margin: 0 auto;*/
	background: #fff;
		position: relative;
		width: 100%;
		padding: 20px 0 20px;
}
/*@media (max-width: 768px) {
	.cv__key {
		background: #fff;
		position: relative;
		width: 100%;
		padding: 0 0 20px;
	}
}*/
.cv {
	/*width: 56%;
	margin: 0 auto;
	*/
	background: #fff;
		position: relative;
		width: 100%;
		padding: 0 0 20px;
}
/*@media (max-width: 768px) {
	.cv {
		background: #fff;
		position: relative;
		width: 100%;
		padding: 0 0 20px;
	}
}*/


.cv__box {
	position: relative;
}
.cv__tel {
	/*position: absolute;
	left: 4%;
	bottom:7%;
	width: 43%;*/
	position:static;
		width: 80%;
		margin: 0 auto 20px;
}

.cv__tel a{
/*	pointer-events: none;*/
	pointer-events:auto;
}


/*@media (max-width: 768px) {
	.cv__tel {
		position:static;
		width: 80%;
		margin: 0 auto 20px;
	}
		.cv__tel a{
		pointer-events:auto;
}
}*/
/*.cv__btn {
	position: absolute;
	right: 4%;
	bottom:6%;
	width: 45%;
}*/
.cv__btn {
		position: static;
		width: 80%;
		margin: 0 auto;
	}
	.cv__btn2 {
		position: static;
		width: 80%;
		margin: 20px auto 0;
	}



/*@media (max-width: 768px) {
	.cv__btn {
		position: static;
		width: 80%;
		margin: 0 auto;
	}
	.cv__btn2 {
		position: static;
		width: 80%;
		margin: 20px auto 0;
	}
}*/
/* =================================================================
		汎用モジュール
================================================================= */
.sns {
	background: #36394b;
	margin: 0 0 40px;
	padding: 20px 20px 28px;
	text-align: center;
}

.sns.type02 {
	background: #2c5d93;
}
/*@media (max-width: 768px) {
    .sns {
        margin:0 0 40px;
    }
}*/
.sns__ttl {
	margin: 0 0 10px;
	font-weight: normal;
	font-size: 1.4rem;
	vertical-align: middle;
	color: #fff;
}
.sns__list {
	display: inline-block;
}
.sns__list > li {
	display: inline-block;
	margin: 0 4px;
	vertical-align: middle;
}

/* =================================================================
		汎用パーツ
================================================================= */
.ttl01 {
	margin-top: -40px;
	padding-top: 40px;
	text-align: center;
}
.ttl01 > span{
	display: inline-block;
	background: #36394b;
	color: #fff;
	font-weight: normal;
	padding: 0 0 7px;
	margin: 0 0 20px;
}
.ttl01 > span > span{
	display: inline-block;
	border-bottom: 1px solid #fff;
	color: #fff;
	font-size: 1.6rem;
	font-weight: normal;
	padding: 0 20px;
}
.font_em01 {
    font-weight: 700;
    color: #18703c;
}
.font_em02 {
    font-weight: 700;
    color: #e34e4d;
}

.order_btn{
        width:160px;
    }

/*@media (min-width: 767px) {
	.order_btn{
        width:160px;
    }
}*/
.js-date_txt {
	display: block;
    /*font-size: 0.8rem;*/
	font-size: 2.4rem;
    margin:-2% 2% 4%;
    text-align: right;
}
/*@media (min-width: 767px) {
	.js-date_txt {
        font-size: 2.4rem;
    }
}*/

.is-campaign {
    display: block;
}
.no-campaign {
    display: none;
}
/*.is-pc {
    display: block !important;
}
.is-sp {
    display: none !important;
}*/
 .is-pc {
        display: none !important;
    }
    .is-sp {
        display: block !important;
    }

/*@media (max-width: 768px) {
    .is-pc {
        display: none !important;
    }
    .is-sp {
        display: block !important;
    }
}*/
.fb_iframe_widget,
.fb_iframe_widget span,
.fb_iframe_widget iframe[style]{
    width: 100% !important;
}


/* =================================================================
		CLEARFIX
================================================================= */
.header__body:after,
.service__box02:after,
.company__bodyin:after,
.staff__list:after,
.footer__list:after,
.clearfix:after{
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}


/* =================================================================
		2019/04
================================================================= */




/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 768px) {
.pc { display: none !important; }
.sp { display: block !important; }
}

.cv_btn1{
	margin-top: 10ox !important;
}

/* =================================================================
		2023/05/24 LP用 FAQ
================================================================= */
.key__ttlFaq {
	margin: 10px 35% -10px;
	width: 30%;
	text-align:center;
}

@media screen and (min-width:471px) {
   .header_kakubutsu_logo {
margin: 3px 30% -10px;
    width: 40%;
    text-align: center;
   }
}

.key__faq {
  background-color: fff;
}
.accordion {
  margin-left: auto;
  margin-right: auto;
  margin-top: 30px;
  max-width: 500px;
  position: relative;
  width: 100%;
}
.accordion-container {
	padding-bottom: 50px;
    width: 95%;
    margin: auto;
}
.accordion-item {
	margin: 15px 0px;
}
.accordion-title {
  color: #2E87FF;
  cursor: pointer;
  font-size: 16px;
  margin-bottom: 10px;
}
.accordion-content {
  display: none;
  margin-left: 2px;
}
.accordion-content p {
  font-size: 13px;
  line-height: 1.5;
}
/* 矢印 */
.accordion-title {
  position: relative;
}

/* タイトル下線 */
.accordion-title::before {
  content: "";
  display: block;
  height: 1px;
  width: 100%;
  position: absolute;
  top: 110%;
  border-bottom: 1px solid #707070;
}
/* 下線(クリック後) */
.accordion-title.open::before {
  opacity: 0;
}

.accordion-title::after {
  border-right: solid 2px #2E87FF;
  border-top: solid 2px #2E87FF;
  content: "";
  display: block;
  height: 8px;
  position: absolute;
  right: 25px;
  top: 38%;
  transform: rotate(135deg);
  transition: transform .3s ease-in-out, top .3s ease-in-out;
  width: 8px;
}
.accordion-title.open::after {
  top: 45%;
  transform: rotate(-45deg);
}

/* =================================================================
		パターン2ヘッダー
================================================================= */

.inner {
    width: 980px;
    margin: 0 auto;
}
.inner:after {
    content: "";
    clear: both;
    display: block;
}

/* header */
#top-head {
top: -100px;
    position: absolute;
    width: 100%;
    margin: 100px auto 0;
    padding: 30px 0;
    line-height: 1;
    z-index: 999;
    background-color: #1f8abf;
}
#top-head a,
#top-head {
    color: #fff;
    text-decoration: none;
}
#top-head .inner {
    position: relative;
}
#top-head .logo {
    float: left;
    font-size: 36px;
}
#global-nav ul {
    list-style: none;
    position: absolute;
    right: 0;
    bottom: 0;
    font-size: 14px;
}
#global-nav ul li {
    float: left;
}
#global-nav ul li a {
    padding: 0 30px;
}

/* Fixed */
#top-head.fixed {
    margin-top: 0;
    top: 0;
    position: fixed;
    padding-top: 10px;
    height: 55px;
    background: #fff;
    background: rgba(255,255,255,.7);
    transition: top 0.65s ease-in;
    -webkit-transition: top 0.65s ease-in;
    -moz-transition: top 0.65s ease-in;
}
#top-head.fixed .logo {
    font-size: 24px;
    color: #333;
}
#top-head.fixed #global-nav ul li a {
    color: #333;
    padding: 0 20px;
}

/* Toggle Button */
#nav-toggle {
    display: none;
    position: absolute;
    right: 12px;
    top: 14px;
    width: 34px;
    height: 36px;
    cursor: pointer;
    z-index: 101;
}
#nav-toggle div {
    position: relative;
}
#nav-toggle span {
    display: block;
    position: absolute;
    height: 4px;
    width: 100%;
    background: #666;
    left: 0;
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    transition: .35s ease-in-out;
}
#nav-toggle span:nth-child(1) {
    top: 0;
}
#nav-toggle span:nth-child(2) {
    top: 11px;
}
#nav-toggle span:nth-child(3) {
    top: 22px;
}


@media screen and (max-width: 640px) {
    #top-head,
    .inner {
        width: 100%;
        padding: 0;
    }
    #top-head {
        top: 0;
        position: fixed;
        margin-top: 0;
    }
    /* Fixed reset */
    #top-head.fixed {
        padding-top: 0;
        background: transparent;
    }
    #mobile-head {
        background: #fff;
        width: 100%;
        height: 56px;
        z-index: 999;
        position: relative;
    }
    #top-head.fixed .logo,
    #top-head .logo {
        position: absolute;
        left: 13px;
        top: 13px;
        color: #333;
        font-size: 26px;
    }
    #global-nav {
        position: absolute;
        /* 開いてないときは画面外に配置 */
        top: -500px;
        background: #333;
        width: 100%;
        text-align: center;
        padding: 10px 0;
        -webkit-transition: .5s ease-in-out;
        -moz-transition: .5s ease-in-out;
        transition: .5s ease-in-out;
    }
    #global-nav ul {
        list-style: none;
        position: static;
        right: 0;
        bottom: 0;
        font-size: 14px;
    }
    #global-nav ul li {
        float: none;
        position: static;
    }
    #top-head #global-nav ul li a,
    #top-head.fixed #global-nav ul li a {
        width: 100%;
        display: block;
        color: #fff;
        padding: 18px 0;
    }
    #nav-toggle {
        display: block;
    }
    /* #nav-toggle 切り替えアニメーション */
    .open #nav-toggle span:nth-child(1) {
        top: 11px;
        -webkit-transform: rotate(315deg);
        -moz-transform: rotate(315deg);
        transform: rotate(315deg);
    }
    .open #nav-toggle span:nth-child(2) {
        width: 0;
        left: 50%;
    }
    .open #nav-toggle span:nth-child(3) {
        top: 11px;
        -webkit-transform: rotate(-315deg);
        -moz-transform: rotate(-315deg);
        transform: rotate(-315deg);
    }
    /* #global-nav スライドアニメーション */
    .open #global-nav {
        /* #global-nav top + #mobile-head height */
        -moz-transform: translateY(556px);
        -webkit-transform: translateY(556px);
        transform: translateY(556px);
    }
}

   .key__body {
   	max-width: 640px;
   	margin: 0 auto;
   	padding: 0 0 0px;
   	background-color: #fff;
   }

   .main_header {
   	margin-bottom: 10px;
   	padding-top: 10px;
   }

   .header_kakubutsu_logo {
   	margin-left: calc(5 / 640 * 100vw);
   	margin-right: 40px;
	width: 333px;
   }

         @media screen and (min-width:520px) and (max-width:680px) {
   .header_kakubutsu_logo {
    width: calc(335 / 681 * 100vw);
    margin-left: calc(10 / 681 * 100vw);
    margin-right: calc(30 / 681 * 100vw);
    margin-top: calc(3 / 681 * 100vw);
   }
}

@media screen and (min-width:435px) and (max-width:520px) {
   .header_kakubutsu_logo {
    width: calc(335 / 681 * 100vw);
    margin-left: calc(10 / 681 * 100vw);
    margin-right: calc(20 / 681 * 100vw);
   }
}

@media screen and (max-width:435px) {
   .header_kakubutsu_logo {
    width: calc(315 / 681 * 100vw);
    margin-left: calc(10 / 681 * 100vw);
    margin-right: calc(10 / 681 * 100vw);
   }
}

.header_CV {
	width: 118px;
}

         @media screen and (max-width:640px) {
.header_CV {
	width: calc(118 / 681 * 100vw);
}
}

.header_Contact {
	width: 118px;
}

         @media screen and (max-width:640px) {
.header_Contact {
	width: calc(118 / 681 * 100vw);
}
}


   .menu_header {
   	background-color: #2E87FF;
   }

   .menu_list {
   	padding-top: 25px;
   	padding-right: 37px;
   }

      @media screen and (max-width:640px) {
   .menu_list {
   	padding-top: calc(25 / 640 * 100vw);
   	padding-right: calc(37 / 640 * 100vw);
   }
}

   .menu_header_inner {
   	display: flex;
   	justify-content: flex-start;
   }

   .menu_header_item {
   	vertical-align: top;
   	padding-left: 22px;
   }
   @media screen and (max-width:524px) {
   .menu_header_item {
   	padding-left: calc(12 / 640 * 100vw);
   }
      @media screen and (min-width:525px) and ( max-width:879px) {
   .menu_header_item {
   	padding-left: calc(22 / 640 * 100vw);   }
   }
}

   .header_home {
	max-width: calc(80 / 640 * 100vw);
   }

   .header_aga {
	max-width: calc(55 / 640 * 100vw);
   }

   .header_ed {
	max-width: calc(35 / 640 * 100vw);
   }

   .header_method {
	max-width: calc(175 / 640 * 100vw);
   }

   .menu_hum {
   	border-left: 1px solid #fff;
   }

   /*==================================================
　5-2-1 3本線が×に
===================================*/
   /*ボタン外側※レイアウトによってpositionや形状は適宜変更してください*/
   .openbtn1 {
   	position: relative;
   	/*ボタン内側の基点となるためrelativeを指定*/
   	background: #2E87FF;
   	cursor: pointer;
   	width: 70px;
   	border-radius: 5px;
   }

   /*ボタン内側*/
   .openbtn1 span {
   	display: inline-block;
   	transition: all .4s;
   	/*アニメーションの設定*/
   	position: absolute;
   	left: 40px;
   	height: 3px;
   	border-radius: 2px;
   	background: #fff;
   	width: 46%;
   }

    @media screen and (max-width:640px) {
   .openbtn1 span {
   	display: inline-block;
   	transition: all .4s;
   	/*アニメーションの設定*/
   	position: absolute;
   	left: calc(30 / 640 * 100vw);
   	height: 3px;
   	border-radius: 2px;
   	background: #fff;
   	width: 46%;
   }
   }

      .openbtn1 span:nth-of-type(1) {
   	top: 33px;
   }
   @media screen and (max-width:640px) {
   .openbtn1 span:nth-of-type(1) {
   	top: calc(30 / 640 * 100vw);
   }
   }

   .openbtn1 span:nth-of-type(2) {
   	top:43px;
   }

	@media screen and (max-width:640px) {
   .openbtn1 span:nth-of-type(2) {
   	top: calc(40 / 640 * 100vw);
   }
}

   .openbtn1 span:nth-of-type(3) {
   	top: 53px;
   }
	@media screen and (max-width:640px) {
   .openbtn1 span:nth-of-type(3) {
   	top: calc(50 / 640 * 100vw);
   }
		 }


   /*activeクラスが付与されると線が回転して×に*/

   .openbtn1.active span:nth-of-type(1) {
   	top: calc(32 / 640 * 100vw);
   	left: calc(31 / 640 * 100vw);
   	transform: translateY(6px) rotate(-45deg);
   	width: 50%;
   }

   @media screen and (min-width:640px) {
   .openbtn1.active span:nth-of-type(1) {
    top: 39px;
    left: 40px;
   }
}

   .openbtn1.active span:nth-of-type(2) {
   	opacity: 0;
   	/*真ん中の線は透過*/
   }

   .openbtn1.active span:nth-of-type(3) {
    top: calc(47 / 640 * 100vw);
    left: calc(30 / 640 * 100vw);
   	transform: translateY(-6px) rotate(45deg);
   	width: 50%;
   }

      @media screen and (min-width:640px) {
   .openbtn1.active span:nth-of-type(3) {
    top: 50px;
    left: 40px;
   }
}

   /*========= レイアウトのためのCSS ===============*/

   body {
   	background: #f3f3f3;
   	padding: 20px;
   }


   a {
   	color: #333;
   	text-decoration: none;
   }

   .lead {
   	margin: 20px 0 0 0;
   }

   .btn-block {
   	width: 200px;
   	padding: 30px;
   }

   /*========= ナビゲーションのためのCSS ===============*/

   #g-nav {
   	/*position:fixed;にし、z-indexの数値を大きくして前面へ*/
   	position: fixed;
   	z-index: 999;
   	/*ナビのスタート位置と形状*/
   	top: calc(200 / 723 * 100vw);
   	right: -200%;
   	width: calc(600 / 640 * 100vw);
   	height: 100vh;
   	/*ナビの高さ*/
   	background: #fff;
   	/*動き*/
   	transition: all 0.6s;
   }
@media screen and (min-width:723px) {
     #g-nav {
   	/*ナビのスタート位置と形状*/
   	top: 182px;
   }
   }
   @media screen and (min-width:640px) {
    #g-nav {
      /*ナビのスタート位置と形状*/
      width: 640px;
    }
    }

   /*アクティブクラスがついたら位置を0に*/
   #g-nav.panelactive {
   	left: 50%;
   	transform: translate(-50%, 0%);
   }

   /*ナビゲーションの縦スクロール*/
   #g-nav.panelactive #g-nav-list {
   	/*ナビの数が増えた場合縦スクロール*/
   	position: fixed;
   	z-index: 999;
   	width: 100%;
   	height: 100vh;
   	/*表示する高さ*/
   	overflow: auto;
   	-webkit-overflow-scrolling: touch;
   }

   /*ナビゲーション*/
   #g-nav ul {
   	/*ナビゲーション天地中央揃え*/
   	position: absolute;
   	z-index: 999;
   	font-size: 28px;
	left: calc(40 / 640 * 100vw);
   }

   @media screen and (min-width:640px) {
    #g-nav ul {
      /*ナビのスタート位置と形状*/
      left: 40px;
    }
  }

   /*リストのレイアウト設定*/

   #g-nav li {
   	list-style: none;
   	text-align: center;
   }

   #g-nav li a {
   	color: #2E87FF;
   	text-decoration: none;
   	padding: 20px 10px;
   	display: block;
   	text-transform: uppercase;
   	letter-spacing: 0.1em;
   	font-weight: bold;
   }

.link_box01 a{
	background-color: #fff;
	position: absolute;
	width: calc(220 / 680 * 100vw);
	height: calc(190 / 680 * 100vw);
	top: calc(1170 / 680 * 100vw);
	left: calc(65 / 680 * 100vw);
	opacity: 0%;
}

@media screen and (min-width:681px) {
.link_box01 a{
width: 220px;
    height: 190px;
    top: 1170px;
    left: 65px;
}
}

.link_box02 a{
	background-color: #fff;
	position: absolute;
	width: calc(220 / 680 * 100vw);
	height: calc(190 / 680 * 100vw);
	top: calc(1170 / 680 * 100vw);
	left: calc(355 / 680 * 100vw);
	opacity: 0%;
}

@media screen and (min-width:681px) {
.link_box02 a{
    width: 220px;
    height: 190px;
    top: 1170px;
    left: 355px;
}
}

.link_box03 a{
background-color: #fff;
    position: absolute;
    width: calc(390 / 640 * 100vw);
    height: calc(50 / 640 * 100vw);
    top: calc(2080 / 640 * 100vw);
    left: calc(95 / 640 * 100vw);
    opacity: 0%;
}
@media screen and (max-width:490px) {
.link_box03 a{
    top: calc(2050 / 640 * 100vw);
}
}

@media screen and (min-width:681px) {
.link_box03 a{
	width: 430px;
	height: 70px;
	top: 2210px;
	left: 95px;
}
}

.link_box04 a{
    background-color: #fff;
    position: absolute;
    width: calc(390 / 640 * 100vw);
    height: calc(130 / 640 * 100vw);
    top: calc(3245 / 640 * 100vw);
    left: calc(95 / 640 * 100vw);
	opacity: 0%;
}

@media screen and (min-width:681px) {
.link_box04 a{
	width: 430px;
	height: 70px;
	top: 3495px;
	left: 95px;
}
}

.link_box05 a{
    background-color: #fff;
    position: absolute;
    width: calc(540 / 640 * 100vw);
    height: calc(410 / 640 * 100vw);
    top: calc(3458 / 640 * 100vw);
    left: calc(25 / 640 * 100vw);
	opacity: 0%;
}

@media screen and (min-width:681px) {
.link_box05 a{
width: 580px;
    height: 430px;
    top: 3688px;
    left: 25px;
}
}

.link_box06 a{
background-color: #fff;
    position: absolute;
    width: calc(450 / 680 * 100vw);
    height: calc(40 / 680 * 100vw);
    top: calc(5545 / 680 * 100vw);
    left: calc(75 / 680 * 100vw);
}

@media screen and (min-width:681px) {
.link_box06 a{
    width: 490px;
    height: 50px;
    top: 5548px;
    left: 65px;
}
}

.icon_qes {
    height: calc(70 / 640 * 100vw);
}

@media screen and (min-width:641px) {
.icon_qes {
    height: 70px
}
}

.icon_ans {
    width: calc(450 / 640 * 100vw);
}

@media screen and (min-width:641px) {
.icon_ans {
    width: 450px
}
}

/* =================================================================
		固定ボタン
================================================================= */
.fixed-btns {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    z-index: 1000;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}

.fixed-btns__inner {
    position: relative;
    width: 100%;
    line-height: 0;
}

.fixed-btns__inner img {
    width: 100%;
    height: auto;
    display: block;
    vertical-align: top;
}

.fixed-btn-link {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50%;
    background-color: transparent;
    opacity: 0;
    transition: opacity 0.3s;
}

.fixed-btn-link--left {
    left: 0;
}

.fixed-btn-link--right {
    right: 0;
}

/* ホバー時に少し見えるようにする場合(オプション) */
.fixed-btn-link:hover {
    opacity: 0.1;
    background-color: #fff;
}

/* メインコンテンツ下部の余白調整 */
.wrapper {
    padding-bottom: 80px;
    /* 固定ボタン画像の高さ分(調整してください) */
}

@media screen and (max-width: 640px) {
    .wrapper {
        padding-bottom: calc(80 / 640 * 100vw);
    }
}