@charset 'UTF-8';

/*
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400;500;800&display=swap');
@import url('https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css');
*/

/*================================================
 *  CSSリセット 
 ================================================*/
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,main,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;font-weight:normal;}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle}


/*================================================
 *  一般・共通設定
 ================================================*/
*{box-sizing: border-box;}
html{ scroll-behavior: smooth; }
body{
	width: 100%; 
	font-size: 4vw; font-family: "M PLUS Rounded 1c", sans-serif; font-weight: 400; font-style: normal; line-height: 1.6; line-break: strict; color:#543d22; background:#fff;
}
.body_touch {
	width: 100%; 
	font-size: 4vw; font-family: "M PLUS Rounded 1c", sans-serif; font-weight: 400; font-style: normal; line-height: 1.6; line-break: strict; color:#543d22; background:#eefcff;
}
body.modal-open { overflow: hidden; }
a,a:visited{ color:#543d22; text-decoration: underline; text-underline-offset:1vw; }
img { width: 100%; height: auto; }

input[type=radio] { display: none; }
input[type=checkbox] { display:none; }

@media screen and (min-width:769px) {
	body,.body_touch{ font-size: 22px;}
	a{ text-underline-offset:4px; }
}

/*================================================
 *  大枠
 ================================================*/
 .wrap{ width: 100vw; display: flex;}
 .left,.right{ display: none;}
 main{ width: 100vw; text-align: center; background:#fff; scrollbar-gutter: stable;}
 .main_touch { width: 100vw; text-align: center; background:#eefcff; scrollbar-gutter: stable;}
 .inner{ margin: 0 auto; width: 94%; }
 .inner2{ margin: 0 auto; width: 94%; }
 
 @media screen and (min-width:769px) {
	 .left,.right{ display: flex; position: fixed; top:0; width: calc( 50% - 240px); height: 100vh; background-repeat: repeat-y; opacity: 0.8;}
	 .left{ left:0; background-image: url("../images/back1.jpg"); background-position: right; }
	 .right{ right:0; background-image: url("../images/back2.jpg");}
	 main,.main_touch { 
		 /* position: fixed; top: 0; width: 100%; height: 100%; overflow-y: scroll; scrollbar-width: thin; */
		 position: fixed; top: 0; width: 100%; height: 100%; overflow-y: scroll; scrollbar-width: none;
		 padding-left: calc(50% - 240px); padding-right: calc(50% - 240px);
		 background: rgba(255,255,255,0);
	 }
	 .inner{ width: 444px; }
	 .inner2{ width: 470px; }
 }
/*================================================
 *  見出し
 ================================================*/
h1{ font-size: 6vw; font-weight: 800; margin: 3vw auto; color:#543d22; }
h2{ font-size: 3.5vw; font-weight: 500; margin: 0 auto; text-align: left;}
h3{ font-size: 3.5vw; font-weight: 500; margin-bottom: 1.5vw; padding-bottom: 0.5vw; width: 100%; border-bottom: 1px solid #999; }
h4{ font-size: 5.6vw; font-weight: 800; line-height: 1.4;}

.read{ width: 100%; margin: 3vw auto;}

@media screen and (min-width:769px) {
	h1{ font-size: 30px; margin: 20px auto; }
	h2{ font-size: 20px; margin: 20px auto 0 }
	h3{ font-size: 18.5px; margin-bottom: 10px; padding-bottom: 5px; }
	h4{ font-size: 30px;}
	.read{ margin: 15px auto; font-size: 20px;}
}
/*================================================
 *  ヘッダー
 ================================================*/
/* .head{ padding: 3vw 0; background:#D8E58D; } */
.head{ padding: 0 0 3vw; }
.head_bgc{ padding: 1.5vw 0  ; background:#D8E58D; }
.CPlogo{ font-size: 0; }
.dateBox{ padding: 3vw 0; background:#0068B6; font-size: 4vw; color: #fff; }
.dateBox2{ padding: 1.5vw 0; background:#c1272d; font-size: 3vw; color: #fff; }
.CPday{ margin: 0 auto 2vw; padding: 0 5vw; width: 46vw; font-weight: 800; color:#0068B6; background:#fff; border-radius: 5vw;}
.headLink{ 
	position: fixed; bottom:0; margin: 0 auto; width: 100%; height: 16vw;
	display: flex; justify-content: space-evenly; align-items: center; background:#fff; }
.headLink a.aBlue,.headLink a.aRed{ 
	display: flex; justify-content: center; align-items: center;
	width: 40vw; height: 10vw; font-size: 3.5vw; font-weight:600; text-decoration: none; color:#fff; border-radius: 1vw; 
}

.headLink a.aBlue{ background:#0068B6; }
.headLink a.aRed{ background:#c1272d;  }

.headLink_lmsg{ width: 100%; padding: 1vw 3vw 0 0; text-align: right; font-size: 3.5vw; background:#fff;}

.backInfo{ margin: 3vw auto 0; width: 95%; font-size: 2.5vw;}

@media screen and (min-width:769px) {
	.head{ padding: 0 0 15px; margin-bottom: 10px; }
	.dateBox{ padding: 15px 0; font-size: 20px; }
	.dateBox2{ padding: 15px 0; font-size: 18px; }
	.CPday{ margin: 0 auto 5px; padding: 0 20px; width: 200px; border-radius: 16px;}	.headLink{ width: 480px; height: 60px;}
	.headLink a.aBlue,.headLink a.aRed{ width: 200px; height: 40px; border-radius: 5px; font-size: 18px; }
	.backInfo{ margin: 10px auto 0; font-size: 12px;}
	.flow{ margin-top: -10px; }

	.headLink_lmsg{ padding: 5px 4% 0 0; font-size: 18px;}
}
/*================================================
 *  フッター
 ================================================*/
.copyright{ margin: 1vw 0 0 0; padding:0; width:100%; text-align: right; font-size: 3vw;}

.foot{ padding: 3vw 0; background: #f1f1f1;}
.footLink{ margin: 1vw auto 3vw; font-size: 3.5vw; }
.footLink a{ margin: 0 2vw; }
.copyrightWF{ font-size: 3vw;}
.footul {width:fit-content; margin:auto;}
.footul li{float: left;}

@media screen and (min-width:769px) {
	.copyright{ margin: 5px 0 0 0; font-size: 14px;}
	.foot{ padding: 20px 0;}
	.footLink{ margin: 0 auto 20px; font-size: 16px; }
	.footLink a{ margin: 0 10px; color: #0068b6;}
	.copyrightWF{ font-size:14px;}
}

/*================================================
 *  ログインフォーム
================================================*/
::placeholder{ letter-spacing: 0; color:#b3b3b3; }

.loginForm { margin:8vw auto 15vw; width: 90%; }

.sub{ margin: 5vw 0 1vw 0; width: 100%; text-align: left; font-weight: 500; color: #0068b6; }
.inputBox{ position: relative; margin-bottom:1.5em;}

/* ログイン　エラーテキスト表示 --------------------*/
.error{ position: absolute; top:12.5vw; right:0; text-align: right; font-size:3vw; color: #c1272d; }

input[type="tel"],input[type="number"]{
	margin:0; padding: 3vw; height: 12vw; width: 100%; font-size: 5vw; letter-spacing: 0.1em; border-radius: 5px;
 	vertical-align: middle; border: 1px solid #999; -webkit-appearance: none;
}

@media all and (-ms-high-contrast:none){
  *::-ms-backdrop, input[type="tel"] { padding: 0 15px; } /* IE11 */
  *::-ms-backdrop, input[type="number"] { padding: 0 15px; } 
}

/* 入力欄　スピンボタン非表示 --------------------*/
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none; margin: 0;
}

input[type="number"] { -moz-appearance:textfield; }

@media screen and (min-width:769px) {
	.loginForm { margin:30px auto; }
	.sub{ margin: 30px 0 5px 0; }
	.error{ position: absolute; top:51px; font-size:12px; }
	input[type="tel"],input[type="number"]{
	margin:0; padding: 10px; height: 50px; font-size: 20px; }
}

/*================================================
 *  注意書き
================================================*/
.noteBox{
	margin: 1vw auto; padding: 0 0 1vw 0; width: 100%;
    text-align: left; font-size: 3.5vw; 
}

.noteBoxRed{
	margin: 10vw auto 5vw; padding: 2vw 3vw ; width: 100%;
    text-align: left; font-size: 3.5vw; 
    border: 1px solid #ff0000; background: #ffecec;
}

.noteBoxGray{
	margin: 10vw auto 5vw; padding: 2vw 3vw ; width: 100%;
    text-align: left; font-size: 3.5vw; 
    border-top: 3px dotted #838383; background: #ffecec;
}

.noteBox p { text-indent: -1em; margin: 0.1em 0 0.1em 1em; }
.noteBox p::before { content: '※'; }

.noteBoxGray p { text-indent: -1em; margin: 0.1em 0 0.1em 1em; }
.noteBoxGray p::before { content: '※'; }

.noteRedLine{ margin-top: 0.3vw; padding: 0 2vw; font-size: 3vw; color:#fff; background:#c1272d; }

/* ログインフォーム　エラー告知 --------------------*/
.cautionBox{
	margin:3vw auto; padding: 1.5vw 0; width: 100%;
	text-align: center; font-size: 3.5vw; line-height: 1.8; color: #c1272d;
	border: 1px solid #ffffff; background: #f4d5d6;
}

.cautionBoxRed{
	margin:3vw auto; padding: 1.5vw 0; width: 100%;
	text-align: center; font-size: 3.5vw; line-height: 1.8; color: #ffffff;
	border: 1px solid #ffffff; background: #c1272d;
}

.address { margin: 2vw auto 3vw; padding: 3vw; width: 90%; text-align: left; font-size: 3.5vw; line-height: 1.4;
	border: 1px solid #999; border-radius: 10px;
}

.box{ margin: 0.5em 0; padding: 2%; width: 100%; height: 30vh; text-align: left; background: #fff; border: 1px solid #999; overflow-y: scroll; }
/* .box{ margin: 0.5em 0; padding: 2%; width: 100%; height: 40vh; text-align: left; background: #fff; border: 1px solid #999; overflow-y: scroll; } */
.confirm { font-size: 3vw; }
.confirm ol { margin: 0 auto; padding-left: 0; width: 95%; counter-reset: item; list-style-type: none;}
.confirm li { margin: 0.7em 0; text-indent: -1.7em; padding-left: 1.3em; line-height: 1.4; }
.confirm li:before { counter-increment: item; content: counter(item) '.'; padding-right: .5em; font-weight: bold; }

.confirm_list p { text-indent: -1em;  margin: 0.1em 0 0.1em 1em; }
.confirm_list p:before { content: '・'; }

.content_section { position: relative; margin: 0 auto; padding: 0; width: 100%; text-align: center;}
ul.label_list { margin: 1em auto 0; padding: 0; font-size: 1.5em; line-height: 1.3; }
li.label_list_item { margin: 0 auto; text-align: left; cursor: default; }
li.label_list::after { display: block; content: ''; clear: both; }
.label_list_item label { position: relative; display: block; word-break: break-all; }
.demo1 label input[type="checkbox"] { position: absolute; top: 0; left: 0; opacity: 0; }
.content_section input[type="checkbox"] {
    margin: 0; padding: 0; background: none; border: none; border-radius: 0; outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.label_list_item label input[type="checkbox"] + span {
	display: inline-block; position: relative; padding: 0 0 0 45px; font-size: 4vw;
}
.demo1 label input[type="checkbox"] + span::before, .demo1 label input[type="checkbox"] + span::after {
    position: absolute; top: 0; left: 0; display: inline-block; content: ''; box-sizing: border-box;
}
.demo1 label input[type="checkbox"] + span::before {
        margin-top: 0.45em; z-index: 0; width: 30px; height: 30px; border: 1px solid #999; border-radius: 4px; background: #fff;
    }
.demo1 label input[type="checkbox"] + span::after {
    content: ""; display: block; position: absolute; top: 0; left: 4px; width: 23px; height: 30px; box-sizing: border-box;
}
.demo1 label input[type="checkbox"]:checked + span::after {
    transform: rotate(45deg); border-bottom: 5px solid #c1272d; border-right: 5px solid #c1272d;
}

@media screen and (min-width:769px) {
	.noteBox{ margin: 20px auto; padding: 0; font-size: 18px; }
	.noteBoxGray{ margin: 20px auto; padding: 0; font-size: 18px; }
	.noteBoxRed{ margin:20px auto; padding: 20px; font-size: 18px; }
	.noteRedLine{ margin-top: 5px; padding:  0 10px; font-size: 16px; }
	.cautionBox{ margin:15px auto; padding: 10px 0; font-size: 18px;}
	
	.address { margin: 20px auto 30px; padding: 10px 20px ; width: 100%; font-size: 18px; }
	
	.box{ margin: 10px 0;}
	.confirm { font-size: 18px; }
	
	.label_list_item label input[type="checkbox"] + span { font-size: 22px; }

}

/*================================================
 * STEP
================================================*/
.step { margin:8vw auto 3vw; width: 100%; height:auto; background:#fff5c8; display: flex; flex-wrap: wrap;}

.step1{ padding: 1vw 2vw; /*width: 30%;*/ font-weight: 800; background:#0068B6; font-size: 3.8vw; color: #fff; display: flex; align-items: center;}
.step2{ margin-right: auto; padding: 0.5vw 2vw; max-width: 70%; font-weight: 800; line-height: 1.3; display: flex; align-items: center; text-align: left;}
.step2sub{ margin-right: auto; padding: 0.5vw 2vw; max-width: 100%; font-weight: 800; line-height: 1.3; display: flex; align-items: center; text-align: left;}
.step3{ padding: 1.5vw 2vw 0 0; color:#c1272d;  display: flex; align-items: center; }
.stepSub{ padding: 0 2vw ; width: 100%; height: 8vw; font-weight: 500; color:#fff; display: flex; align-items: center; background: #0068b6; border-bottom:5px solid #fff;}
.stepSubTitle{ padding: 0 2vw ; width: 100%; height: 15vw; font-weight: 500; color:#fff; display: flex; align-items: center; background: #eb0863; border-bottom:5px solid #fff;}

@media screen and (min-width:769px) {
	.step { margin:30px auto 10px;}
	.step1{ padding: 5px 15px; font-size: 16px; }
	.step2{ margin-right: auto; padding: 5px 10px; font-size: 20px; }
	.step2sub{ margin-right: auto; padding: 5px 0 5px 5px; font-size: 20px; }
	.step3{ padding: 5px 10px 5px 0;  font-size: 16px;}
	.stepSub{ padding: 0 8px ; height: 50px; border-bottom:10px solid #fff;}
	.stepSubTitle{ padding: 0 2vw ; width: 100%; height: 5vw; font-weight: 500; color:#fff; display: flex; align-items: center; background: #eb0863; border-bottom:5px solid #fff;}
}

/*================================================
 *  教材選択
================================================*/
.material { margin:0 0 3vw; padding: 0; width:100%; display: flex; flex-wrap: wrap; justify-content: space-between; }

.material input { position: absolute; left: -9999px; }
.material input[type=checkbox] { display: none; border-bottom:8px solid #fff;}

.material label { 
	overflow: hidden; display: inline-block; position: relative;
	margin: 0 0 3vw ; padding: 0; width:48%; min-height: 130px; height:auto;
	border: 1px solid #999; border-radius: 8px; background: #eee; cursor: pointer;
}
.material label::before {
	content: ''; display: block;
	position: absolute; top: 2vw; left: 2vw; width: 5vw; height:5vw;
	border: 3px solid #fff; border-radius: 50%; background: #e6e6e6; box-shadow: 0 1px 3px 0 #666;
}

.projector_img {
	width:48%; min-height: 130px; height:auto;
}

.material input:checked + label { background-color: #ffe878; border: 3px solid #c1272d; }
.material input:checked + label::before { background-color: #c1272d; }

.material p,.material p.tp2,.material p.note{ text-align: left; line-height:1.3; }
.material p{ font-size: 2.9vw; padding:0 2vw 8vw 2vw; }
.material p.tp2{ font-size: 3.3vw; font-weight: 500; padding:0 2vw 1vw 2vw; }
.material p.note{ font-size: 2.3vw; padding:0 2vw 1vw 2vw; }

.material p.set_price {
	position: absolute; right:5px; bottom:5px; padding:0; margin: 0; width: 100%;
	text-align: right; font-family: Arial, Helvetica, "sans-serif"; font-size: 1em; font-weight: 700;
}

.material p.set_price::after{
	margin-left:5px; content: '円(税込)'; font-family: 'M PLUS Rounded 1c', sans-serif; font-size: 3vw;
}
@media screen and (min-width:769px) {
	.material { margin:0 ; }
	.material label {  margin: 0 0 15px 0; width:210px; min-height: 220px; }
	.material label::before { top: 10px; left: 10px; width: 20px; height:20px;}
	.material p{ padding:5px 5px 30px 5px; font-size: 14px;}
	.material p.set_price { font-size: 22px; }
	.material p.set_price::after{ font-size: 18px; }
	
	.material p,.material p.tp2{ font-size: 16px; }
	.material p{ padding:0 10px 40px 10px; }
	.material p.tp2{ padding:0 10px 5px 10px; }
	.material p.note{ font-size: 12px; padding:0 10px 5px;  }
}

/*================================================
 *  教材選択 写真なし
================================================*/
.material2 { margin:0 0 3vw; padding: 0; width:100%; display: flex; flex-direction: column; }

.material2 input { position: absolute; left: -9999px; }
.material2 input[type=checkbox] { display: none; }

.material2 label { 
	overflow: hidden; display: flex; align-items: center; position: relative;
	margin: 0 0 3vw ; padding: 0.7vw 0 0 7.5vw; width:100%; height:12vw;
	border: 1px solid #999; border-radius: 8px; background:#fff; cursor: pointer;
}
.material2 label::before {
	content: ''; display: block;
	position: absolute; top: 2.45vw; left: 1.5vw; width: 5vw; height:5vw;
	border: 3px solid #fff; border-radius: 50%; background: #e6e6e6; box-shadow: 0 1px 3px 0 #666;
}

.material2 input:checked + label { background-color: #ffe878; border: 3px solid #c1272d; }
.material2 input:checked + label::before { background-color: #c1272d; top:2vw; left:1vw }

.material2 p{ padding:0 0 0.6vw 2vw; text-align: left; font-size: 3.5vw; font-weight: 500; line-height:1.3; }
.material2 input:checked + label p {  padding:0 0 0.6vw 1.5vw; }


@media screen and (min-width:769px) {
	.material2 { margin:0 ; }
	.material2 label { margin: 0 0 15px 0; padding: 0 0 0 30px; height: 50px; }
	.material2 label::before { top: 10px; left: 7px; width: 20px; height:20px;}
	.material2 input:checked + label::before { top: 8px; left:5px; }
	.material2 p{ padding: 0 0 0 10px; font-size: 17px;}
	.material2 input:checked + label p { padding: 0 0 0 7px;}
}

/*================================================
 *  オプション
================================================*/
.optionBox,.optionBox2{ margin: 3vw auto; width: 48%; }
.optionBox2{ padding: 1vw 0; border: 1px solid #999; border-radius: 8px;  display:flex; flex-direction: column;}
.optionBox img,.optionBox2 img{padding: 4vw 7vw 1.5vw; }
.optionBox p,.optionBox2 p{ font-size: 3.3VW; font-weight: 500;}
.optionBox p.optionPrice,.optionBox2 p.optionPrice{ font-size: 6vw; font-weight: 900; font-family: Arial, Helvetica, "sans-serif"; color:#c1272d; }
.optionBox p.optionPrice::after,.optionBox2 p.optionPrice::after{ content: "円(税込)"; font-size: 50%; font-weight: 700; font-family: "M PLUS Rounded 1c", sans-serif; color:#543d22; }


.optionBox label{ 
	position: relative; padding: 1vw 0; width: 100%; display:flex; flex-direction: column;  
	border: 1px solid #999; border-radius: 8px; cursor: pointer;
}

.optionBox label::before {
  content: ''; display: block;
	position: absolute; top: 1.5vw; left: 1.5vw; width: 5vw; height:5vw;
	border: 3px solid #fff; border-radius: 50%; background: #e6e6e6; box-shadow: 0 1px 3px 0 #666;
}

.optionBox input[type=checkbox]:checked + label:before { background-color: #c1272d; } 
.optionBox input[type=checkbox]:checked + label { background-color: #ffe878; border: 3px solid #c1272d; } 

@media screen and (min-width:769px) {
	.optionBox,.optionBox2{ margin: 15px auto; }
	.optionBox img,.optionBox2 img{padding: 30px 45px 10px 45px; }
	.optionBox p,.optionBox2 p{ font-size: 17px; }
	.optionBox p.optionPrice,.optionBox2 p.optionPrice{ font-size: 30px; }
	.optionBox label{ padding: 10px 0; }
	.optionBox label::before { top: 15px; left: 15px; width: 30px; height:30px;}
}
/*================================================
 *  金額 
================================================*/
/* .total1 { } */
.total { margin: 0 0 10vw 0; padding: 1vw 0; width: 100%; font-size: 5vw; font-weight: 700; background: #fff5c8;}

.price{ font-size: 10vw; font-family: Arial, Helvetica, "sans-serif"; font-weight: 700; line-height: 1.3; color:#0068b6; }

.price::after { margin-left:3px; content: '円(税込)'; font-family: 'M PLUS Rounded 1c', sans-serif; font-size: 50%; color:#543d22; }

.price2{ font-size: 8vw; font-family: Arial, Helvetica, "sans-serif"; font-weight: 700; line-height: 1.3; }

.price2::after { margin-left:3px; content: '円(税込)'; font-family: 'M PLUS Rounded 1c', sans-serif; font-size: 50%; color:#543d22; }

.price3 { font-size: 5.33vw; font-family: Arial, Helvetica, "sans-serif"; font-weight: 700; line-height: 1.3; color:#0068b6; }

.price3::after { margin-left:3px; content: '円(税込)'; font-family: 'M PLUS Rounded 1c', sans-serif; font-size: 50%; color:#543d22; }

.total p{ margin: 0 auto 1vw; padding-left: 1em; width: 94%; font-size: 3vw; text-align: left;line-height: 1.3; text-indent: -1em; color:#c1272d;}

@media screen and (min-width:769px) {
	.total{ margin: 20px 0 30px 0; padding: 10px 0; font-size:26px;}
	.price{ font-size: 48px; }
	.price::after { font-size: 24px; }
	
	.price2{ font-size: 42px; }
	.price3{ font-size: 30px; }
	.total p{ margin: 0 auto; font-size: 16px;}
}

/*================================================
 *  支払回数選択
================================================*/
.payBox,.payBox2{ 
	margin: 2vw 0 3vw; padding: 2vw; width: 100%; text-align: left; font-size: 4vw; display: flex; flex-direction: column;
}
.payBox{ border: 1px solid #999; }
.payBox2{ border-bottom: 1px solid #999; }
.payLine{ margin: 0 0 2vw; width: 100%; display: flex; justify-content: space-between; align-items: stretch; }
.paySub,.paySub2,.paySub3,.paySubWfcTit{ padding: 0 2vw ; font-size: 3.2vw; background: #edf1f3; display: flex; justify-content: flex-end; align-items: center;}
.paySub{  width: 25%;}
.paySub2{ width: 36%;}
.paySub3{ width: 55%;}
.paySubWfcTit{ width: 40%;}
.payName,.payPrice,.payR{ padding: 0 ; width: 73%; }
.payName2,.payPrice2,.payNumber,.payRate{ padding: 0 ; width: 62%; }
.payName,.payName2{ font-size: 4.5vw; font-weight: 700; color:#0068b6;}
.payName3{ width: 44%; font-size: 4vw; font-weight: 700; color:#0068b6;}
.payNameWfctxt{ width: 50%; font-size: 4vw; font-weight: 700; color:#0068b6;}
.payPrice,.payPrice2,.payNumber,.payRate{ font-size: 5vw; font-family: Arial, Helvetica, "sans-serif"; font-weight: 700;}
.payPrice::after,.payPrice2::after{ content: "円"; font-size: 90%; }
.payNumber::after{ content: "回払い"; font-size: 90%; }
.payRate::after{ content: "%"; font-size: 90%; }
.payNumBox{ display: flex; flex-wrap: wrap; justify-content: space-between; width: 100%; }
.paySelect{ width: 50%;}
.paySelect select{ 
	margin: 1vw 0 0.5vw ; padding: 0 5.5vw 0 1.5vw; width: 100%; height: 8vw; font-size: 3.2vw; font-weight: 500;
	vertical-align: middle; border: 1px solid #999; border-radius: 5px; 
	background: #fff url(../images/select_arrow.png) right 50% no-repeat; background-size: 4.5vw, 100%; appearance: none;
}
.paySim{
	position: relative; margin: 1vw 0 0.5vw; padding: 0 4.5vw 0.2vw 1.5vw; width: 48.5%; height: 8vw;
	font-size: 3vw; line-height: 1.2; color: #c1272d; border: 1px solid #c1272d; border-radius: 5px;
	display: flex; align-items: center; cursor: pointer;
}
.paySim::after {
    position: absolute; content: ""; margin-top: -2vw; top: 50%; right: 1vw; width: 4vw; height: 4vw;
    background: url(../images/sim_blank.svg) top right no-repeat; background-size: contain;
}
.payDivision{ margin: 0 0 1vw 0 ; padding: 1vw ; display: flex; justify-content: space-between; }
.payFirst,.paySecond{ font-family: Arial, Helvetica, "sans-serif"; font-weight: 700; }
.payFirst::before,.payFirst::after,.paySecond::before,.paySecond::after { font-size: 75%; font-weight: 500; }
.paySecond{ text-align: right;}
.payFirst::before { content: '初回支払い額：'; }
.paySecond::before{ content: '2回目以降支払い額：'}
.payFirst::after,.paySecond::after { content: '円'; margin-left: 1vw; }
.payTotal {
    margin: 0; padding: 0 2vw; width: 100%; text-align: right;
    font-family: Arial, Helvetica, "sans-serif"; font-size: 6vw; font-weight: 700; color: #0068b6; background: #fff5c8;
}
.payTotal::before,.payTotal::after { font-size: 60%; color: #666; }
.payTotal::before { content: '合計金額'; margin-right: 1vw; }
.payTotal::after { content: '円'; margin-left: 1vw; }
.payBox p,.payBox2 p{ margin: 1vw 0 0; padding-left: 1em; text-indent: -1em; width: 100%; font-size: 3vw; line-height: 1.3; }
.payBox p::before,.payBox2 p::before{ content: "※"}

@media screen and (min-width:769px) {
	.payBox{ margin: 10px 0 15px; padding: 10px; }
	.payBox2{ margin: 10px 0 15px; padding: 10px 0; }
	.payLine{ margin: 0 0 10px; }
	.paySub,.paySub2,.paySub3,.paySubWfcTit{ padding: 5px 6px ; font-size: 16px; }
	.paySub{ width: 22%;}
	.paySub2{ width: 35%;}
	.paySub3{ width: 54%;}
	.paySubWfcTit{ width: 40%;}
	.payName,.payPrice,.payR{ width: 77%;}
	.payR{ font-size: 18px;}
	.payName2,.payPrice2,.payNumber,.payRate{ width: 63%; }
	.payName,.payName2{ font-size: 22px; }
	.payName3{ width: 45%; font-size: 20px;}
	.payNameWfctxt{ width: 50%; font-size: 20px;}
	.payPrice,.payPrice2,.payNumber,.payRate{ font-size: 24px; }
	.paySelect{ width: 53%; display: flex}
	.paySelect select{ margin: 0 ; padding: 0 20px 0 7px; height: 36px; font-size: 17px; background-size: 22px, 100%; }
	.paySim{ margin: 0; padding: 3px 0 3px 7px; height: 36px;  width: 46%; font-size: 14px; }
	.paySim::after { margin-top: -7.5px; right: 5px; width: 17px; height: 17px; }
	.payDivision{ margin: 5px 0 ; padding: 5px; font-size: 18px; }
	.payFirst::after,.paySecond::after { margin-left: 5px; }
	.payTotal { padding: 0 10px;  font-size: 32px; }
	.payTotal::before { margin-right: 5px; }
	.payTotal::after { margin-left: 5px; }
	.payBox p,.payBox2 p{ margin: 5px 0 0; font-size: 14px!important; }
}

/*================================================
 *  モーダルウィンドウ
 ================================================*/
.modal{
	display: none;
	position: fixed; top:0; left: 0; right: 0; bottom: 0;
	background-color: rgba(0, 0, 0, .85);
	overflow: hidden; overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	z-index: 1000;
}

.modalBox{ display: flex; flex-direction:column; justify-content: center; align-items: center; width: 100%; height:100%; }

.modalContainer{ margin: 5vw 5vw 0; padding: 0; height: 90svh; text-align: left;  background:#fff; overflow: hidden; }
.modalWrap{ position: relative; padding: 3vw 3vw 0; height:100%; }
.modalInner{ padding-bottom: 12vw; width: 100%; height: 100%; overflow-y: scroll; }
.modalTitle{ }
.modalName{ margin: 1vw 0; padding: 1vw 2vw; width: 100%; font-size: 4.5vw; font-weight: 500; color: #0068b6; background: #fff5c8;}
.modalBottom{ position: absolute; bottom:0; left:0; width: 100%; height: 12vw; display: flex; justify-content: center; align-items: center; background:#fff;}

.simulation{ margin: 2vw 0 ; border-bottom: 1px solid #ccc;}
.simuLine{ margin-bottom: 1vw; display: flex; justify-content: space-between; align-items: stretch; }
.simuSub,.simuSubB{ margin: 0 0 1vw; padding: 1vw 2vw; width: 42%; text-align: right; font-size: 3.5vw; background: #edf1f3; }
.simuSubB{ color: #0068b6; display: flex; justify-content: flex-end; align-items: center; }
.simu,.simuB{ width: 56%; font-size: 5vw;}
.simu{ font-family: Arial, Helvetica, "sans-serif"; font-weight: 700; }
.simuB{ padding: 2vw 0; font-size: 4.5vw; font-weight: 500; line-height: 4vw; color: #0068b6;}
.simuPeriod{ font-size: 3vw; color: #543d22;}
.simuYen,.simuRate{ font-weight: 700;}
.simuYen::after,.simuRate::after{ margin-left: 2vw; font-weight: 500; }
.simuYen::after{ content: "円"; }
.simuRate::after{ content: "％"; }

a.modalClose{ 
	position: relative; width: 50%; height: 8vw; font-size: 4vw; font-weight: 500; 
	border-radius: 8px; color: #fff; background: #c1272d;  text-decoration: none;
	display: flex; justify-content: center; align-items: center;
}
a.modalClose:visited{ color: #fff; }

@media screen and (min-width:769px) {
	.modalContainer{ margin: 20px auto; padding: 20px 20px 0; width: 600px; max-height: calc(100vh - 60px); border-bottom: 20px solid #fff;}
	.modalWrap{ padding:0; }
	.modalInner{ padding-bottom: 60px; }
	.modalName{ margin: 5px 0; padding: 5px 10px; font-size: 24px;}
	.modalBottom{ bottom:0; left:50%; transform: translateX(-50%); padding-top:20px; width: 600px; height: 60px; }
	.simulation{ margin: 10px 0 ; }
	.simuSub,.simuSubB{ margin: 0 0 5px; padding: 5px 10px; width: 29%; font-size: 16px; }
	.simu,.simuB{ width: 70%; font-size: 26px;}
	.simuB{ padding: 10px 0; font-size: 24px; line-height: 1;}
	.simuPeriod{ font-size: 16px; }
	.simuYen::after,.simuRate::after{ margin-left: 10px; }
	a.modalClose{ height: 40px; font-size: 22px; }
}
/*================================================
 *  よくある質問
 ================================================*/
.FAQ{ margin: 0 0 8vw 0;}
.details{ margin: 1vw 0 3vw; padding: 1.5vw 0 1.5vw 3vw; text-align: left; background:#fee2ec; cursor: pointer;}
.summary{ display: block; list-style: none; position: relative; padding:0 7vw 0 3vw; font-size: 3.5vw; font-weight: 700; }
.summary::-webkit-details-marker { display: none; }
.summary::before{ position: absolute; left: -1vw; content: 'Q'; font-size: 3.2vw; color: #0068b6; }
.details .summary .ico { 
	position: absolute; top: 0; right: 1.5vw; bottom: 0; display: block; margin: auto; width: 4vw; height: 3vw; background: #999;
    clip-path: polygon(100% 13%, 50% 100%, 0 13%, 8% 0, 50% 73%, 92% 0);
}
.details[open] .summary .ico { transform: rotate(180deg); }

.answer{ margin: 2vw 0; padding: 1vw 3vw; width: 88vw; background:#fff; font-size: 3.5vw; }
.answerInner{ position: relative; padding-left: 1em; }
.answerInner::before{ position: absolute; left: -1vw; line-break: strict; content: 'A'; font-size: 3.2vw; font-weight: 700; color: #c1272d; }
.answerInner ul { list-style: none;}
.answerInner ul li { position: relative; padding: 0 0 0 1.2em;}
.answerInner ul li::before { content: '※'; position: absolute; top: 0; left: 0;}

.faqCategory{font-size: 4vw;}

.answerInner p { text-indent: -1em; margin: 0.1em 0 0.1em 1em; }
.answerInner p:before { content: '・'; }

.lead {font-size: 3.5vw; text-align: left; }
.lead_detail { margin: 2vw 0; padding: 1.5vw 0;  border-top: 1px dashed  #543d22; border-bottom: 1px dashed  #543d22;}

.newitem { width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between;}
.newitem_img { width:27%; height:auto; }
.newitem_name p {font-size: 0.7em; margin-bottom: 0.7em;}

@media screen and (min-width:769px) {
	.FAQ{ margin: 5px 0 30px 0;}
	.details{ margin: 5px 0 15px; padding: 5px 0 5px 15px; }
	.summary{ padding: 0 30px 0 20px; font-size: 18px; }
	.summary::before{ left: -6px; font-size: 20px; }
	.details .summary .ico { right: 7px; width: 25px; height: 15px; }
	.answer{ margin: 10px 0; padding: 5px 15px; width: 97%; font-size: 18px; }
	.answerInner::before{ left: -6px; font-size: 20px; }
	.faqCategory{font-size: 22px;}
	.lead{font-size: 16px;}
	.lead_detail { margin: 12px 0 ; padding: 10px 0;}
}


/*================================================
 * キャンペーン告知
================================================*/
.campaignImgBox{ margin: 5vw auto 0; width: 100%; }
.addition_banner { width: 100%; height: auto; }
.campaignImgBox .noteBox{ margin-top: 0;}
.campaignPrice{ margin:3vw 0 5vw 0; padding: 1vw 1.5vw 1vw 1vw; width:100%; font-size:4vw; font-weight:700; background: #fff; }

@media screen and (min-width:769px) {
	.campaignImgBox{ margin: 30px auto 0; width: 100%; }
	.campaignPrice{ margin:10px 0 30px 0; padding: 10px 15px 10px 10px; font-size:20px; }
}

/*================================================
 * キャンペーン選択肢
================================================*/
.checkedBox{ margin-top: 4vw; padding-left: 3vw; text-align: left; width: 100%; background: #fff3d2; border: 2px solid #ebbb38; border-radius: 8px;}

.checkedBox label.check{ width: 100%; font-weight: 700; display: flex; align-items: center;}

.checkedBox input[type=checkbox] { display:none; } /* to hide the checkbox itself */
.checkedBox input[type=checkbox] + label:before {
  font-family: FontAwesome; display: inline-block;
}

.checkedBox input[type=checkbox] + label:before { content: "\f096"; font-size: 6vw; } /* unchecked icon */
.checkedBox input[type=checkbox] + label:before { letter-spacing: 10px; } /* space between checkbox and label */

.checkedBox input[type=checkbox]:checked + label:before { content: "\f046"; color:#c1272d; } /* checked icon */
.checkedBox input[type=checkbox]:checked + label:before { letter-spacing: 5px; } /* allow space for check mark */


@media screen and (min-width:769px) {
	.checkedBox{ margin-top: 15px; padding: 0 10px ; }
	.checkedBox input[type=checkbox] + label:before { content: "\f096"; font-size: 24px; } 
	.checkedBox input[type=checkbox] + label{font-size: 19px;}
}

.selectRadio{ margin: 0 auto 10px; }
.radioA,.radioB{
	position: relative; margin: 4vw 0 0; padding: 1.5vw 1.5vw 1.5vw 12vw; width: 100%; height: auto;
    display: flex; flex-wrap: wrap; align-items: center; overflow: auto; text-align: left; cursor: pointer;
    font-size: 3.9vw; font-weight: 700; line-height: 1.1; border-radius: 8px;
}
.radioA{ border:2px solid #ff7bac; background:#fff2f7; }
.radioB{ border:2px solid #0068b6; background:#dff3f5; }


.radioA::before,.radioB::before{
	position: absolute; top: 50%; left: 3vw; margin-top: -3.1vw; width: 6vw; height: 6vw;
    display: block; border-radius: 50%; background-color: #c00; content: ''; opacity: 0;
}
.radioA::after,.radioB::after{
	position: absolute; top: 50%; left: 2vw; margin-top: -4.17vw; width: 6.25vw; height: 6.25vw;
    display: block; border: 4px solid #fff; border-radius: 50%; background: #e6e6e6; content: ''; box-shadow: 0 1px 3px 0 #666;
}
input[type=radio]:checked + .radioA:before, input[type=radio]:checked + .radioB:before { opacity: 1; z-index: 3;}

.childElement { width: 100%; font-weight: 700; line-height: 1.3; }

.campaignSelectPrice{ margin: 2vw auto 1.5vw; padding: 1vw 0; width: 100%; display: flex; align-items: baseline; border-top: dotted; }
.campaignSelectPrice p{ font-size: 3.2vw; font-weight: 700;}
.campaignSelectPrice p.campaignP { margin: 0 1vw 0 auto; font-size: 8vw; font-family: Arial, Helvetica, "sans-serif"; color:#c1272d; }

.setName{ margin: 5px 0 0; display: flex; height: 24px; font-size: 3.5vw;}
.setName img{ margin: 0 2px; width: 24px; height: 24px; }
.setName::before{ content: "教材名："}

@media screen and (min-width:769px) {
	.radioA,.radioB{ margin: 15px 0 0; padding: 10px 5px 10px 55px; font-size: 19px; }
	.radioA::before,.radioB::before{ left: 14px; margin-top: -24px; width: 28px; height: 28px;}
	.radioA::after,.radioB::after{ left: 10px; margin-top: -28px; width: 28px; height: 28px;}

	.campaignSelectPrice{ margin: 5px auto 5px; padding: 5px 0; }
	.campaignSelectPrice p{ font-size: 18px; }
	.campaignSelectPrice p.campaignP { margin: 0 auto; font-size: 30px; }
	
	.setName{ font-size: 18px;}
}
/*================================================
 *  レインボーポイントとは
 ================================================*/
.detailsRP{ margin: 1vw 0 3vw; padding: 1vw ; text-align: left; background:#d4d4d4;}
.summaryRP{ display: block; list-style: none; position: relative; padding:1vw 7vw 1vw 2vw; font-size: 3vw; font-weight: 700; }
.summaryRP::-webkit-details-marker { display: none; }
.detailsRP .summaryRP .ico { 
	position: absolute; top: 0; right: 1.5vw; bottom: 0; display: block; margin: auto; width: 4vw; height: 3vw; background: #999;
    clip-path: polygon(100% 13%, 50% 100%, 0 13%, 8% 0, 50% 73%, 92% 0);
}
.detailsRP[open] .summaryRP .ico { transform: rotate(180deg); }

.answerRP{ margin: 0 auto; padding: 1vw; width: 100%; background:#fff; font-size: 3vw; }
.answerInnerRP{ position: relative; padding: 1vw; line-break: strict;}

@media screen and (min-width:769px) {
	.detailsRP{ margin: 5px 10px 15px; padding: 5px 0 ; }
	.summaryRP{ padding: 0 30px 0 10px; font-size: 18px; }
	.detailsRP .summaryRP .ico { right: 7px; width: 25px; height: 15px; }
	.answerRP{ margin: 10px auto 5px; padding: 5px; width: 98%; font-size: 14px; }
	.answerInnerRP{ padding: 0;}
}

/*================================================
 *  お客様情報
================================================*/
.info { margin: 30px 0 0; padding: 0; width: 100%; }

.sub { 
	margin: 0 0 0.3em 0; padding: 1.5% 2% 1%; min-height: 30px;
	font-size: 1em; font-weight: 500; color: #0068b6; background: #fff5c8;
    }

.info table { margin: 0.5em 0 0 0; width: 100%; font-size: 0.7em; }
.info th {
	padding: 10px; width: 26%; ertical-align: middle; text-align: right;
    font-size: 1.142em; font-weight: 500; background: #edf1f3; border-bottom: 8px solid #fff;
    }
.info td {
	width: 74%; word-break: break-all; display: table-cell; vertical-align: middle; padding: 10px;
    font-size: 1.142em; font-weight: 700; letter-spacing: 0.1em; text-align: left;
    }
.info p { margin: 5px 0; font-weight: 500; line-height: 1.3; }

input[type="email"] {
    vertical-align: middle; height: 40px; margin: 0; padding: 5px;
    font-size: 1em; font-weight: 500; letter-spacing: 0.05em; border-radius: 5px; border: 1px solid #999;
    -webkit-appearance: none;
}

.entry-field { width: 100%; }
.memo { margin: 3vw 0 0 0; font-size: 0.935em; color: #c1272d; letter-spacing: 0; }
.memo ol{ margin: 0 auto; padding-left: 0.5em; width: 96%; counter-reset: item; list-style:disc;}
.memo li { margin: 0.3em 0; }
.membername::after { content: '様'; margin-left: 1em; }

.memo2 { margin: 0; width: 100%; text-align: right; font-size: 0.7em; }

@media screen and (min-width:769px) {
	.memo { margin: 15px 0 0 0; }
}
/*================================================
 *  ボックス
================================================*/
.box1column{ margin: 0 auto 8vw; padding: 0; width: 100%; display: flex; flex-direction: column;}
.box1column p{ 
	margin: 1.5vw 0; padding:1vw 2vw; width: 100%; border-radius: 5px; overflow: hidden; border:1px solid #999; 
	text-align: left; font-size: 3.5vw; font-weight: 500; line-height: 1.3; background:#fff;
}

.box2column{ margin: 0 auto 8vw; padding: 0; width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; }
.column2A,.column2B{ margin: 2vw 0; padding-bottom: 1.5vw; width: 48%; border-radius: 5px; overflow: hidden; border:1px solid #999; }

.column2A{ background:#dff3f5; }
.column2B{ background:#fff2f7; }
.column2A p,.column2B p{ padding: 0 1.5vw; width: 100%; text-align: left; font-size: 3.5vw; font-weight: 500; line-height: 1.3;}
.columnFull{ width: 100%; margin: 0; text-align: left; font-size: 3vw; line-height: 1.4; }

.bottom{ padding: 2vw 0 3vw 0;}

@media screen and (min-width:769px) {
                                .box1column{ margin: 0 auto 20px; }
                                .box1column p{ margin: 5px 0; padding:5px 10px; font-size: 18px; }
	.box2column{ margin: 10px auto 20px;}
	.column2A,.column2B{ margin: 5px 0; padding-bottom: 10px;  }
	.column2A p,.column2B p{ padding: 0 10px; font-size: 17px; }
	.columnFull{font-size: 16px; } 
	.bottom{ padding: 15px 0;}
}

/*================================================
 *  ボタン
================================================*/
button{ cursor: pointer; font-family: 'M PLUS Rounded 1c', sans-serif; }

/* ログインボタン
------------------------------------------ */
.btnLOGIN{
	position: relative; margin:0 auto 10vw; width: 80vw; height: 16vw; font-size: 6vw; font-weight: 500; 
	border:none; border-radius: 8px; color: #fff; background: #c1272d;
	}
.btnLOGIN::after{
	content: ""; display: inline-block; margin: 1vw 0 0 2vw; width: 8vw; height: 8vw; background: url(../images/btn_arrow.png)no-repeat; background-size: contain; vertical-align: middle;
}

.btnOption,.btnNext{
	position: relative; margin: 5vw auto 0; width: 100%; height: 16vw; font-size: 4.8vw; font-weight: 500; 
	border:none; border-radius: 8px; color: #fff; background: #c1272d;
	}
.btnOption::after,.btnNext::after{
	content: ""; display: inline-block; margin: 0 0 0 2vw; width: 8vw; height: 8vw; background: url("../images/btn_arrow8.png")no-repeat; background-size: contain; vertical-align: middle;
}

.btnBack{
	position: relative; margin: 5vw 40% 0 0; padding-right: 3%; width: 60%; height: 12vw; font-size: 4vw; font-weight: 500; 
	border:1px solid #c1272d; border-radius: 8px; color: #c1272d; background:#fff;
	}
.btnBack::before{
	content: ""; display: inline-block; margin: 0 0 0 2vw; width: 6vw; height: 6vw; background: url(../images/btn_arrow2.png)no-repeat; background-size: contain; vertical-align: middle;
}


/* 振分けボタン  --------------------*/
.modalBtn{ 
	margin:3vw 0; padding: 0 15% 0 3%; width:96%; height:25vw;
	text-align: center; font-size: 5vw; font-weight: 800;
	border-radius: 15px; border: none; background: #f7b21e url("../images/btn_arrow5.png") no-repeat right center; background-size: 20%;
}

/* 選択ボタン  --------------------*/
.btnBox{ margin: 0 auto 8vw; display: flex; flex-direction: column;}
.branch{ 
	margin: 0 auto 3vw; padding: 4vw 9vw 4vw 0; width: 90vw; 
	font-size: 4vw; line-height: 1.3; text-decoration: none;
	background: #f7b21e url("../images/btn_arrow5.png") no-repeat right center; background-size: 9vw 6vw; border-radius: 8px; cursor: pointer;
}

/* アンカーリンク  ----------------*/
.anchorLink{ margin: 3vw 0; width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; }
.anchor{ 
	margin: 1vw 0; padding: 0 6.2vw 0 1.7vw; width: 46vw; height: 12vw; display: flex; align-items: center; text-align: left; font-size: 3.5vw; line-height: 1.3;
	border-radius: 1.5vw; background:#0068b6 url("../images/btn_arrow7.png") no-repeat; background-size: auto 40%; background-position: 97% 50%;
}
.anchorLink a{ text-decoration: none; color:#fff;}

@media screen and (min-width:769px) {
	.btnLOGIN{ margin: 30px auto; width: 80%; height: 80px; font-size: 30px; }
	.btnLOGIN:after{ margin: 0 0 0 10px; width: 34px; height: 34px;}
	
	.modalBtn{ margin:20px 0; padding: 0 90px 0 0; width:670px; height:140px; font-size: 30px; border-radius: 15px; }

	.btnBox{ margin: 0 auto 30px; }
	.branch{ margin: 0 auto 15px; padding: 10px 40px 10px 0; width: 96%; font-size: 18px; background-size: 45px 30px; }
	
	.anchorLink{ margin: 20px 0; }
	.anchor{ margin: 5px 0; padding: 0 30px 0 10px; width: 215px; height: 60px; font-size: 16px; border-radius: 8px; }
	
	.btnOption,.btnNext{ margin: 20px auto 0; height: 70px; font-size: 22px; }
	.btnOption::after,.btnNext::after{ margin: 0 0 0 15px; width: 30px; height: 30px;}
	
	.btnBack{ margin: 20px 40% 0 0; width: 60%; height: 60px; font-size: 22px;}
	.btnBack::before{ margin: 0 0 0 15px; width: 25px; height: 25px;}

}

/*================================================
 *  もっと見る
================================================*/

#readMoreBlock { display: flex; flex-wrap: wrap; width: 100%; margin: 0 auto 5vw; padding: 0; }
.readMoreInner { width: 100%; margin: 0 auto; padding: 0; box-sizing: border-box; }
.readMoreContainer { position: relative; height: auto; max-height: 450px; overflow: hidden; transition: max-height 0.3s; }
.readMoreContainer::after {
	content: ""; position: absolute; top: 0; left: 0; z-index: 0; display: block; width: 100%; height: 100%; transition: 1s;
	background: linear-gradient(to bottom, transparent 40%, #ffffff 100%); pointer-events: none;
}
.readMoreContainer.show:after { z-index: -1; opacity: 0;
}
.readMoreBtn { 
	display: block; margin: 3vw auto;  padding: 3vw 10vw; font-size: 4vw; color: #0068b6;
	background: #edf1f3; cursor: pointer; border:1px solid #0068b6; border-radius: 8px;
}
/* 完了画面用 */
.loginBackBtn { 
	display: block; margin: 3vw auto;  padding: 3vw 10vw; font-size: 4vw; color: #0068b6;
	background: #edf1f3; cursor: pointer; border:1px solid #0068b6; border-radius: 8px;
}
@media screen and (min-width:769px) {
	#readMoreBlock { margin: 0 auto 50px;  }
	.readMoreBtn { margin: 15px auto; padding: 15px 30px; font-size: 20px; }
	.loginBackBtn { margin: 15px auto; padding: 15px 30px; font-size: 20px; }
}
/*================================================
 *  フリーコール
================================================*/

.freecall{ margin: 0 auto 0; width: 94%; }

@media screen and (min-width:769px) {
	.freecall{ margin: 30px auto 0; }

}
/*================================================
 *  背景
 ================================================*/
.BGpink{ padding:2vw 0 5vw; background:#fee2ec url(../images/dott_pink.png) top center; }
.BGyellow{ padding:2vw 0 1.5em 0; background:#fff3d2 url(../images/dott_yellow.png) top center; }
.BGblue{ padding:2vw 0 5vw; background:#dff3f5 url(../images/dott_blue.png) top center; }
.BGred{background: #c1272d;}
@media screen and (min-width:769px) {
	.BGpink,.BGblue{ padding: 10px 0 20px; }
	.BGyellow{ padding:15px 0; }
}

/*================================================
 *  キャンペーントップ
 ================================================*/
 .CPdate{ padding: 1.5vw 0; text-align: center; font-size: 3.7vw; font-weight: 800; color:#fff; background:#00b9ef; }
 .CPnote{ padding: 1.5vw 0; text-align: center; font-size: 2.35vw; background:#ffe473; }
 
 .CPredNote,.CPredNote2{ margin: 3vw auto 0; text-align: left; font-size: 3.5vw; border: 1px solid #c1272d;  background: #ffecec; }
 .CPredNote{ padding: 3vw 4vw; width: 94%; }
 .CPredNote2{ padding: 6vw 7vw; width: 92vw; color:#c1272d; }
 .CPredNote p{ padding: 1.5vw 0; }
 
 .CPwhiteNote{ margin: 10vw auto; padding: 6vw 7vw; width: 92vw; text-align: left; font-size: 3.5vw; background: #fff; }
 
 hr { height: 1px; background-color: #000; border: none; color: #000;}
 .CPsub{
	 margin: 7vw 0 1vw; padding-bottom: 0.5vw; width: 100%; font-size: 4vw; font-weight: 800; color: #0068b6; border-bottom:1px solid #000;
 }
 .CPnum{
	 margin:0 1vw; width: 8vw; height: 8vw; font-size: 7vw; font-weight: 800; color:#fff;
	 display: flex; align-items: center; justify-content: center; background: #0067b5; border-radius: 1vw; 
 }
 .CPlimit{ 
	 margin: 0 auto 2vw; width: 80vw; height: 8vw; font-size: 4.5vw; font-weight: 800; line-height: 1; color:#fff;
	 display: flex; justify-content: center; align-items: center; background:#98d25b; border-radius: 4vw;
 }
 .CPmarker{ padding: 0 3vw; background: linear-gradient(transparent 60%, #ffd638 40%); }
 
 .CPread1{ margin: 0 auto; padding: 3vw 0 0; width: 96%; text-align: left; font-size: 4vw; line-height: 1.8;}
 .CPread2{ margin: 0 auto; padding: 5vw 0; width: 100%; text-align: center; font-size: 5.5vw; }
 .CPread3{ margin: -3vw auto 0; padding: 0; width: 96%; text-align: left; font-size: 4vw; line-height: 1.8;}
 
 /*  コーナー見出し  */
 .CPtitleYellow,.CPtitleGreen,.CPtitlePink{
	 margin: 0; padding: 0 0 0 1vw; width: 100%; height:19vw; display: flex; align-items: center;
 }
 .CPtitleYellow p,.CPtitleGreen p,.CPtitlePink p{ text-align: left; font-size: 5.5vw; font-weight: 800; line-height: 1.3; }
 .CPtitleYellow{ background:#ffd638; }
 .CPtitleGreen{ background:#9fda7e; }
 .CPtitlePink{ background:#ffa0d0; }
 
 /*  背景色別  */
 .blockYellow,.blockGreen,.blockPink{ padding-bottom: 14.5vw; }
 .blockYellow{ background:#fff2d1; }
 .blockGreen{ background:#ebf3d3; }
 .blockPink{ background:#fff2f7; }
 
 /*  アンカー  */
 .anchorBox{ padding: 0 4vw; background:url("../images/top/back.png")no-repeat; background-size: 100% auto;}
 .anchorYellow,.anchorGreen,.anchorPink{ margin: 3vw auto 0; padding: 2px;}
 .anchorYellow{ background:#ffd638; }
 .anchorGreen{ background:#9fda7e; }
 .anchorPink{ background:#ffa0d0; }
 .anchorTitle{ width: 100%; height: 14vw; text-align: left; font-size: 4.5vw; line-height: 1.1; display: flex; align-items: center; }
 .anchorTitle p{ font-weight: 800;}
 
 .anchorTxtYellow,.anchorTxtGreen,.anchorTxtPink{ padding: 1vw 1.7vw; text-align: left; font-size: 3.5vw; }
 .anchorTxtYellow{ background:#fff2d1; }
 .anchorTxtGreen{ background:#ebf3d3; }
 .anchorTxtPink{ background:#fff2f7; }
 .anchorBtn{ padding: 1vw; width: 100%; text-align: center;}
 
 /* モーダル */
 .modal2 { display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; background: rgba(0,0,0,0.85); z-index: 1000; }
 
 /* モーダル内容 */
 .modal-content { margin: 50% auto; max-width: 900px; width: 96%; position: relative; }
 
 /* ✗ボタン */
 .close { position: absolute; top: -10vw; right: 0; color: #fff; font-size: 8vw; cursor: pointer; }
 
 /* iframeをレスポンシブに */
 .video-wrapper { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; }
 .video-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
 
 /* タブレット */
 .tabletBox{ position: relative; margin: 0 0 10vw; width: 100vw; height: 154vw;}
 .tablet{ position: absolute; top:0; left:0; width: 100%;}
 
 /* スライド */
 .slideBox1{ position: absolute; top:49vw; left:15vw; width: 70%; height: 42vw; overflow: hidden;}
 .slideBox2{ position: absolute; top:49vw; left:0; width: 100%; height: 42vw; overflow: hidden;}
 .slide,.note { width:100%; margin:auto;}
 .slide{ height: 100%; background:#64a4c6;}
 
 .slide img,.note img  { display:block; position:absolute; width:inherit; height:auto;}
 .slide img { left:100%; animation:slideAnime1 15s ease infinite;}
 .note img { opacity:0; animation:slideAnime2 15s ease infinite;}
  
 .slide img:nth-of-type(1),.note img:nth-of-type(1) { animation-delay: 0s }
 .slide img:nth-of-type(2),.note img:nth-of-type(2) { animation-delay: 3s }
 .slide img:nth-of-type(3),.note img:nth-of-type(3) { animation-delay: 6s }
 .slide img:nth-of-type(4),.note img:nth-of-type(4) { animation-delay: 9s }
 .slide img:nth-of-type(5),.note img:nth-of-type(5) { animation-delay: 12s }
  
 @keyframes slideAnime1{
	0% { left: 100% }
	2% { left: 0 }
   20% { left: 0 }
   22% { left: -100% }
  100% { left: -100% }
 }
 @keyframes slideAnime2{
	0% { opacity: 0 }
	2% { opacity: 1 }
   20% { opacity: 1 }
   22% { opacity: 0 }
  100% { opacity: 0 }
 }
 
 /*  機能一覧  */
 .iconBox{ margin: 3vw auto; width: 92vw; display: flex; flex-wrap: wrap; justify-content: space-between;}
 .iconBox p{ width: 29.5vw; }
 
 /*  教材一覧  */
 .MTsummary{
	 position: relative;
	 margin-top: 10vw;  width: 100%; height: 14vw; font-size: 5.5vw; font-weight: 800; background: #9fda7e;
	 display: flex; justify-content: center; align-items: center; list-style: none;
 }
 summary::-webkit-details-marker { display:none; }
 .MTlist .MTsummary .icoBox {
	 position: absolute; top: 0; right: 3vw; bottom: 0; margin: auto; width: 8vw; height: 8vw; 
	 display: flex; justify-content: center; align-items: center; background:#0067b5; border-radius: 1vw;
 }
 .MTlist .MTsummary .ico { width: 4vw; height: 3vw; background: #fff; clip-path: polygon(100% 13%, 50% 100%, 0 13%, 8% 0, 50% 73%, 92% 0);}
 .MTlist[open] .MTsummary .ico{ transform: rotate(180deg); }
 
 .MTnote{ margin: 1vw auto; width: 94vw; text-align: right; font-size: 3vw; }
 .MTribbon{ margin: 3vw auto 1vw; width: 68.75vw; }
 .MT{ margin: 0 auto 12vw; width: 94vw; display: flex; justify-content: space-around; align-items: stretch;}
 .MTdetail{ padding: 0 0 3vw; width: 44vw; background:#fff; border-radius: 2vw;}
 .MTtitleP,.MTtitleG,.MTtitleO,.MTtitleB,.MTtitleR{ margin: 3vw 0 1.5vw; font-size: 3.3vw; font-weight: 700; line-height: 1.3;}
 .MTtitleP{ color:#ff7bac;}
 .MTtitleG{ color:#22b8a5;}
 .MTtitleO{ color:#f18e00;}
 .MTtitleB{ color:#1aabe4;}
 .MTtitleR{ color:#ff791c;}
 .MTtxt{ margin: 3vw auto; width: 40vw; text-align: left; font-size: 3.3vw; }
 
 .btnTOP1,.btnTOP2{ 
	 margin: 0 auto; padding-right: 5vw; width: 34vw; height: 7vw; 
	 font-size: 3.3vw; line-height: 1; font-weight: 700; color:#fff; text-decoration: none; border: none;
	 border-radius: 1vw;
 }
 .btnTOP1{ background: #5ccfca url("../images/top/arrow1.svg") no-repeat; background-size: 3.75vw; background-position: 95% 50%; }
 .btnTOP2{ background: #5ccfca url("../images/top/arrow2.svg") no-repeat; background-size: 3.75vw; background-position: 95% 50%; }
 /*  フリーコール  */
 .CPfreecall{ margin: 5vw auto; width: 86%; font-size: 0; border: 1px solid #b3b3b3; border-radius: 3vw; overflow: hidden;}
 
 /*  フッター  */
 .CPcopy{ padding: 3.5vw 3vw 2vw; background:#bae3f9; }
 .CPfoot{ padding: 3vw 0 20vw; background: #f1f1f1; }
 
 @media screen and (min-width:769px) {
	 .CPdate{ padding: 10px 0; font-size: 18px; }
	 .CPnote{ padding: 10px 0; font-size: 11.5px; }
 
	 .CPredNote,.CPredNote2{ margin: 15px auto 0; font-size: 16px; }
	 .CPredNote{ padding: 30px 20px; width: 94%; }
	 .CPredNote2{ padding: 30px 20px; width: 92%; }
	 .CPredNote p{ padding: 5px 0; }
 
	 .CPwhiteNote{ margin: 46px auto; padding: 40px 20px; width: 92%; font-size: 16px; }
 
	 .CPsub{ margin: 30px 0 1vw; padding-bottom: 5px; font-size: 20px; }
	 .CPnum{ margin:0 5px; width: 40px; height: 40px; font-size: 34px; border-radius: 5px; }
	 .CPlimit{ margin: 0 auto 20px; width: 360px; height: 40px; font-size: 22px; border-radius: 20px;}
	 .CPmarker{ padding: 0 15px; }
 
	 .CPread1{ padding: 10px 0 0; font-size: 20px; }
	 .CPread2{ padding: 20px 0; font-size: 26px; }
	 .CPread3{ margin: -20px auto 0; font-size: 20px; }
 
	 .CPtitleYellow,.CPtitleGreen,.CPtitlePink{ padding: 0 0 0 5px; height:90px; }
	 .CPtitleYellow p,.CPtitleGreen p,.CPtitlePink p{ font-size: 25px; }
	 
	 .blockYellow,.blockGreen,.blockPink{ padding-bottom: 70px; }
	 
	 .anchorBox{ padding: 0 4%; }
	 .anchorYellow,.anchorGreen,.anchorPink{ margin: 16px auto 0; }
	 .anchorTitle{ height: 70px; font-size: 20px; }	
	 .anchorTxtYellow,.anchorTxtGreen,.anchorTxtPink{ padding: 10px 18px 5px; font-size: 16px; }
	 .anchorBtn{ padding: 10px; }
	 
	 .tabletBox{ margin: 0 0 70px; width: 480px; height: 740px;}
 
	 .modal-content { margin: 20% auto 0; }
	 .close { top: -120px; font-size: 100px; }
	 
	 .slideBox1{ top:236px; left:15%; width: 70%; height: 202px; }
	 .slideBox2{ top:236px; width: 100%; height: 202px; }
	 
	 .iconBox{ margin: 10px auto; width: 92%; }
	 .iconBox p{ width: 142px; }
	 
	 .MTsummary{ margin-top: 50px; height: 90px; font-size: 25px; }
	 .MTlist .MTsummary .icoBox { right: 10px; width: 40px; height: 40px; border-radius: 5px; }
	 .MTlist .MTsummary .ico { width: 26px; height: 20px; }
 
	 .MTnote{ margin: 10px auto; width: 94%; font-size: 14px; }
	 .MTribbon{ margin: 20px auto 5px; width: 330px; }
	 .MT{ margin: 0 auto 50px; width: 94%; }
	 .MTdetail{ padding: 0 0 15px; width: 208px; border-radius: 10px;}
	 .MTtitleP,.MTtitleG,.MTtitleO,.MTtitleB,.MTtitleR{ margin: 10px 0 5px; font-size: 16px; }
	 .MTtxt{ margin: 10px auto; width: 192px; font-size: 16px; }
 
	 .btnTOP1,.btnTOP2{ padding-right: 20px; width: 160px; height: 30px; font-size: 16px; background-size: 18px; border-radius: 5px;}
 
	 .CPfreecall{ margin: 30px auto; border-radius: 15px;}
	 .CPcopy{ padding: 15px 15px 10px; }
	 .CPfoot{ padding: 20px 0 80px; }
 }

/*================================================
 *  幅
================================================*/
.w100{ width: 100%; }

/*================================================
 *  行揃え
================================================*/
.talR{ text-align: right;}
.talL{ text-align: left;}
.talC{ text-align: center;}

.lh0{ line-height: 0;}

/*================================================
 *  フォント太さ
================================================*/
.ftw500{font-weight: 500;}
.ftw700{font-weight: 700;}
.fw800{ font-weight: 800;}

/*================================================
 *  色
 ================================================*/
.red{ color:#c1272d; }
.blue{ color: #0068b6; }
.blueB{ color: #0068b6; font-weight: 700; }
.gray{ color:#666; }
.yellow{ color:#faeb87; }
.white{ color:#fff; }
.pink{ color:#ff7bac; }

/*================================================
 *  フォントサイズ
 ================================================*/
 .ftSS{ font-size: 0.6em; }
 .ftS{ font-size: 0.8em; }
 .ftM{ font-size: 1em; }
 .ftL{ font-size: 1.3em; }
 .ftLL{ font-size: 2em; }
 .ft70{ font-size: 70%; }
 .ft75{ font-size: 75%; }
 .ft80{ font-size: 80%; }
 .ft115{ font-size: 115%; }
 .ft125{ font-size: 123%; }
 @media screen and (min-width:769px) {
	 .ftS{ font-size: 0.7em !important; }
 }

/*================================================
 *  マージン
 ================================================*/
 .mgt2vw{ margin-top: 2vw;}
 .mgt3vw{ margin-top: 3vw;}
 .mgt5vw{ margin-top: 5vw;}
 .mgt8vw{ margin-top: 8vw;}
 .mgt10vw{ margin-top: 10vw;}

 .mgb5vw{ margin-bottom: 5vw;}
 .mgb10vw{ margin-bottom: 10vw;}
 
 .mgt05{ margin-top: 0.5em; }
 .mgb03{ margin-bottom: 0.3em; }
 .mgb05{ margin-bottom: 0.5em; }
 .mgb15{ margin-bottom: 1.5em; }
 
 .mgb5vw{ margin-bottom: 5vw;}
 .mgb4{ margin-bottom: 4em; }
 
 .mgt-2{ margin-top: -2em; }
 @media screen and (min-width:769px) {
	 .mgt2vw{ margin-top: 10px;}
	 .mgt3vw{ margin-top: 15px;}
	 .mgt5vw{ margin-top: 20px;}
	 .mgt8vw{ margin-top: 25px;}
	 .mgt10vw{ margin-top: 30px;}
	 .mgb5vw{ margin-bottom: 20px;}
	 .mgb10vw{ margin-bottom: 70px;}
 }
/*================================================
 *  レスポンシブ
 ================================================*/
@media screen and (min-width:768px) {
.SP{ display:none; }
	.PC{ display: block; }
}

@media screen and (max-width:769px) {
	.SP{ display: block; }
	.PC{ display: none; }
}
/*================================================
 *  追加分
 ================================================*/
 .borderline{
	height: 1px; background: #666; border: none; color: #666;
}
.attention-marker1 {
	background:linear-gradient(transparent 50%, #c2e6ebb8 0);
}
.attention-marker2 {
	background:linear-gradient(transparent 50%, #ffdb78 0) 
}
.attention-red {
	border-bottom: 2px solid #c1272d;
}
.exchange-red{
	color:#c1272d; font-size:1.2em;
}
.frame-dashed { margin: 2vw 0; padding: 1.5vw 0;  border-top: 2px dashed  #543d22; border-bottom: 2px dashed  #543d22;}

.a-red, .a-red:visited{color:#c1272d; text-decoration: underline;}

/*================================================
 * 「イングリッシュ・タブ」の機能やできること
    ETのご案内
 ================================================*/
.feature_menu_A {display: block; text-indent: -1em; margin: 0.1em 0 0.1em 1em; text-decoration:none; line-height: 1.8em;}
.feature_menu_A:before { content: '▼';}
.feature_menu_B {display: block; text-indent: -1em; margin: 0.1em 0 0.1em 1em; text-decoration:none; line-height: 1.8em;}
.feature_menu_B:before { content: '・';}
.feature_img {display: block;}
.img_50pct { display: block; width:50%; height:auto;}

.repair_price { width: 100%; border: 1px solid #816443; }
.repair_price th { border: 1px solid #816443; padding: 1em 0.5em; background-color: #ece5dc; text-align: center; }
.repair_price td { border: 1px solid #816443; padding: 1em 0.5em; }

/*================================================
 * インデント
 ================================================*/
.notes_list_1 { text-indent: -1em; margin: 0.1em 0 0.1em 1em; text-decoration:none; line-height: 1.8em;}
.notes_list_2 { text-indent: -2em; margin: 0.1em 0 0.1em 2em; text-decoration:none; line-height: 1.8em;}
.notes_list_3 { text-indent: -3em; margin: 0.1em 0 0.1em 3em; text-decoration:none; line-height: 1.8em;}

/*================================================
 * 約款
 ================================================*/
 .agreement_container{
	margin: 1vw auto; padding: 0 0 1vw 0; width: 100%;
    text-align: left; font-size: 3.5vw; 
}
.agreement_container p { text-indent: -1em; margin: 0.1em 0 0.1em 1em; }

.agreement_box p { text-indent: -1.5em; margin: 0.1em 0 1em 1.5em; }
.agreement_inner { margin: -0.9em 0 1em 1.5em;}
.agreement_inner li {  text-indent: -2.2em; margin: 0.1em 0 0.1em 2.2em; }

.annual_rate { width: 100%; border: 1px solid #816443; font-size: 0.8em; }
.annual_rate td { border: 1px solid #816443; padding:0.2em; }

@media screen and (min-width:769px) {
	.agreement_container{ margin: 20px auto; padding: 0; font-size: 18px; }
}

/*================================================
 * 交換対象一覧
 ================================================*/
.excahnge_list { width: 100%; border: 1px solid #816443;}
.excahnge_list th { border: 1px solid #816443; padding: 0.3em; background-color: #ece5dc; text-align: center; vertical-align:middle;}
.excahnge_list td { border: 1px solid #816443; padding: 0.3em; vertical-align:middle;}

.excahnge_list_w1 {width: 16%; text-align: center;}
.excahnge_list_w2 {width: 68%;}

.excahnge_list_img {display: flex; justify-content: space-between;}
.excahnge_list_img_inner { width: 50%; margin: 0 auto;}
.excahnge_list_img_inner span { display: block; text-align: center; letter-spacing: -0.05em;}
.excahnge_list_img_inner img {  display: block; width: 80%; margin: 2vw auto;}

.list_attention { text-indent: -1em; margin: 0.1em 0 0.1em 1em; }
.list_attention::before { content: '※'; }

.materials_blue { background-color: #1414c0; color: #fff;}
.materials_green { background-color: #068f06; color: #fff;}
.materials_lime { background-color: #8cfd67;}
.materials_yellow { background-color: #ffec3f;}
.materials_lightblue { background-color: #aadfff; }

@media screen and (min-width:769px) {
	.excahnge_list_img_inner img { margin-top: 10px;}
}

/*================================================
 * 改行
 ================================================*/

 .br-sp { display: block }
 .br-pc { display: none; }
 @media screen and (min-width:769px) {
	.br-sp { display: none; }
	.br-pc { display: block }
 }

 /*================================================
 * 動画用
 ================================================*/
 
.movie_faq {
	text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;
    width: 100%;
	overflow-x :hidden;
	overflow-y :hidden;
	scrollbar-gutter: stable;
}

/*================================================
 *  バンパーお知らせ追加（TOP・ログイン）
 ================================================*/
 .bumper_container {
	display: flex;
	justify-content: space-between;
 }
 .bumper_container_txt {
	padding-right: 10px;
 }
 .bumper_flow {
	text-indent: -1.2em;
	margin: 0.1em 0 0.1em 1em;
 }
 .bumper_flow::before {
	content: '・';
 }
 .bumper_flow_red {
	text-indent: -1.2em;
	margin: 0 0 0.1em 1em;
	color:#c1272d;
 }
 .bumper_flow_red::before {
	content: '※';
 }
 .bumper_flow2 {
	text-indent: -1.2em;
	margin: 0.1em 0 0.1em 1em;
 }
 .bumper_flow2::before {
	content: '※';
 }

 .bumper_container_img2 {
	width: 90%;
 }
 .bumper_attention {
	color:#c1272d;
	font-weight: 500;
	text-align: center;
 }
 .bumper_attention2{
	text-indent: -1.2em;
	margin: 0.1em 0 0.1em 1em;
	font-size: 1.1em;
	font-weight: 500;
 }
 .bumper_attention3 {
	text-indent: -1.2em;
	margin: -0.75em 0 0.1em 1em;
	font-size: 1.1em;
	font-weight: 500;
 }
 .bumper_attention2::before, .bumper_attention3::before {
	content: '■';
 }
.dotted_line {
	border-top: 1px dashed #838383;
	margin: 3vw 0;
}
@media screen and (min-width:769px) {
    .dotted_line { margin: 15px 0;}
}

/*================================================
 *  バンパー申込ページ
 ================================================*/
 .head_bgc2 {
	background: #fff;
 }
 .dateBox3 { 
	padding: 3vw 0;
	background:#f24887;
	font-size: 4vw;color: #fff; }

 .bumper_img3 {
	width: 85%;
	display: block;
	margin: 0 auto;
 }
 p.tp3 {
	text-align: center;
	line-height:1.3;
	font-size: 3.3vw;
	font-weight: 500;
	padding:0 2vw 1vw 20vw;
 }
@media screen and (min-width:769px) {
	.dateBox3{
		padding: 15px 0;
		font-size: 20px;
	}
	p.tp3{ 
		font-size: 16px;
		padding:0 10px 5px 100px;
	}
}
.credit_m {
    width:90px !important;
	height:auto;
	display: block;
	margin: 0 auto;
}

.box3column{ margin: 0 auto 8vw; padding: 0; width: 100%; display: flex; flex-direction: column;}
.box3column p{ 
	margin: 1.5vw 0; padding:1vw 2vw; width: 100%; border-radius: 5px; overflow: hidden; border:1px solid #999; 
	font-size: 3.5vw; font-weight: 500; line-height: 1.3; background:#fff;
}

@media screen and (min-width:769px) {
	.box3column{ margin: 0 auto 20px; }
	.box3column p{ margin: 5px 0; padding:5px 10px; font-size: 18px; }
}