@charset "UTF-8";

* {
  box-sizing: border-box;
}

body {
	font-family: "M PLUS 1p", sans-serif;
	line-height: 1.4;
}

/*------配置------*/
.left {float: left;}
.right {float: right;}
/*
.clear {clear: both;}
*/
.textLeft {text-align: left;}
.textRight {text-align: right;}
.textCenter {text-align: center;}
.hidden {display: none;}

/*------テキスト------*/
.bold {font-weight: bold;}
.normal {font-weight: normal;}

/*------色------*/
	/*0基準*/
.c000 {color: #000;}
.c003 {color: #003;}
.c006 {color: #006;}
.c009 {color: #009;}
.c00c {color: #00c;}
.c00f {color: #00f;}
.c030 {color: #030;}
.c033 {color: #033;}
.c036 {color: #036;}
.c039 {color: #039;}
.c03c {color: #03c;}
.c03f {color: #03f;}
.c060 {color: #060;}
.c063 {color: #063;}
.c066 {color: #066;}
.c069 {color: #069;}
.c06c {color: #06c;}
.c06f {color: #06f;}
.c090 {color: #090;}
.c093 {color: #093;}
.c096 {color: #096;}
.c099 {color: #099;}
.c09c {color: #09c;}
.c09f {color: #09f;}
.c0c0 {color: #0c0;}
.c0c3 {color: #0c3;}
.c0c6 {color: #0c6;}
.c0c9 {color: #0c9;}
.c0cc {color: #0cc;}
.c0cf {color: #0cf;}
.c0f0 {color: #0f0;}
.c0f3 {color: #0f3;}
.c0f6 {color: #0f6;}
.c0f9 {color: #0f9;}
.c0fc {color: #0fc;}
.c0ff {color: #0ff;}
	/*3基準*/
.c300 {color: #300;}
.c303 {color: #303;}
.c306 {color: #306;}
.c309 {color: #309;}
.c30c {color: #30c;}
.c30f {color: #30f;}
.c330 {color: #330;}
.c333 {color: #333;}
.c336 {color: #336;}
.c339 {color: #339;}
.c33c {color: #33c;}
.c33f {color: #33f;}
.c360 {color: #360;}
.c363 {color: #363;}
.c366 {color: #366;}
.c369 {color: #369;}
.c36c {color: #36c;}
.c36f {color: #36f;}
.c390 {color: #390;}
.c393 {color: #393;}
.c396 {color: #396;}
.c399 {color: #399;}
.c39c {color: #39c;}
.c39f {color: #39f;}
.c3c0 {color: #3c0;}
.c3c3 {color: #3c3;}
.c3c6 {color: #3c6;}
.c3c9 {color: #3c9;}
.c3cc {color: #3cc;}
.c3cf {color: #3cf;}
.c3f0 {color: #3f0;}
.c3f3 {color: #3f3;}
.c3f6 {color: #3f6;}
.c3f9 {color: #3f9;}
.c3fc {color: #3fc;}
.c3ff {color: #3ff;}
	/*6基準*/
.c600 {color: #600;}
.c603 {color: #603;}
.c606 {color: #606;}
.c609 {color: #609;}
.c60c {color: #60c;}
.c60f {color: #60f;}
.c630 {color: #630;}
.c633 {color: #633;}
.c636 {color: #636;}
.c639 {color: #639;}
.c63c {color: #63c;}
.c63f {color: #63f;}
.c660 {color: #660;}
.c663 {color: #663;}
.c666 {color: #666;}
.c669 {color: #669;}
.c66c {color: #66c;}
.c66f {color: #66f;}
.c690 {color: #690;}
.c693 {color: #693;}
.c696 {color: #696;}
.c699 {color: #699;}
.c69c {color: #69c;}
.c69f {color: #69f;}
.c6c0 {color: #6c0;}
.c6c3 {color: #6c3;}
.c6c6 {color: #6c6;}
.c6c9 {color: #6c9;}
.c6cc {color: #6cc;}
.c6cf {color: #6cf;}
.c6f0 {color: #6f0;}
.c6f3 {color: #6f3;}
.c6f6 {color: #6f6;}
.c6f9 {color: #6f9;}
.c6fc {color: #6fc;}
.c6ff {color: #6ff;}
	/*9基準*/
.c900 {color: #900;}
.c903 {color: #903;}
.c906 {color: #906;}
.c909 {color: #909;}
.c90c {color: #90c;}
.c90f {color: #90f;}
.c930 {color: #930;}
.c933 {color: #933;}
.c936 {color: #936;}
.c939 {color: #939;}
.c93c {color: #93c;}
.c93f {color: #93f;}
.c960 {color: #960;}
.c963 {color: #963;}
.c966 {color: #966;}
.c969 {color: #969;}
.c96c {color: #96c;}
.c96f {color: #96f;}
.c990 {color: #990;}
.c993 {color: #993;}
.c996 {color: #996;}
.c999 {color: #999;}
.c99c {color: #99c;}
.c99f {color: #99f;}
.c9c0 {color: #9c0;}
.c9c3 {color: #9c3;}
.c9c6 {color: #9c6;}
.c9c9 {color: #9c9;}
.c9cc {color: #9cc;}
.c9cf {color: #9cf;}
.c9f0 {color: #9f0;}
.c9f3 {color: #9f3;}
.c9f6 {color: #9f6;}
.c9f9 {color: #9f9;}
.c9fc {color: #9fc;}
.c9ff {color: #9ff;}
	/*c基準*/
.cc00 {color: #c00;}
.cc03 {color: #c03;}
.cc06 {color: #c06;}
.cc09 {color: #c09;}
.cc0c {color: #c0c;}
.cc0f {color: #c0f;}
.cc30 {color: #c30;}
.cc33 {color: #c33;}
.cc36 {color: #c36;}
.cc39 {color: #c39;}
.cc3c {color: #c3c;}
.cc3f {color: #c3f;}
.cc60 {color: #c60;}
.cc63 {color: #c63;}
.cc66 {color: #c66;}
.cc69 {color: #c69;}
.cc6c {color: #c6c;}
.cc6f {color: #c6f;}
.cc90 {color: #c90;}
.cc93 {color: #c93;}
.cc96 {color: #c96;}
.cc99 {color: #c99;}
.cc9c {color: #c9c;}
.cc9f {color: #c9f;}
.ccc0 {color: #cc0;}
.ccc3 {color: #cc3;}
.ccc6 {color: #cc6;}
.ccc9 {color: #cc9;}
.cccc {color: #ccc;}
.cccf {color: #ccf;}
.ccf0 {color: #cf0;}
.ccf3 {color: #cf3;}
.ccf6 {color: #cf6;}
.ccf9 {color: #cf9;}
.ccfc {color: #cfc;}
.ccff {color: #cff;}
	/*f基準*/
.cf00 {color: #f00;}
.cf03 {color: #f03;}
.cf06 {color: #f06;}
.cf09 {color: #f09;}
.cf0c {color: #f0c;}
.cf0f {color: #f0f;}
.cf30 {color: #f30;}
.cf33 {color: #f33;}
.cf36 {color: #f36;}
.cf39 {color: #f39;}
.cf3c {color: #f3c;}
.cf3f {color: #f3f;}
.cf60 {color: #f60;}
.cf63 {color: #f63;}
.cf66 {color: #f66;}
.cf69 {color: #f69;}
.cf6c {color: #f6c;}
.cf6f {color: #f6f;}
.cf90 {color: #f90;}
.cf93 {color: #f93;}
.cf96 {color: #f96;}
.cf99 {color: #f99;}
.cf9c {color: #f9c;}
.cf9f {color: #f9f;}
.cfc0 {color: #c90;}
.cfc3 {color: #fc3;}
.cfc6 {color: #fc6;}
.cfc9 {color: #fc9;}
.cfcc {color: #fcc;}
.cfcf {color: #fcf;}
.cff0 {color: #ff0;}
.cff3 {color: #ff3;}
.cff6 {color: #ff6;}
.cff9 {color: #ff9;}
.cffc {color: #ffc;}
.cfff {color: #fff;}

.clear:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.clear {
	display: inline-table;
}

* html .clear {
	height: 1%;
	}

.clear {
	display: block;
	}

img {
	width: 100%;
	height: auto;
}

/* Text Size
------------------------------------------------------------ */
.txt10 { font-size: 77%; } /* 10px */
.txt11 { font-size: 85%; } /* 11px */
.txt12 { font-size: 93%; } /* 12px */
.txt13 { font-size: 100%; } /* 13px */
.txt14 { font-size: 108%; } /* 14px */
.txt15 { font-size: 116%; } /* 15px */
.txt16 { font-size: 123.1%; } /* 16px */
.txt17 { font-size: 131%; } /* 17px */
.txt18 { font-size: 138.5%; } /* 18px */
.txt19 { font-size: 146.5%; } /* 19px */
.txt20 { font-size: 153.9%; } /* 20px */
.txt21 { font-size: 161.6%; } /* 21px */
.txt22 { font-size: 167%; } /* 22px */
.txt23 { font-size: 174%; } /* 23px */
.txt24 { font-size: 182%; } /* 24px */
.txt25 { font-size: 189%; } /* 25px */
.txt26 { font-size: 197%; } /* 26px */


.inner{
	width: 900px;
	margin: 0 auto;
	background: #FFF;
}

hr {
	clear:both;
	display: block;
	height: 1px;
	border: 0;
	border-top: 1px solid #CCC;
	margin: 2em 0;
}

.mb10{ margin-bottom:10px; }
.mb20{ margin-bottom:20px; }
.mb30{ margin-bottom:30px; }
.mb40{ margin-bottom:40px; }
.mb50{ margin-bottom:50px; }
.mb60{ margin-bottom:60px; }
.mb70{ margin-bottom:70px; }
.mb80{ margin-bottom:80px; }
.mb90{ margin-bottom:90px; }
.mb100{ margin-bottom:100px; }
.mb120{ margin-bottom:120px; }

.mt10{ margin-top:10px; }
.mt20{ margin-top:20px; }
.mt30{ margin-top:30px; }
.mt40{ margin-top:40px; }
.mt50{ margin-top:50px; }
.mt60{ margin-top:60px; }
.mt70{ margin-top:70px; }
.mt80{ margin-top:80px; }
.mt90{ margin-top:90px; }
.mt100{ margin-top:100px; }
.mt120{ margin-top:120px; }

/* ==========================
フェードインアニメーション
===========================*/
.fadein {
	opacity: 0;
	transform : translate(0px, 20px);
	transition : all 1s;
}

.fadein.active{
	opacity: 1;
	transform : translate(0, 0);
}

/* ==========================
セクションタイトル
===========================*/
h3 {
    font-size: 42px;
	font-weight: 700;
	letter-spacing: 0.05em;
	background: linear-gradient(90deg, #006cb8, #1bb8ce);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-feature-settings: "palt";
}

h3 span {
    font-size: 27px;
	font-weight: 400;
	font-family: "arial";
	display: block;
	position: relative;
	margin-bottom: 20px;

	background: linear-gradient(90deg, #006cb8, #1bb8ce);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

h3 span::after {
    content: "";
	position: absolute;
	top: 115%;
	left: -680px;
	width: 1090px;
	height: 1px;
	background-image: url(/mirai/images/title_line.webp");
	transform: translateY(-50%);
}

/*🔲🔲🔲🔲🔲🔲🔲🔲🔲🔲 Header 🔲🔲🔲🔲🔲🔲🔲🔲🔲🔲*/

header {
    padding-left: 1%;
    position: fixed;
    width: 100%;
    background: #fff;
	z-index: 100;
}

header.hidden-border {
    border-bottom: none;
}

header h1 {
    max-width: 240px;
	padding-left: 10px;
}

header .right_side a {
	color: #333;
	display: inline-block;
	font-size: 16px;
	font-weight: 500;
	font-style: normal;
}

header a{
	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	-o-transition: all 0.2s ease;
	transition: all  0.2s ease;
	text-decoration: none;
	line-height: 1.4;
}

header a.hv_b {
	position: relative;
}

header a.hv_b:hover {
	color: #ed85a7;
}

header a.hv_b::after {
position: absolute;
left: 0;
content: '';
width: 100%;
height: 2px;
background: #ed85a7;
bottom: -1px;
transform: scale(0, 1);
transform-origin: right top; /*変形（アンダーラインの伸長）の原点がaタグ（各メニュー）の右端*/
transition: transform 0.3s;  /*変形の時間*/
}

header a.hv_b:hover::after {
transform: scale(1, 1);     /*ホバー後、x軸方向に1（相対値）伸長*/
transform-origin: left top; /*左から右に向かう*/
}

header .left_side {
    width: 240px;
}

header .right_side {
    width: 75%;
}

header ul.flex_bet_center {
    gap: 30px;
	margin-right: 30px;
}

header nav ul li{
/*	position: relative;*/
}

.flex_bet_center,.flex_bet_center_pc {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.flex_end_center {
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

header .top_btn,footer .top_btn{
	background: #006CB8;
	background: linear-gradient(90deg,rgba(0, 108, 184, 1) 0%, rgba(27, 184, 206, 1) 100%);
	border-radius: 5px;
}

header .top_btn a,footer .top_btn a{
	color: #fff;
	text-decoration: none;
	display: block;
	padding: 20px 30px;
}

header .top_btn a:hover,footer .top_btn a:hover{
	opacity: 0.8;
}




/*🔲🔲🔲🔲🔲🔲🔲🔲🔲🔲 footer 🔲🔲🔲🔲🔲🔲🔲🔲🔲🔲*/

footer {
	background: #FDFEE7;
	background: linear-gradient(90deg,rgba(253, 254, 231, 1) 0%, rgba(232, 244, 229, 1) 100%);
}

footer a:hover {
	opacity: 0.8;
}

footer .wrapper {
    padding: 80px 0;
}

footer .left_side {
	width: 230px;
	margin-right: 40px;
}

.flex_start_start_pc {
	display: flex;
}

footer .left_side a{
	text-decoration: none;
	line-height: 2.4;
	font-size: 16px;
	color: #333;
}

.foot_pdf{
	width: 20px;
	margin-left: 5px;
}

.foot_right_contents {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* 上下に配置 */
  align-items: flex-end;          /* 右寄せ */
  height: 250px;
}

.foot_right_contents img{
	width: 350px;
}

footer .top_btn{
	margin-left: 20px;
}

/* ===============================
アクセス
================================*/
.access {
    margin-top: 115px;
    margin-bottom: 110px;
}

.access h3 {
	font-size: clamp(35px,2.7vw,40px);
}

.access h3 span::after {
	left: -980px;
}

.access_content {
    display: flex;
    gap: 70px;
    margin-top: 45px;
}

.access_content div {
    width: clamp(180px,12.5vw,205px);
}

.access_content p {
    font-size: clamp(18px,1.3vw,21px);
    line-height: 1.8;
}

.access iframe {
    width: 100%;
    height: 465px;
    margin-top: 45px;
}

/* ==================================
コンバージョン
===================================*/
.CV_sentence {
    font-size: 30px;
    color: #211816;
	font-weight: 700;
	line-height: 2;
    text-align: center;
    background-color: #c6bb9e;
    padding: 85px 10%;
}

.CV_list {
    margin-top: 100px;
    margin-bottom: 120px;
    display: flex;
    justify-content: space-between;
    gap: 80px;
}

.CV_list li p {
    font-size: clamp(24px,1.7vw,27px);
    text-align: center;
    margin: 25px 0;
}

/* ====================
btn
=====================*/
.topBtn {
    display: flex;
    justify-content: center;
    margin: 0 auto;
}

.topBtn a {
    display: inline-block;
    font-size: clamp(20px,1.5vw,24px);
    color: #fff;
    text-align: center;
    padding: 25px 35px;
    background: linear-gradient(90deg,#006cb8, #1bb8ce);
    border-radius: 5px;
}

.topBtn a:hover {
    opacity: 0.8;
}



/*------------------------- 999px以下 -------------------------*/


@media screen and (max-width: 999px){

	
.pc{
    display: none;
}

.sp{
    display: block;
}
	
.wrapper{
	width: 90%;
	margin-left: 5%;
	margin-right: 5%;
}
	
	
/* =============================
セクションタイトル
===============================*/
h3 {
    font-size: 24px;
}

h3 span {
    font-size: 15px;
}

h3 span::after {
    left: -980px;
}

	
/*🔲🔲🔲🔲🔲🔲🔲🔲🔲🔲 header 🔲🔲🔲🔲🔲🔲🔲🔲🔲🔲*/	
	
header {
   padding: 8px 0px;
}
	
header .right_side a {
    font-size: 16px;
	font-weight: 500;
	text-align: center;
}
	
header h1{
	max-width: 180px;
}
	
header a.hv_b:hover::after {
	display: none;
}
	
#nav_menu{
    /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
    position:fixed;
    z-index: 999;
    /*ナビのスタート位置と形状*/
	top: 63px;
    right: -120%;
	width:100%;
    height: 100vh;/*ナビの高さ*/
	background:#fff;
    /*動き*/
	transition: all 0.6s;
}
	
/*アクティブクラスがついたら位置を0に*/
#nav_menu.panelactive {
	right: 0;
	top: 63px;
	width: 90%;
}
	
/*ナビゲーションの縦スクロール*/
#nav_menu.panelactive #g-nav-list{
	display: block;
    /*ナビの数が増えた場合縦スクロール*/
	padding: 0 20px;
    position: fixed;
    z-index: 999; 
    width: 100%;
    height: 100vh;/*表示する高さ*/
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

#g-nav-list.flex_end_center {
    justify-content: center;
}
	
/*ナビゲーション*/
#nav_menu ul.flex_bet_center {
	display: block;
	text-align: left;
	margin: 40px 0;
	z-index: 999;
}
	
header nav{
	padding: 0;
}

nav ul{
	width: 90%;
	display: block;
}
	
header a.hv_b {
    display: block;
	text-align: center;
}
		
nav ul li a {
	display: block;
	font-weight: 600;
	padding: 15px 10px;
	transition: all .3s;
	text-align: center;
}
	
/*========= ボタンのためのCSS ===============*/
.openbtn{
	position:fixed;
    z-index: 9999;/*ボタンを最前面に*/
	top:0px;
	right: 0px;
	cursor: pointer;
	width: 64px;
	height: 64px;
	background-color: #ed85a7;
}
	
/*×に変化*/	
.openbtn span{
    display: inline-block;
    transition: all .4s;
    position: absolute;
    left: 17px;
    height: 3px;
    border-radius: 2px;
	background-color: #fff;
  	width: 45%;
  }

.openbtn span:nth-of-type(1) {
	top: 20px;
}

.openbtn span:nth-of-type(2) {
	top: 30px;
}

.openbtn span:nth-of-type(3) {
	top: 40px;
}

.openbtn.active span:nth-of-type(1) {
    top: 23px;
    left: 15px;
    transform: translateY(6px) rotate(-45deg);
    width: 50%;
}

.openbtn.active span:nth-of-type(2) {
	opacity: 0;
}

.openbtn.active span:nth-of-type(3){
    top: 35px;
    left: 15px;
    transform: translateY(-6px) rotate(45deg);
    width: 50%;
}
	
header .top_btn{
	width: 80%;
	max-width: 480px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;
}


	
/*🔲🔲🔲🔲🔲🔲🔲🔲🔲🔲 footer SP 🔲🔲🔲🔲🔲🔲🔲🔲🔲🔲*/	
	
.flex_start_start_pc,.flex_bet_center_pc {
	display: block;
}

footer .wrapper {
    padding: 50px 0;
	text-align: center;
}

footer .left_side {
	width: 100%;
	margin-right: 0px;
}

footer .left_side a{
	line-height: 2.4;
	font-size: 16px;
}
	
footer .left_side img{
	width: 50%;
	max-width: 240px;
}

.foot_right_contents {
  display: block;
  flex-direction: column;
  justify-content: space-between; /* 上下に配置 */
  align-items: flex-end;          /* 右寄せ */
  height: auto;
}

.foot_right_contents img{
	width: 250px;
	max-width: 350px;
	margin-top: 20px;
}

footer .top_btn{
	width: 80%;
	max-width: 480px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;
}

.foot_pdf{
	width: 20px!important;
	margin-left: 5px;
}

/* ===============================
アクセス
================================*/
.access {
    margin-top: 100px;
    margin-bottom: 100px;
}

.access h3 {
	font-size: 24px;
}

.access h3 span::after {
	left: -1030px;
}

.access_content {
    flex-direction: column;
    gap: 30px;
    margin-top: 30px;
    align-items: center;
}

.access_content div {
    width: clamp(180px,52vw,205px);
}

.access_content p {
    font-size: clamp(14px,4.3vw,16px);
}

.access iframe {
    width: 100%;
    height: 300px;
    margin-top: 45px;
}

/* ==================================
コンバージョン
===================================*/
.CV_sentence {
    font-size: 18px;
    padding: 50px 5%;
}

.CV_list {
    margin-top: 80px;
    margin-bottom: 100px;
    flex-direction: column;
    justify-content: center;
    gap: 50px;
}

.CV_list li p {
    font-size: clamp(20px,5.4vw,22px);
    text-align: center;
    margin: 25px 0;
}

.CV_list li div:first-of-type {
	max-width: 400px;
	margin: 0 auto;
}

/* ===================
btn
=====================*/
.topBtn a {
    font-size: clamp(16px,4.7vw,18px);
    padding: 15px 20px;
}


}