@charset "utf-8";

/* ----------------------------------
 便利でお得な定期コース
---------------------------------- */
#main {
	min-width: auto;
}
#regular_course * { 
	font-family: 'Noto Sans JP', "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W6", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-weight: 400;
	box-sizing: border-box;
	background: transparent;
}
#regular_course p { 
	line-height: 1.6;
	background: transparent;
}
#regular_course img { 
	max-width: 100%;
	vertical-align: top;
}
/* PC */
@media screen and (min-width: 951px) {
	#regular_course .for-sp { display: none !important;}
}
/* SP */
@media screen and (max-width: 950px) {
	#regular_course .for-pc { display: none !important;}
}

/* 見出し
---------------------------------- */
#regular_course h1 { width: 100%; padding: 45px 0; margin: 0; line-height: 1.0; display: block; background: #f2f7fb;}
#regular_course h1 span {
	max-width: 1400px;
	padding: 0 50px;
	margin: 0 auto;
	font-size: 28px;
	text-align: left;
	color: #0064b4;
	display: block;
}
@media screen and (max-width: 950px) {
	#regular_course h1 { padding: 20px 0; background: #FFF;}
	#regular_course h1 span { padding: 0 30px; font-size: 24px;}
}

/* メインビジュアル
---------------------------------- */
#regular_course #regular_course_mv { margin: 0 0 70px; background: #f7fbfb;}
#regular_course #regular_course_mv .liner {
  padding: 0.1em 0.2em;
  background: linear-gradient(transparent 60%, #bce6fa 60%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
#regular_course #regular_course_mv .mv_inner { max-width: 1300px; margin: 0 auto; display: flex; align-items: center;}
#regular_course #regular_course_mv .image { max-width: 50%;}
#regular_course #regular_course_mv .image img { position: relative; left: -40px;}
#regular_course #regular_course_mv .desc { max-width: 50%;}
#regular_course #regular_course_mv .desc .text,
#regular_course #regular_course_mv .desc .text span { font-size: 18px; line-height: 2.4; color: #000;}
#regular_course #regular_course_mv .desc .text strong { font-size: 18px; line-height: 2.4; color: #0064b4;}

@media screen and (min-width: 1201px) {
	#regular_course #regular_course_mv .mv_inner {
		background-color: transparent;
		background-image: url("../../img/usr/freepage/regular_course/mv_bg.png");
		background-repeat: no-repeat;
		background-position: right calc(100% - 40px);
		-webkit-background-size: 230px auto;
		background-size: 230px auto;
	}
}
@media screen and (max-width: 1200px) {
	#regular_course #regular_course_mv .desc .text,
	#regular_course #regular_course_mv .desc .text span,
	#regular_course #regular_course_mv .desc .text strong { font-size: 16px; line-height: 2.0;}
}
@media screen and (max-width: 950px) {
	#regular_course #regular_course_mv { margin: 0 0 30px; background: #FFF;}
	#regular_course #regular_course_mv .mv_inner { max-width: 100%; display: block;}
	#regular_course #regular_course_mv .image { max-width: 100%; width: 100%;}
	#regular_course #regular_course_mv .image img { width: 100%; left: 0;}
	#regular_course #regular_course_mv .desc { max-width: 100%; padding: 20px 15px;}
}

/* コンテンツフレーム
---------------------------------- */
#regular_course #regular_course_inner { max-width: 1400px; padding: 0 50px; margin: 0 auto;}
#regular_course #regular_course_inner .section-box + .section-box { margin-top: 100px;}
#regular_course #regular_course_inner .section-box h2 {
  padding: 0 0 25px;
  margin: 0 0 40px;
	border-bottom: #0064b4 1px solid;
	font-size: 40px;
  text-align: center;
	letter-spacing: 0.15em;
  color: #0064b4;
}
@media screen and (max-width: 950px) {
	#regular_course #regular_course_inner { max-width: 100%; padding: 0 15px; margin: 0 auto;}
	#regular_course #regular_course_inner .section-box + .section-box { margin-top: 60px;}
	#regular_course #regular_course_inner .section-box h2 { padding: 0 0 15px; margin: 0 0 20px; font-size: 24px; letter-spacing: 0.1em;}
}

/* ナビゲーション
---------------------------------- */
#regular_course #nav { max-width: 1300px; margin: 0 auto 100px; display: flex;}
#regular_course #nav li { width: calc((100% - 50px * 2)/3);}
#regular_course #nav li + li { margin-left: 50px;}
#regular_course #nav li a {
  width: 100%;
  height: 95px;
	border-radius: 25px;
	font-size: 22px;
	text-decoration: none;
	color: #FFF;
  display: flex;
  justify-content: center;
  align-items: center;
	background: #c8c8c8;
	transition: 0.3s;
}
#regular_course #nav li a:hover { text-decoration: none; background: #0064b4;}
#regular_course #nav li a::after {
  content: '';
  width: 10px;
  height: 10px;
  border-right: #FFF 1px solid;
  border-top: #FFF 1px solid;
  display: inline-block;
	position: relative;
	top: -3px;
	right: -20px;
  transform: rotate(135deg);
}
@media screen and (max-width: 1200px) {
	#regular_course #nav li { width: calc((100% - 20px * 2)/3);}
	#regular_course #nav li + li { margin-left: 20px;}
	#regular_course #nav li a { font-size: 18px;}
}
@media screen and (max-width: 950px) {
	#regular_course #nav { max-width: 100%; margin: 0 auto 60px; display: block;}
	#regular_course #nav li { width: 100%;}
	#regular_course #nav li + li { margin: 10px 0 0;}
	#regular_course #nav li a { height: 70px; border-radius: 15px;}
}

/* 1.定期コース5つのメリット
---------------------------------- */
#regular_course #sec01.section-box h2 { margin: 0;}
#regular_course #sec01 .merit-frame { margin: 0 60px 20px;}
#regular_course #sec01 .merit-box { padding: 60px 0 60px 150px; position: relative;}
#regular_course #sec01 .merit-box + .merit-box { border-top: #c8c8c8 1px dashed;}
#regular_course #sec01 .merit-box .head { padding: 0 160px 0 0; margin: 0 0 15px; position: relative;}
#regular_course #sec01 .merit-box .head h3 { padding: 0; margin: 0; font-size: 38px; line-height: 1.4; color: #000;}
#regular_course #sec01 .merit-box .head h3 .check { font-size: 38px; color: #0064b4;}
#regular_course #sec01 .merit-box .text { font-size: 18px; color: #878787;}
#regular_course #sec01 .merit-box .text + .text { margin-top: 20px;}
#regular_course #sec01 .merit-box .text .check { font-size: 18px; color: #0064b4;}
#regular_course #sec01 .merit-box .icon {
  width: 110px;
  height: 110px;
  border-radius: 110px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #00b4f0;
	position: absolute;
	top: 45px;
	left: 0;
}
#regular_course #sec01 .merit-box .icon-inner { font-size: 16px; text-align: center; color: #FFF;}
#regular_course #sec01 .merit-box .icon-inner .num { margin: 5px 0 0; font-size: 38px; text-align: center; color: #FFF; display: block;}

#regular_course #sec01 .merit-box.merit02 .image { width: 140px; position: absolute; top: 0; right: 40px;}
#regular_course #sec01 .merit-box.merit03 .image { width: 120px; position: absolute; top: 0; right: 40px;}
#regular_course #sec01 .merit-box.merit04 .image { width: 130px; position: absolute; top: 0; right: 40px;}
#regular_course #sec01 .merit-box.merit05 .image { width: 140px; position: absolute; top: -20px; right: 20px;}

#regular_course #sec01 .howto-add { padding: 80px 40px; background: #f5f5f5;}
#regular_course #sec01 .howto-add h4 { padding: 0; margin: 0 0 40px; font-size: 34px; color: #000; text-align: center;}
#regular_course #sec01 .howto-add .text { max-width: 900px; margin: 0 auto 50px; font-size: 18px; color: #878787;}
#regular_course #sec01 .howto-add .image { margin: 0 auto; text-align: center;}

@media screen and (max-width: 1200px) {
	#regular_course #sec01 .merit-frame { margin: 0 0 20px;}
}
@media screen and (max-width: 950px) {
	#regular_course #sec01 .merit-frame { margin: 0 0 20px;}
	#regular_course #sec01 .merit-box { padding: 30px 0;}
	#regular_course #sec01 .merit-box .head { min-height: 70px; padding: 0 80px 0 80px; display: flex; align-items: center;}
	#regular_course #sec01 .merit-box .head h3 { font-size: 18px;}
	#regular_course #sec01 .merit-box .head h3 .check { font-size: 18px;}
	#regular_course #sec01 .merit-box .text { font-size: 16px;}
	#regular_course #sec01 .merit-box .text + .text { margin-top: 15px;}
	#regular_course #sec01 .merit-box .text .check { font-size: 15px;}
	#regular_course #sec01 .merit-box .icon { width: 70px; height: 70px; padding: 5px 0 0; border-radius: 70px; top: 25px;}
	#regular_course #sec01 .merit-box .icon-inner { font-size: 14px;}
	#regular_course #sec01 .merit-box .icon-inner .num { font-size: 26px;}
	
	#regular_course #sec01 .merit-box.merit02 .image { width: 80px; top: 10px; right: 0;}
	#regular_course #sec01 .merit-box.merit03 .image { width: 80px; top: 0; right: 10px;}
	#regular_course #sec01 .merit-box.merit04 .head  { padding: 0 70px 0 80px;}
	#regular_course #sec01 .merit-box.merit04 .image { width: 60px; top: 10px; right: 0;}
	#regular_course #sec01 .merit-box.merit05 .image { width: 70px; top: 10px; right: 0;}

	#regular_course #sec01 .howto-add { padding: 30px 20px;}
	#regular_course #sec01 .howto-add h4 { margin: 0 0 20px; font-size: 20px;}
	#regular_course #sec01 .howto-add .text { margin: 0 10px 30px; font-size: 16px;}
	#regular_course #sec01 .howto-add .image { max-width: 80%; margin: 0 auto; text-align: center;}
}


/* 2.定期コース対象商品
---------------------------------- */
#regular_course #sec02 .course_products { padding: 40px 60px; background: #f5f5f5;}
#regular_course #sec02 .course_products .type + .type { margin-top: 20px;}
#regular_course #sec02 .product-list { display: flex; flex-wrap: wrap; gap: 15px 20px;}
#regular_course #sec02 .product-list + .product-list { margin-top: 15px;}
#regular_course #sec02 .product-list li { font-size: 16px; color: #000; word-break: keep-all; white-space: nowrap; display: flex; align-items: center;}
#regular_course #sec02 .product-list li::before { content: ''; width: 8px; height: 8px; margin: 0 5px 0 0; border-radius: 10px; display: block; background: #c8c8c8;}
#regular_course #sec02 .type dt { padding: 10px 24px; margin: 0 0 15px; border-radius: 5px; font-size: 18px; line-height: 1.0; color: #FFF; background: #c8c8c8;}
#regular_course #sec02 .type.type-ac dt,
#regular_course #sec02 .type.type-ac .product-list li::before { background: #82d2fa;}
#regular_course #sec02 .type.type-adv dt,
#regular_course #sec02 .type.type-adv .product-list li::before { background: #878787;}

@media screen and (max-width: 950px) {
	#regular_course #sec02 .course_products { padding: 30px 20px;}
	#regular_course #sec02 .type dt { padding: 10px 16px; border-radius: 3px; font-size: 16px;}
	#regular_course #sec02 .product-list { padding: 0 5px;}
	#regular_course #sec02 .product-list li { font-size: 14px;}
}

/* 3.定期お申し込み方法
---------------------------------- */
#regular_course #sec03 .howto { display: flex; justify-content: space-between;}
#regular_course #sec03 .howto .desc { max-width: calc(50% - 20px);}
#regular_course #sec03 .howto .desc .text { font-size: 20px; line-height: 1.6; color: #000;}
#regular_course #sec03 .howto .desc .memo { padding: 0 0 0 1em; margin: 20px 0 0; text-indent: -1em; font-size: 18px; color: #000;}
#regular_course #sec03 .howto .image { max-width: calc(50% - 20px);}

@media screen and (max-width: 950px) {
	#regular_course #sec03 .howto { display: block;}
	#regular_course #sec03 .howto .desc { max-width: 100%; margin: 0 10px 30px;}
	#regular_course #sec03 .howto .desc .text { font-size: 18px;}
	#regular_course #sec03 .howto .desc .memo { margin: 15px 0 0; font-size: 16px;}
	#regular_course #sec03 .howto .image { max-width: 100%;}
}