:root {
	--b_margin: 3.2rem;
	--b_padding: 1.6rem;
	--c01: #009d49;
	--c02: #ff3333;
	--c03: #fff100;
	--c04: #333333;

	--base-width: 480;

    /* 10px, 20px...vw */
    --s10: calc(10 / var(--base-width) * 100vw);
    --s20: calc(20 / var(--base-width) * 100vw);
    --s30: calc(30 / var(--base-width) * 100vw);
    --s40: calc(40 / var(--base-width) * 100vw);
    --s50: calc(50 / var(--base-width) * 100vw);
    --s60: calc(60 / var(--base-width) * 100vw);
    --s70: calc(70 / var(--base-width) * 100vw);
    --s80: calc(80 / var(--base-width) * 100vw);
    --s90: calc(90 / var(--base-width) * 100vw);
    --s100: calc(100 / var(--base-width) * 100vw);
    
    --s4: calc(4 / var(--base-width) * 100vw);
    --s8: calc(8 / var(--base-width) * 100vw);
    --s16: calc(16 / var(--base-width) * 100vw);
    --s18: calc(18 / var(--base-width) * 100vw);
    --s22: calc(22 / var(--base-width) * 100vw);
    --s24: calc(24 / var(--base-width) * 100vw);
    --s28: calc(28 / var(--base-width) * 100vw);
    --s32: calc(32 / var(--base-width) * 100vw);
    --s48: calc(48 / var(--base-width) * 100vw);
    --s64: calc(64 / var(--base-width) * 100vw);
    --s68: calc(68 / var(--base-width) * 100vw);
}

html {
	font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP","メイリオ", Meiryo, sans-serif;
	font-size: var(--s10);
	line-height: 1.5;
	-webkit-text-size-adjust: 100%;
	color:var(--c04);
	margin: 0;
	padding: 0;
}
body {
	position: relative;
	margin: 0;
	padding: 0;
	padding-top: var(--s68);
	font-size: 1.4em;
	text-align: center;
}
img {
	max-width: 100%;
}
input {
	display: none;
}

header {
	width: 100%;
	height: var(--s68);
	box-sizing: border-box;
	padding: 1rem;
	background-color: #ffffff;
	position : fixed;
	top: 0;
	text-align: left;
	z-index: 100;

	-webkit-box-shadow: 0 0.2rem 1rem 0 rgba(0, 0, 0, .1);
	box-shadow: 0 0.2rem 1rem 0 rgba(0, 0, 0, .1);
}
#logo_docomo {
	display:contents;
}
#logo_docomo img {
	height: 200%;
	transform-origin: 0 0;
	transform: scale(0.5);
}

.logo_box {
	display: grid;
	grid-template-columns: 1fr 1fr;
	height: var(--s90);
	align-items: center;
	place-items: center;
}
.logo_box img:first-of-type {
	height: var(--s48);
}
.logo_box img:last-of-type {
	height: var(--s48);
}

#mv_main {
	position: relative;
	margin-top: calc(var(--s40) * -1);
}
#bg_box {
	background-color: var(--c01);
	background-image: repeating-linear-gradient(135deg,
	transparent 0px, transparent 6px,
	#00b05a 6px, #00b05a 18px,
	transparent 19px, transparent 25px );
}

/* ==================== 手順 ==================== */
#cp_step ,
#cp_detail {
	width: 100%;
	box-sizing: border-box;
	padding: var(--s30);
	margin: auto;
}
#cp_step {
	font-feature-settings: "palt";
}
#cp_detail {
	padding-bottom: var(--s30);
}
#cp_step h3 {
	text-align: center;
}
#cp_step h3 img {
	width: 71.42%;
}

#cp_step h4 {
	background-color: #ffdfe8;
	color: var(--c01);
	font-size: 2.4rem;
	font-weight: 600;
	line-height: 4rem;
}
#cp_step .step {
	width: 100%;
	box-sizing: border-box;
	background-color: #ffffff;
	padding: var(--s24);
	margin-bottom: var(--s24);
}
#cp_step .step:last-child {
	margin-bottom: 0 ;
}
.text_f {
	font-size: 1.8rem;
	font-weight: 600;
	line-height: 1.5em;
}
.text_s {
	font-size: 2rem;
	font-weight: 400;
	line-height: 1.5em;
	margin-top: var(--s20);
}

/* ==================== STEP ==================== */

.period {
	background-color: var(--c03);
	border-radius: 2vw;
	color: var(--c02);
	font-size: 2rem;
	font-weight: 700;
	padding: 2vw;
	margin: var(--s20) 0 0;
}
.period p:first-of-type {
	font-size: 1.8rem;
}
#cp_step h5 {
	font-size: 2.4rem;
	font-weight: 700;
	margin-top: var(--s8);
}
.present {
	margin: var(--s20) auto var(--s8);
}
.btn_step1 {
	transition: all 0.25s ease-in-out
}
.btn_step1:hover {
	filter:brightness(1.5);
}
.btn_step1 img{
	width: 72%;
}
.np {
	display: inline-block;
	background-color: var(--c03);
	font-size: 2rem;
	font-weight: 700;
	padding: 0.1em 0.75em;
	margin: var(--s8) auto var(--s32);
}


#step2 .text_s {
	margin: var(--s30) auto;
	font-weight: 600;
}
#step2 .text_s + img {
	margin-bottom: var(--s30);
	font-weight: 600;
}
.att {
	text-align: left;
	font-size: 1.4rem;
	font-weight: 400;
	padding-left: 1em;
	text-indent: -1em;
	margin: var(--s30) auto;

}
#step2 a {
	display: block;
	width: 60%;
	margin: auto;
	transition: all 0.25s ease-in-out;
}
#step2 a:hover {
	filter: brightness(150%);
}


/* ==================== アップデート情報 ==================== */

#update {
	position: relative;
}
#update div {
	position: relative;
}
#update div:nth-of-type(2) {
	position: relative;
	margin-top: -4vw;
	z-index: 2;
}
#update a {
	display: block;
	position: absolute;
	bottom: var(--s24);
	left: 0;
	right: 0;
	margin: auto;
	width: 58%;
	z-index: 3;
	transition: all 0.25s ease-in-out;
}
#update a:hover {
	filter:brightness(1.5);	
}
#update div:nth-of-type(3) {
	margin-top: calc(var(--s20) * -1);
}
#update div:nth-of-type(4) {
	margin-top: calc(var(--s20) * -1);
}

/* ==================== 詳細 ==================== */

#cp_detail label {
	display: grid;
	place-items: center;
	position: relative;
	cursor: pointer;
	width: 100%;
	height: var(--s70);
	background: url("../images/btn_detail.svg") no-repeat;
	background-size: contain;

	font-size: 2.6rem;
	font-weight: 600;
	color: #ffffff;
	z-index: 2;
}
#cp_detail label::before ,
#cp_detail label::after {
	content: "";
	position: absolute;
	width: var(--s20);
	height: var(--s4);
	top: 50%;
	right: var(--s30);
	background-color: #ffffff;
	transform: translateY(-50%);
	transition: all 0.25s ease-in-out;
}
#cp_detail label p {
	filter: drop-shadow(0 0 1.5px #e50012) drop-shadow(0 0 1.5px #e50012)
	 drop-shadow(0 0 1.5px #e50012) drop-shadow(0 0 1.5px #e50012);
}

label[for="detail_01"] {
	margin-top: 0;
}
label[for="detail_02"] {
	margin-top: var(--s28);
}
#cp_detail .box {
	display: grid;
	grid-template-rows: 0fr;
	
	background-color: #ffffff;
	margin-top: -10px;
	padding: 10px var(--s28) 0;
	text-align: left;
	font-size: 2rem;
	font-feature-settings: "palt" normal;

	transition: all 0.5s ease-in-out;
	opacity: 0;
}
#cp_detail .box dl {
	overflow: hidden;
}

#cp_detail .box dt {
	font-weight: 700;
	margin-top: 1em;
}
#cp_detail .box dd {
	font-weight: 400;
}
#cp_detail .box p {
	padding-left: 1em;
	text-indent: -1em;
}
#cp_detail .box p.num {
	padding-left: 1.4em;
	text-indent: -1.4em;
}
#cp_detail .box p.num2 {
	padding-left: 2em;
	text-indent: -2em;
}

#cp_detail label::before{
	transform: translateY(-50%) rotate(90deg);
}

#cp_detail input:checked + label::before{
	transform: translateY(-50%) rotate(0deg);
}

#cp_detail input:checked + label + .box {
	padding: var(--s28);
	grid-template-rows: 1fr;
	opacity: 1;
}
#cp_detail a {
	color: #0000ff;
	text-decoration: underline;
	transition: all 0.25s ease-in-out;
}
#cp_detail a:hover {
	color: var(--c02);
}

/* ==================== Q & A ==================== */

#qa {
	font-size: 2rem;
	font-weight: 500;
	text-align: left;
	padding: var(--s30);
	padding-top: 0;
}
#qa h3 {
	position: relative;
	background-color: var(--c03);
	font-size: 2rem;
	font-weight: 700;
	text-align: center;
	line-height: var(--s70);
	margin-left: calc(var(--s30) * -1);
	margin-right: calc(var(--s30) * -1);
}
#qa label {
	display: block;
	position: relative;
	background-color: var(--c04);
	color: #ffffff;
	padding: var(--s16) var(--s60) var(--s16) var(--s50) ;
	margin-top: var(--s30);
	margin-bottom: 0;
	border-radius: var(--s10);
	transition: all 0.5s ease-in-out;
}
#qa .box {
	display: grid;
	grid-template-rows: 0fr;
	position: relative;
	background-color: #ffffff;
	padding: 0vw var(--s24) 0vw var(--s50) ;
	border-radius: 0 0 var(--s10) var(--s10) ;
	transition: all 0.5s ease-in-out;
	opacity: 0;
}
#qa .box p {
	overflow: hidden;
}
#qa .box p span {
	display: block;
	padding-left: 1em;
	text-indent: -1em;
}
#qa .box a {
	color: #0000ff;
	text-decoration: underline;
	transition: all 0.25s ease-in-out;
}
#qa .box a:hover {
	color: var(--c02);
}


#qa label::before ,
#qa .box::before {
	content: "";
	position: absolute;
	top: var(--s18);
	left: var(--s16);
	width: 1.25em;
	height: 1.25em;
}
#qa label::before {
	background: url("../images/qa_q.svg") no-repeat;
	background-size: contain;
}
#qa .box::before {
	background: url("../images/qa_a.svg") no-repeat;
	background-size: contain;
	transition: all 0.5s ease-in-out 0.5s;
	opacity: 0;
}
#qa label::after {
	content: "";
	position: absolute;
	top: 50%;
	right: var(--s16);
	width: 1.25em;
	height: 0.7em;
	background: url("../images/qa_arrow.svg") no-repeat;
	background-size: contain;
	transition: all 0.5s ease-in-out;
	transform: rotate(180deg);
	transform-origin: center;
}

#qa input:checked + label {
	border-radius: var(--s10) var(--s10) 0 0;
}
#qa input:checked + label::after {
	transform: rotate(0deg);
}
#qa input:checked + label + .box {
	grid-template-rows: 1fr;
	padding: var(--s16) var(--s24) var(--s16) var(--s50) ;
}
#qa input:checked + label + .box {
	grid-template-rows: 1fr;
	padding: var(--s16) var(--s24) var(--s16) var(--s50) ;
	opacity: 1;
}
#qa input:checked + label + .box::before {
	opacity: 1;
}

/* ==================== フッター ==================== */

footer {
	background-color: var(--c04);
	font-size: 1.2rem;
	padding: 1em;
}
#copy {
	color: #ffffff;
	line-height: 2em;
}

/* ======================================== */
/*                 960px以上                 */
/* ======================================== */
@media (min-width: 960px) {
:root {
    /* 10px, 20px...vw */
    --s10: 10px;
    --s20: 20px;
    --s30: 30px;
    --s40: 40px;
    --s50: 50px;
    --s60: 60px;
    --s70: 70px;
    --s80: 80px;
    --s90: 90px;
    --s100: 100px;
    
    --s4: 4px;
    --s8: 8px;
    --s16: 16px;
    --s18: 18px;
    --s22: 22px;
    --s24: 24px;
    --s28: 28px;
    --s32: 32px;
    --s48: 48px;
    --s64: 64px;
    --s68: 68px;
}
html {
	font-size: 10px;
}

header {
	padding: 1.5rem;
}
section {
	max-width: 960px;
	margin-left: auto;
	margin-right: auto;
	box-sizing: content-box;
}
.logo_box {
	grid-template-columns: 1fr 480px 480px 1fr;
	height: 180px;
}
.logo_box img:nth-of-type(1) {
	grid-column: 2;
	height: 96px;
}
.logo_box img:nth-of-type(2) {
	grid-column: 3;
	height: 95px;
}
#mv_main {
    margin-top: -80px;
}

#cp_step ,
#cp_detail ,
#qa {
	padding-left: 0px;
	padding-right: 0px;
}
.period {
	width: 740px;
    border-radius: 1em;
    padding: 1em;
	margin-left: auto;
	margin-right: auto;
}
.present {
    margin-top: var(--s40);
}
.btn_step1 img {
    width: 50%;
}
.att {
    text-align: center;
}
#update a {
    bottom: var(--s50);
}
#update div:nth-of-type(2) {
    margin-top: calc(var(--s20) * -1);
}
#update div:nth-of-type(4) {
    margin-top: calc(var(--s24) * -1);
}
#cp_detail label {
    background: url(../images/btn_detail_pc.svg) no-repeat;
	background-size: contain;
}
#qa label::before, #qa .box::before {
    top: 20px;
}
#qa h3 {
	margin-left: 0;
	margin-right: 0;
}

}