@charset "utf-8";
/*====================================*\
 * ブレークポイント一覧（モバイルファースト）
 *   max-width: 30em  ･･･ スマホ
 * → min-width: 48em  ･･･ タブレット
 * → min-width: 64em  ･･･ PC・大型タブレット
\*====================================*/

html { font-size: 62.5%;}
body {
	width: 100%;
	background: #fff;
	color: #212121;
	font-family: Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", sans-serif;
	font-size: 1.4em;
	line-height: 1.625;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
@media (min-width:768px) {
	body { font-size: 1.6em; }
}

a:focus,
a:hover { text-decoration: none; }

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

/* SP表示・非表示 */
.sp_n { display: none; }
@media (min-width:481px) {
	.sp_n { display: block; }
	.sp_b { display: none; }
}

/*============================================================================*\
   $Layout
\*============================================================================*/
.wrapper {
	position: relative;
	width: 100%;
	max-width: 960px;
	margin: 0 auto;
	overflow:hidden;
}
@media (max-width:480px) {
	.wrapper {
		width: 100%;
	}
}

.container {
	width: 100%;
	max-width: 980px;
	margin: 0 auto;
	padding-right: 10px;
	padding-left: 10px;
	z-index:30;
}

/*------------------------------------*\
    ヘッダー
\*------------------------------------*/
.header .container {
	position: relative;
}
.header-bar {
	height: 70px;
	padding-top: 4px;
}
.logo {
	float: left;
	width: 130px;
	margin-left: -16px;
}
.header__title {
	margin-left: 130px;
}
.header__title h1 {
	font-size: 1.6rem;
	font-weight: normal;
}
.header__title p {
	font-size: 1.1rem;
	line-height: 1.4;
}
@media (min-width:481px) {
	.logo { width: 160px; }
	.header__title { margin-left: 160px; }
}
@media (min-width:768px) {
	.logo {
		position: absolute;
		left: 10px;
		top: 0;
		z-index: 1;
		width: 230px;
	}
	.header__title { margin-left: 200px; }
	.header__title h1 {
		float: left;
		padding-right: 24px;
		font-size: 1.8rem;
		line-height: 70px;
	}
	.header__title p {
		padding-top: 20px;
		font-size: 1.2rem;
	}
}

.mv {
	background: url(../img/mv_02.png) repeat-x left top;
	background-size: contain;
}
@media (max-width:480px) {
	.mv {
		padding: 0 10px;
	}
	.mv__copy {
		width: 90%;
		margin-left: -5px;
	}
	.mv__image {
		width: 55%;
		margin: -25% 0 0 auto;
	}
}
@media screen and (min-width:481px) {
	.mv {
		position: relative;
		z-index: -1;
		height: 0;
		padding-top: 60.833%;
	}
	.mv__copy {
		position: absolute;
		left: 0;
		top: 30px;
		z-index: 1;
		width: 65vw;
	}
	.mv__image {
		position: absolute;
		right: 0;
		top: -20px;
		width: 40vw;
	}
}
@media print, (min-width:960px) {
	.mv {
		padding-top: 660px;
	}
	.mv__copy {
		left: 50%;
		top: 40px;
		width: 960px;
		margin-left: -480px;
	}
	.mv__image {
		right: 50%;
		top: -70px;
		width: 960px;
		margin-right: -480px;
		text-align: right;
	}
}


/*------------------------------------*\
    コンテンツ
\*------------------------------------*/

.content {
	position: relative;
	z-index: 1;
	margin-top: -100px;
}
@media (min-width:481px) {
	.content { margin-top: -8%; }
}
@media (min-width:960px) {
	.content { margin-top: -180px; }
}

/* 各ブロック共通 */
.box {
  margin-bottom: 20px;
  border: 1px solid #3f8fc2;
}
.box2 {
	max-width: 920px;
	margin: 0 auto 5%;
	padding: 10px;
	border: 4px double #3f8fc2;
	background: #fff;
}
@media (max-width:480px) {
	.box {
		padding: 20px;
	}
	.box > :last-child {
		margin-bottom: 0;
	}
	.box__heading {
		margin-bottom: 20px;
		padding-bottom: 4px;
		border-bottom: 1px solid #d4f1fc;
	}
	.box__heading:before {
		font-size: 2rem;
		line-height: 1.15;
		content: attr(data-alt);
	}
	.box__heading img {
		display: none;
	}
	.box__point {
		margin: 30px 0;
	}
	.point {
		color: #007fba;
		font-size: 1.8rem;
		font-weight: bold;
		line-height: 1.33;
	}
	.point strong {
		color: #ef509a;
	}
}
@media (min-width:481px) {
	.for-pc { display: block; }
	.for-sp { display: none; }
	.box {
		max-width: 960px;
		margin: 0 auto 50px auto;
		border: 1px solid #3f8fc2;
	}
	.box__heading {
		margin-top: -20px;
		margin-bottom: 10px;
	}
	.box__body {
		margin-left: 10.5%;
		margin-right: 20px;
	}
	.box__point {
		margin: 50px 15px;
		text-align: center;
	}
}

/* CVブロック */
.cvblock {
	width: 90%;
	max-width: 880px;
	margin: 30px auto 80px;
	border: 1px solid #c8ecf8;
	background: #fff;
}
.cvblock__heading {
	padding: 5px 5%;
	background: #dff3fd;
	background-image: -moz-linear-gradient(top, #fff 50%, #c0e6fa 100%);
	background-image: -webkit-linear-gradient(top, #fff 50%, #c0e6fa 100%);
	background-image: linear-gradient(to bottom, #fff 50%, #c0e6fa 100%);
}
.cvblock__heading img {
	display: block;
	margin: 0 auto;
}
.cvblock__body {
	padding: 20px;
	text-align: center;
}
.cvblock__btn {
	display: block;
	margin: 20px auto 0;
}
.cvblock__btn:hover {
	opacity: .75;
}
@media (min-width:481px) {
	.cvblock__body {
		padding: 20px 5%;
	}
}


.section01 h2 {
	margin-bottom: 30px;
}
.box03 {
	position: relative;
	z-index: 0;
}
.box03__image {
	text-align: center;
}
@media (min-width:481px) {
	.box03__image {
		position: absolute;
		right: 0;
		z-index: -1;
		top: 12%;
		width: 30%;
	}
}

/* section02 */
.section02 {
  margin-bottom: 80px;
}
.section02 h2 {
  margin-bottom: 20px;
  text-align: center;
}
.reasonBox01 h3,
.reasonBox02 h3,
.reasonBox03 h3 {
  margin-bottom: 20px;
}
.section02 p {
	margin-bottom: 20px;
	font-size: 1.4rem;
}
.section02 em {
	color: #ef509a;
	font-weight: bold;
	font-style: normal;
}
.section02 .reasonBox01,
.section02 .reasonBox02,
.section02 .reasonBox03 {
	margin-bottom: 8%;
}
@media (max-width:480px){
	.section02 h2:first-child {
		position: relative;
		overflow: hidden;
		margin-right: -10px;
		margin-left: -10px;
	}
	.section02 h2:first-child img {
		max-width: none;
		width: 130%;
		margin-left: -15%;
	}
}
@media (min-width:481px){
	.reasonBox01 h3,
	.reasonBox02 h3,
	.reasonBox03 h3 {
		margin-bottom: 40px;
	}
	.section02 .textBox {
		padding-left: 11.5%;
	}
	.section02 .reasonBox01,
	.section02 .reasonBox02,
	.section02 .reasonBox03 {
		max-width: 960px;
		margin: 0 auto 8% auto;
	}
}
@media (min-width:768px){
	.section02 p {
		margin-bottom: 40px;
		font-size: 1.8rem;
	}
	.section02 .reasonBox03 {
		position: relative;
	}
	.section02 .reasonBox03Image {
		position: absolute;
		right: 0;
		top: 2%;
		width: 25%;
	}
}

.section02 .reasonBox02Image,
.section02 .reasonBox03Image {
	margin-top: -10px;
	text-align: center;
}
.section02 .reasonBox01Image {
	margin-bottom: 5%;
}
.section02 .textBox02 {
	margin-top: -10px;
}
@media (max-width:480px) {
	.section02 .textBox01Image {
		display: none;
	}
	.section02 .reasonBox01Image img {
		display: block;
		width: 65%;
		max-width: 353px;
		margin: 0 auto;
	}
	.section02 .reasonBox03Image img {
		display: block;
		width: 50%;
		max-width: 300px;
		margin: 0 auto;
	}
}
@media (min-width:768px) {
	.section02 .textBox01 {
		position: relative;
		z-index: 0;
	}
	.section02 .textBox01Image {
		position: absolute;
		right: 0;
		top: -20px;
		z-index: -1;
		width: 40%;
	}
	.section02 .reasonBox02 {
		position: relative;
		z-index: 0;
	}
	.section02 .textBox02 {
		margin-top: -20px;
	}
	.section02 .reasonBox02Image {
		position: absolute;
		right: 0;
		top: 20%;
		z-index: -1;
		width: 46%;
	}
}

/* section03 */
.section03__upper {
	text-align: center;
}
@media (max-width:480px){
	.section03__upper .colLeft,
	.section03__upper .colRight {
		margin: -20px auto 0;
		width: 70%;
	}
	.server01,
	.server02 {
		padding: 10px 0;
	}
	.flow .sp_b {
		width: 80%;
		margin: 10px auto;
	}
}
@media (min-width:481px){
	.section03__upper .colLeft,
	.section03__upper .colRight {
		display: inline-block;
		max-width: 48%;
		padding: 0 2%;
		text-align: center;
		vertical-align: top;
	}
	.server01 {
		float: left;
		width: 50%;
		padding: 10px 0;
	}
	.server02 {
		width: 50%;
		margin-left: auto;
		padding: 10px 0;
	}
}

/* section04 */
.section04 {
	margin-bottom: 60px;
}
.section04 h2 {
	padding: 25px 0;
	border-top: 1px solid #3f8fc2;
	border-bottom: 1px solid #3f8fc2;
	text-align: center;
}
.section04 .qaBox {
	border-bottom: 1px solid #ebf4f9;
	padding: 40px 0;
}
.section04 .last {
	border-bottom: none;
	margin-bottom: 10px;
}
.section04 p {
	padding-left: 8.5%;
	font-size: 1.4rem;
	line-height: 1.5;
}
@media (max-width:480px){
	.section04 h2 {
		padding: 15px 0;
	}
	.section04 h2 img {
		display: block;
		width: 150px;
		margin: 0 auto;
	}
	.section04 .qaBox {
		padding: 10px 0;
	}
}


/*------------------------------------*\
    フッター
\*------------------------------------*/

.footer {
  width: 100%;
  height: 40px;
  background-color: #e2f3fd;
  border-top: 1px solid #bad6ef;
}
.footer a {
  text-decoration: none;
  color: #333;
}
.footer a:hover {
  text-decoration: underline;
}
.footer .footerIn {
  max-width: 920px;
  margin: 0 auto;
  line-height: 40px;
  font-size: 12px;
}
.footer .footerIn li {
  display: inline;
  margin-right: 30px;
}
.footer .footerIn p {
  float: right;
}
@media (max-width:480px){
	.footer .footerIn {
		width: 93.75%;
	}
	.footer .footerIn p {
		float: none;
	}
	.footer .footerIn ul {
		display: none;
	}
}


/*------------------------------------*\
    キャンペーン
\*------------------------------------*/
.campaignblock {
	max-width: 960px;
	margin: 0 auto 50px;
	color: #fff;
}
.campaignblock a {
	color: inherit;
}
.campaignblock img {
	vertical-align: top;
}
.top-img{
	position: relative;
	z-index:20;
	top:-5px;
}
.categori-img{
	position: absolute;
	top:1em;
	right: 0;
	left: 0;
	z-index:-5;
}
.sp_nl { display: block; }
.top-apply{
	position: relative;
	text-align: center;
	padding-top: 40px;
	z-index:50;
	margin-top: 8%;
	margin-bottom: 5%;
}
.top-apply p{
	position: relative;
	z-index:10;
}
.top-apply-img{
	position: absolute;	
	max-width: 226px;
	z-index:5;
}
.apply-left{
	top:10px;
	left: 3.95%;
	right: 72.81%;
}
.apply-right{
	top:10px;
	right: 3.54%;
	left:73.22%;
}
@media screen and (max-width: 960px) {
	.apply-left{
		left: 0;
	}
	.apply-right{
		right: 0;
	}
}
@media screen and (max-width: 768px) {
	.top-img{
		top:-16px;
	}
	.sp_nl { display: none; }
	.apply-img{
		margin: 0 auto;
	}
	.apply-img{
		width: 452px;
	}
	.top-apply-img{
		position: static;
		float: left;
	}
	.apply-left{
		width:  50%;
	}
	.apply-right{
		width:  50%;
	}
}
@media screen and (max-width: 480px) {
	.top-img{
		top:-2px;
	}
	.apply-img{
		width: 96%;
	}
}
/* 花びら */
.campaign_header .snowfall-flakes {
	animation: spin 1.5s linear infinite;
}
.campaign_header{
	position: relative;
	top:0;
	height: auto;
	margin-top: 60px;
}
.header-img{
position: relative;
	z-index:20;
	text-align: center;
	border-bottom: dotted 5px #006ebc;
}
.summer_leaf{
	position: absolute;
	width: 100%;
	max-width: 200px;
	z-index:-10;
}
.leaf-left{
	top:-120px;
	left: 0;
}
.leaf-right{
	bottom: -40px;
	right: 0;
}
.campaign_menu{ 
	width: 93.75%;
	margin: 20px auto ;
	text-align: center;
}
.campaign_menu ul{ 
	list-style: none;
	padding: 0;
}
.campaign_menu li{
	display: inline-block;
	width: 30%;
	margin-right: 3%;
}
.campaign_menu li:last-child {
	margin-right: 0;
}
.campaign_main {
	position: relative;
	margin-top: 0%;
}
.plan_notes{
	position: absolute;
	color: #000;
	font-size: 1.6rem;
	font-weight:bold;
	z-index:2;
}
.plan_notes p{
	text-align: center;
}
.plan_notes span{
	font-size: 1.8rem;
	font-weight:bold;
}
.plan_notes a{
	text-decoration:none;
	border-bottom: 2px solid #000;
}
.plan_notes a:hover{
	color: #43c0f6;
	border-bottom: 2px solid #43c0f6;
}
.plan01{
	margin-top:-52.5%;
	left: 10%;
	right: 10%;
}
.course{
	position: relative;
	background: url(../img/cp2020summer_bg.jpg) repeat center top;
}
.special-course{
	position: relative;
	text-align: center;
	background-color: #00aefd;
	margin: 8% auto;
	padding: 20px 0 35px 0;
	z-index:0;
}
.special_leaf{
	position: absolute;
	width: 100%;
	max-width: 200px;
	z-index:0;
}
.special-img{
	position: relative;
	width: 95%;
	margin: 0 auto;
	z-index:10;
}
.course_leaf{
	position: absolute;
	width: 100%;
	max-width: 200px;
	z-index:0;
}
.course_leaf.leaf-left{
	top:-120px;
	left: -30px;
}
.course_leaf.leaf-right{
	bottom: -120px;
	right: -30px;
}

@keyframes spin {
	0% {transform: rotate(0deg);}
	100% {transform: rotate(360deg);}
}
.campaignblock2 {
	padding: 20px;
}
.campaignbox {
	overflow-y: scroll;
	height: 300px;
	margin-top: 20px;
	padding: 20px;
	background: #fff;
	border: 1px solid #aaa;
	color: #2b1b10;
	font-size: 14px;
}
.campaignbox h3 {
	margin-bottom: 5px;
}
.campaignbox ul,
.campaignbox ol,
.campaignbox p {
	margin-bottom: 1em;
}
.campaignbox ul,
.campaignbox ol {
	padding-left: 2em;
}
.campaignbox li {
	list-style-type: square;
	margin-bottom: .5em;
}
.campaignbox ul.indent {
	list-style: none;
	padding-left: 0;
}
.campaignbox ul.indent > li {
	padding-left: 1em;
	text-indent: -1em;
}
.campaignbox a {
	font-weight: bold;
}
.list-number li{
	list-style-type: decimal;
}
.list-circle li{
	list-style-type: disc;
}
.mbls { margin-bottom: 60px!important; }
@media screen and (max-width: 640px) {
	.top-apply{
		padding: 20px;
	}
	.summer_leaf{
		max-width: 120px;
	}
	.special_leaf{
		max-width: 120px;
	}
	.leaf-left{
		top:-60px;
		left: 0;
	}
	.leaf-right{
		bottom: -40px;
		right: 0;
	}
	.course_leaf{
		max-width: 120px;
	}
	.course_leaf.leaf-left{
		top:-60px;
		left: -2%;
	}
	.course_leaf.leaf-right{
		bottom: -60px;
		right: -2%;
	}
	.campaign_header{
		margin-top: 5%;
	}
	.categori-img{
		top:6em;
	}
}
@media screen and (max-width: 480px) {
	.campaignblock {
		width: auto;
	}
	.campaignblock2 {
		padding: 20px;
	}
	.campaignbox {
		padding: 12px;
	}
	.campaign_menu li{
	width: 45%;
	margin-right: 5%;
	margin-bottom: 5%;
	}
	.campaign_menu li:nth-child(2){
	margin-right: 0;
	}
	.plan_notes{
		font-size: 1.2rem;
	}
	.plan_notes span{
		font-size: 1.6rem;
	}
	.plan01{
		margin-top:-130%;
	}
	.mbls { margin-bottom: 8%!important; }
}
@media screen and (max-width: 250px) {
	.top-apply{
		padding-top: 10px;
	}
}
.p-bk {
	color: #000;
}

.tab_wrap{
	position: relative;
	width:96%;
	margin:0 auto;
	padding-bottom: 30px;
}
input[type="radio"]{display:none;}
.tab_area{position: relative; font-size:0; margin:0 3px; z-index: 10;}
.tab_area label{width:32.93%; margin:0 .2%; display:inline-block; padding:12px 0; color:#fff; background:#60c7ef; text-align:center; font-size:18px; cursor:pointer; transition:ease 0.2s opacity;}
.tab_area label:hover{background:#a1d8ed;}
.panel_area{position: relative; background:#fff;border: 3px solid #009cea;text-align: center; z-index: 10;}
.tab_panel{width:100%; padding:20px 0; display:none;}
.tab_panel p{font-size:16px; letter-spacing:1px;}
 
#tab1:checked ~ .tab_area .tab1_label{background:#009cea; color:#fff;}
#tab1:checked ~ .panel_area #panel1{display:block;}
#tab2:checked ~ .tab_area .tab2_label{background:#009cea; color:#fff;}
#tab2:checked ~ .panel_area #panel2{display:block;}
#tab3:checked ~ .tab_area .tab3_label{background:#009cea; color:#fff;}
#tab3:checked ~ .panel_area #panel3{display:block;}

.tab_mt{
	margin-top: 10% !important;
}
.tab_mts{
	margin-top: 4% !important;
}
.tab_prl{
	padding: 0 5%;
	font-size: 20px !important;
}
.tab_prl p{
	margin-top: 30px;
}
/*slick*/
.slider{
	margin: 0 auto;
	width: 90%;
}
.slider img{
	height: auto;
	width: 90%;
}
.slick-slide img{
	margin: 0 auto;
}
.slick-prev::before {content: url(../img/prev.svg);}
.slick-next::before {content: url(../img/next.svg);}
.slick-prev{
	left: 0;
	z-index: 10;
}
.slick-next{
	right: 0;
	z-index: 10;
}
.slider-text{
	color: #000;
	text-align: center;
}
.product-list{
	text-align: center;
	margin: 40px auto 0 auto;
	width: 90%;
}
.list-title{
	background-color: #6098cb;
	color: #fff;
	font-size: 20px !important;
	padding: 5px 10px;
	width: 100%;
}
.voice{
	width: 90%;
	margin: 20px auto;
	text-align: left;
}
.voice p{
	position: relative;
	display: inline-block;
	margin-top: 25px;
	padding: 15px;
	background-color: #ffc6cd;
	border-radius: 20px;
	font-size: 1.4rem;
	color: #4c4c4c;
}
.voice p:before {
	content: "";
	position: absolute;
	top: -30px;
	left: 50%;
	margin-left: -15px;
	border: 15px solid transparent;
	border-bottom: 15px solid #ffc6cd;
}
.line{
	margin: 2rem;
}
@media (min-width:64em) {
	.tab_wrap{
		width:100%;
		max-width: 900px;
	}
	.tab_panel{
		padding:40px 0;
	}
	.tab_mt{
		margin-top: 80px !important;
	}
	.tab_mts{
		margin-top: 30px !important;
	}
	.tab_prl{
		padding: 0 10%;
	}
	.tab_area label{
		font-size:25px;
	}
	.slider{
		margin: 0 auto;
		width: 96%;
	}
	.slider img{
		height: auto;
		width: 100%;
		max-width: 750px;
	}
	.voice{
		width: 80%;
		margin: 40px auto;
	}
	.line{
		margin: 5rem;
	}
}


/*============================================================================*\
    $Utilities（原則編集禁止）
\*============================================================================*/

/*------------------------------------*\
    Clearing
\*------------------------------------*/
.clr { clear: both;}
.clearfix:after { content: ""; display: block; clear: both; }

/*------------------------------------*\
    Float
\*------------------------------------*/
.u-left { float: left;}
.u-right { float: right;}
.u-center { margin-right: auto; margin-left: auto; }

/*------------------------------------*\
    Lists 
\*------------------------------------*/
/* 括弧つき数字 */
.list_parentheses,
ul.list_parentheses,
ol.list_parentheses { padding-left: 0;}
.list_parentheses > li { margin-left: 0; padding-left: 2em; text-indent: -2em; list-style: none; counter-increment: cnt;}
.list_parentheses > li:before { display: inline; margin-right: .5em; content: "(" counter(cnt) ") ";}
.list_parentheses > li > * { text-indent: 0;}

/*------------------------------------*\
    Text Align & Font style
\*------------------------------------*/
.u-text-left   { text-align: left; }
.u-text-center { text-align: center; }
.u-text-right  { text-align: right; }
.u-text-justify { text-align: justify; }
.u-bold { font-weight: 700; }
.u-thin { font-weight: 400; }
.u-font-italic { font-style: italic; }
.u-font-normal { font-style: normal; }

/*------------------------------------*\
    Text Styles
\*------------------------------------*/
.u-size-l {
	font-size: 2em;
	letter-spacing: 0;
	line-height: 1.41;
}
.u-size-m { font-size: 1.25em; }
.u-size-s { font-size: 1.2rem; }

/*------------------------------------*\
    Margins
\*------------------------------------*/
.mt5 { margin-top:    5px!important; }
.mb5 { margin-bottom: 5px!important; }
.mts { margin-top:    16px!important; }
.mrs { margin-right:  16px!important; }
.mbs { margin-bottom: 16px!important; }
.mls { margin-left:   16px!important; }
.mtm { margin-top:    32px!important; }
.mrm { margin-right:  32px!important; }
.mbm { margin-bottom: 32px!important; }
.mlm { margin-left:   32px!important; }
.mtl { margin-top:    64px!important; }
.mrl { margin-right:  64px!important; }
.mbl { margin-bottom: 64px!important; }
.mll { margin-left:   64px!important; }
.m0,.mt0,.mv0 { margin-top:    0!important; }
.m0,.mr0,.mh0 { margin-right:  0!important; }
.m0,.mb0,.mv0 { margin-bottom: 0!important; }
.m0,.ml0,.mh0 { margin-left:   0!important; }

/*------------------------------------*\
    Paddings
\*------------------------------------*/
.pt0 { padding-top:    0!important; }
.pb0 { padding-bottom: 0!important; }

/*------------------------------------*\
    Display Utility
\*------------------------------------*/
.u-hidden { display: none; }
.u-inline { display: inline; }
.u-ib     { display: inline-block; }
.u-block  { display: block; }