@charset "utf-8";
/*------------------------------------------------------------
	index
------------------------------------------------------------*/
.introduce {
    margin: 40px 10px 35px;
}
.topList {
    margin: 0 -15px 45px;
}
.topList li {
    margin: 0 15px;
    display: inline-block;
    width: 411px;
}
.topList li a {
    padding: 13px 45px 17px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    font-weight: bold;
    letter-spacing: 0.1em;
    color: #003398;
    border-radius: 20px;
    box-shadow: 5px 5px 0 #013396;
    background: #fff url("../img/common/icon01.png") no-repeat right 20px center / 26px;
}
.topList li a:hover {
    opacity: 0.7;
}
.topText {
    display: flex;
    justify-content: space-between;
    text-align: justify;
    text-justify: inter-ideograph;
}
.topText p {
    margin-right: 5px;
    width: 62.2%;
}
.topText span {
    display: block;
}
.textShow {
    max-width: 306px;
    width: 35.6%;
    mix-blend-mode: screen;
}
.timeBox {
    padding: 31px 10px 40px;
    text-align: center;
    background: linear-gradient(-60deg, rgba(0, 129, 204, 1) 0%, rgba(2, 121, 198, 1) 7.84%, rgba(8, 98, 180, 1) 20.15%, rgba(18, 62, 151, 1) 35.32%, rgba(24, 41, 135, 1) 42.9%, rgba(24, 41, 135, 1) 100%);
}
.timeBox .content01 {
    margin-bottom: 38px;
    text-align: center;
}
.timeBox .content01 img {
    width: 98.5%;
}
.timeBox p {
    padding-bottom: 2px;
    font-size: 2.9rem;
    letter-spacing: 0.04em;
    line-height: 1;
    color: #fff;
}
.moreBox {
    position: relative;
    margin: 0 auto;
    max-width: 1120px;
}
.timeBox span {
    font-size: 5.0rem;
}
.timeBox .ttlBox {
    margin: 0 auto;
    padding: 9px 90px;
    max-width: 1120px;
    height: 90px;
    position: relative;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3.6rem;
    letter-spacing: 0.28em;
    font-weight: bold;
    cursor: pointer;
    border-radius: 50px;
    background: #ffff50 url("../img/common/icon02.png") no-repeat right center / 90px;
    box-sizing: border-box;
}
.timeBox .ttlBox.on {
    background-image: url("../img/common/icon05.png");
}
.downBox {
    min-height: 90px;
    margin-top: -90px;
    border-radius: 60px;
    background-color: #fff;
    overflow: hidden;
}
.downBox .subDown {
    display: none;
    padding: 120px 50px 64px;
    z-index: 10;
}
.downBox h3 {
    margin-bottom: 30px;
    font-size: 3.2rem;
    line-height: 1.44;
    letter-spacing: 0.08em;
    color: #003397;
}
.downBox p {
    padding-bottom: 0;
    margin-bottom: 35px;
    color: #000000;
    font-size: 1.9rem;
    letter-spacing: 0.06em;
    line-height: 1.68;
}
.downBox .txt {
    margin-bottom: 30px;
}
.downBox .txt02 {
    font-size: 1.4rem;
    letter-spacing: -0.01em;
    margin-bottom: 21px;
}
.downBox .timeImg01 {
    margin-bottom: 64px;
}
.downBox .timeImg02 {
    margin-bottom: 60px;
}
.downBox .timeImg03 {
    margin-top: 70px;
}
.downBox h4 {
    margin-bottom: 25px;
    padding-bottom: 4px;
    font-size: 3.2rem;
    letter-spacing: 0.4em;
    border-top: 2px solid #000000;
    border-bottom: 2px solid #000000;
}
@media all and (min-width: 897px) and (max-width: 1000px) {
    .downBox .subDown {
        padding: 120px 40px 90px;
    }
}
.downBox .step .title {
	margin-bottom: -2px;
	color: #003397;
	font-size: 2.5rem;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.2em;
	text-align: center;
}
.downBox .step .title .large {
	display: block;
	font-size: 3.2rem;
	font-weight: 700;
	line-height: 1.3;
}
.downBox .step .stepImg {
	margin: 0 10px 4px -18px;
}
.downBox .step .linkList {
	margin: 0 -6px 55px;
}
.downBox .step .linkList li {
	width: calc((100%/6));
	padding: 0 6px;
	box-sizing: border-box;
}
.downBox .step .linkList a {
	padding: 10px 5px 42px;
	height: 100%;
	box-sizing: border-box;
	display: block;
	position: relative;
	color: #fff;
	text-align: center;
	border-radius: 4px;
	background: url(../img/index/step_bg.png) repeat left top/8px auto;
}
.downBox .step .linkList a:hover {
	opacity: 0.7;
}
.downBox .step .linkList a span {
	display: block;
	font-size: 1.7rem;
	line-height: 1.3;
}
.downBox .step .linkList a .ttl {
	padding-bottom: 8px;
	margin: 0 5px 10px;
	font-size: 1.6rem;
	font-weight: bold;
	border-bottom: 1px solid #fff;
}
.downBox .step .linkList a .ttl .en {
	font-size: 2.5rem;
	display: inline-block;
}
.downBox .step .linkList a:after {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 16px;
	width: 28px;
	height: 14px;
	background: url(../img/index/arrow02.png) no-repeat left top/100% auto;
	content: "";
}
.downBox .step .listUl {
	margin: -38px 0 57px;
}
.downBox .step .listUl li {
	margin-top: 38px;
	width: 48%;
}
.downBox .step .listUl li > div {
	display: flex;
	align-items: flex-start;
}
.downBox .step .listUl .bgTtl {
	margin: 0 20px 0 0;
	border-radius: 4px;
	width: 26.5%;
	height: 118px;
	color: #fff;
	font-size: 1.8rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	background: url(../img/index/step_bg.png) repeat left top/8px auto;
}
.downBox .step .listUl .bgTtl .en {
	font-size: 3.1rem;
	margin-top: -5px;
}
.downBox .step .listUl .txtBox {
	margin: -5px -2px 0 0;
	flex: 1;
}
.downBox .step .listUl .txtBox p {
	margin-bottom: 0;
	font-size: 1.4rem;
	line-height: 1.7;
	text-align: left;
	letter-spacing: 0;
	text-align: justify;
}
.downBox .step .listUl .txtBox .ttl {
	font-size: 1.8rem;
	font-weight: 600;
	line-height: 1.44;
	margin-bottom: 4px;
	letter-spacing: 0.03em;
}
.downBox .step .btnBox {
	text-align: center;
}
.downBox .step .btnBox .ttl {
	margin-bottom: 15px;
	padding: 0 20px 2px 28px;
	display: inline-block;
	color : #003397;
	font-size: 2.4rem;
	font-weight: bold;
	letter-spacing: 0.44em;
	background: url(../img/index/line01.png) no-repeat left top,url(../img/index/line02.png) no-repeat right top;
	background-size: 1.3rem auto;
}
.downBox .step .btnBox .btn {
	margin: 0 auto;
	width: 779px;
}
.downBox .step .btnBox .btn a:hover {
	opacity: 0.7;
}
.secBox {
    padding: 0 20px;
    position: relative;
    background: url("../img/common/bg02.png") repeat-y center top 297px;
}
.secBox::after {
    position: absolute;
    content: '';
    left: 0;
    bottom: -100px;
    width: 100%;
    height: 500px;
    background: linear-gradient(180deg, rgba(11, 49, 139, 1) 0, rgba(24, 41, 135, 0) 0, rgba(11, 49, 139, 1) 20%, rgba(11, 49, 139, 1) 80%, rgba(11, 49, 139, 0) 100%);
}
#getting {
    padding: 100px 0 183px;
}
.headerLine {
    margin-bottom: 108px;
    padding: 13px 10px 15px 18px;
    text-align: center;
    line-height: 1;
    font-size: 3.2rem;
    letter-spacing: 0.45em;
    color: #fff;
    font-weight: bold;
    background-color: #32d2ff;
    box-sizing: border-box;
}
.change {
    margin-bottom: 75px;
}
.change li {
    margin-bottom: 58px;
    padding: 11px 10px 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 3.2rem;
    color: #fff;
    letter-spacing: 0.15em;
    background-color: rgba(0, 51, 151, 0.3);
    border: 1px solid #fff;
    position: relative;
    box-sizing: border-box;
}
.change .after {
    margin-bottom: 0;
    color: #FFFF50;
    border-color: #FFFF50;
    font-weight: bold;
    letter-spacing: 0.12em;
    border-width: 2px;
}
.change .before::before {
    content: "Before";
    font-size: 2.6rem;
    font-weight: bold;
    position: absolute;
    top: -38px;
    left: 0;
    color: #fff;
    letter-spacing: 0.06em;
}
.change .before::after {
    content: "";
    width: 52px;
    height: 62px;
    position: absolute;
    bottom: -52px;
    left: 50%;
    transform: translateX(-50%);
    background: url("../img/index/arrow.png") no-repeat center bottom / 52px;
}
.change .after::before {
    content: "After";
    font-size: 2.6rem;
    font-weight: bold;
    position: absolute;
    top: -38px;
    left: 0;
    color: #FFFF50;
    letter-spacing: 0.06em;
}
.episode {
    margin-bottom: 200px;
    position: relative;
}
.episode:last-child {
    margin-bottom: 0;
}
.episode .bgImg {
    width: 127px;
    position: absolute;
    top: -59px;
    left: -185px;
    z-index: 1;
    mix-blend-mode: screen;
}
.episode .imgBox {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.episode:nth-last-of-type(2n) .imgBox {
    flex-direction: row-reverse;
}
.episode .photoBox {
    max-width: 600px;
    width: 63%;
    margin: 52px 19px 0 -119px;
}
.episode:nth-last-of-type(2n) .photoBox {
    margin: 52px -121px 0 0;
}
.episode .textBox {
    color: #fff;
    flex: 1;
}
.episode .textBox p {
    margin: 0 -30px 42px 0;
    letter-spacing: 0.05em;
}
.episode .textBox p:last-child {
    margin-bottom: 0;
}
#voice {
    position: relative;
    z-index: 10;
}
#voice h2 {
    margin-bottom: 75px;
    background-color: #35bcff;
    box-sizing: border-box;
}
#voice .textBox {
    margin: 0 5.3% 30px;
}
#voice .textBox p {
    margin-bottom: 29px;
    padding: 19px 26px 25px 32px;
    font-size: 1.9rem;
    color: #fff;
    letter-spacing: 0.05em;
    border: 1px solid #fff;
    background: rgba(0, 51, 151, 0.3);
    box-sizing: border-box;
}
#voice .textBox p:last-child {
    margin-bottom: 0;
}
#voice p:nth-of-type(2n) {
    background: rgba(0, 125, 255, 0.3);
}
#voice .endText {
    margin: -10px auto 0;
    padding-right: 92px;
    text-align: right;
    font-size: 1.9rem;
    color: #fff;
    border: none;
    background: none !important;
}
.interview .imgBox01 .subBox::after {
    content: '';
    min-height: 444px;
}
@media all and (min-width: 897px) and (max-width: 1280px) {
    .episode .bgImg {
        left: -140px;
    }
    .episode .photoBox {
        width: 50%;
        margin-left: -50px;
    }
    .episode .textBox p {
        font-size: 1.8rem;        
    }
    .change li {
        font-size: 2.8rem;
    }
    .content03 {
        padding: 0 90px;
    }
}
@media all and (max-width: 1160px) {
	.downBox .step .linkList a span {
		font-size: 1.4vw;
	}
}
@media all and (max-width: 896px) {
    .introduce {
        margin: 30px 20px 21px;
    }
    .topList {
        margin: 0 0 27px;
    }
    .topList li {
        margin: 0 0 15px;
        width: auto;
        display: block;
    }
    .topList li:last-child {
        margin-bottom: 0;
    }
    .topList li a {
        padding: 8px 44px 13px;
        font-size: 1.7rem;
        border-radius: 10px;
    }
    .topText {
        padding-bottom: 9px;
        display: block;
    }
    .topText img {
        margin: 0 auto;
        width: 100%;
    }
    .textShow {
        margin: 0 52px 25px;
        width: auto;
        max-width: inherit;
        text-align: center;
    }
    .topText p {
        margin: 0 auto;
        padding: 0 5px;
        width: auto;
        max-width: inherit;
    }
    .topText p span {
        font-size: 2.5rem;
    }
    .timeBox {
        padding: 21px 25px 25px;
    }
    .timeBox .content01 {
        margin-bottom: 21px;
        display: block;
    }
    .timeBox p {
        width: 100%;
        font-size: 2rem;
    }
    .timeBox .text {
        margin: 0 auto 17px;
        padding-bottom: 9px;
        font-size: 2rem;
        background-size: 120px;
    }
    .timeBox .ttlBox {
        padding: 4px 45px 5px 40px;
        height: 45px;
        font-size: 1.8rem;
        background-size: 45px;
    }
    .downBox {
        min-height: 45px;
        margin-top: -45px;
        border-radius: 30px 30px 20px 20px;
    }
    .downBox .subDown {
        padding: 70px 10px 15px;
    }
    .downBox h3 {
        font-size: 1.6rem;
        line-height: 1.44;
        margin-bottom: 26px;
    }
    .timeBox .ttlBox > img {
        width: 188px;
    }
    .downBox p {
        margin-bottom: 37px;
        text-align: left;
        font-size: 1.4rem;
        letter-spacing: 0.02em;
        line-height: 2;
    }
    .downBox .timeImg01 {
        margin-bottom: 45px;
    }
    .downBox .timeImg02 {
        margin-bottom: 23px;
    }
    .downBox .timeImg03 {
        margin: 45px 4px 0;
    }
    .downBox h4 {
        margin-bottom: 20px;
        font-size: 1.6rem;
        letter-spacing: 0.32em;
        border-width: 1px;
        line-height: 1.7;
        padding-bottom: 2px;
    }
    .downBox .txt {
        margin-bottom: 0;
    }
    .downBox .txt02 {
        font-size: 1.2rem;
        margin: -20px 0 50px;
        line-height: 1.833;
        letter-spacing: 0.02em;
    }
	.downBox .step .title {
		margin-bottom: 6px;
		font-size: 1.3rem;
	}
	.downBox .step .title .large {
		font-size: 1.6rem;
	}
	.downBox .step .stepImg {
		margin: 0 0 -1px;
	}
	.downBox .step .linkList {
		margin: 0 -1.5px 23px;
	}
	.downBox .step .linkList li {
		padding: 0 1.5px;
	}
	.downBox .step .linkList a {
		padding: 8px 2px 20px;
		background-size: 4px auto;
	}
	.downBox .step .linkList a .ttl {
		padding-bottom: 0;
		margin: 0;
		font-size: 0.9rem;
		border-bottom: none;
	}
	.downBox .step .linkList a .ttl .en {
		font-size: 1.7rem;
		vertical-align: -1px;
		margin-right: 1px;
	}
	.downBox .step .linkList a:after {
		bottom: 2px;
		width: 14px;
		height: 13px;
		background-image: url(../img/index/sp_arrow02.png);
	}
	.downBox .step .listUl {
		margin: 0 0 23px;
		display: block;
	}
	.downBox .step .listUl li {
		margin: 0 0 20px;
		width: auto;		
	}
	.downBox .step .listUl li > div {
		display: block;
	}
	.downBox .step .listUl .bgTtl {
		margin: 0 0 10px;
		padding: 2px;
		width: 85px;
		height: auto;
		font-size: 1rem;
		line-height: 1.2;
		display: block;
		text-align: center;
		background-size: 4px auto;
		box-sizing: border-box;
	}
	.downBox .step .listUl .bgTtl .en {
		font-size: 1.7rem;
		margin-top: 0;
		vertical-align: -1px;
	}
	.downBox .step .listUl .txtBox {
		margin: 0;
	}
	.downBox .step .listUl .txtBox p {
		font-size: 1.2rem;
		line-height: 1.5;
		letter-spacing: 0.02em;
		text-align: justify;
	}
	.downBox .step .listUl .txtBox .ttl {
		margin-bottom: 5px;
		font-size: 1.4rem;
		line-height: 1.25;
	}
	.downBox .step .btnBox .ttl {
		margin-bottom: 7px;
		width: auto;
		padding: 0 10px 2px 18px;
		font-size: 1.5rem;
		line-height: 1.3;
		text-align: center;
		background-position: left 6px,right 6px;
		background-size: 1rem auto;
	}
	.downBox .step .btnBox .btn {
		width: auto;
	}
    .secBox {
        padding: 0;
        background-position: center top 172px;
        background-size: 250% auto;
    }
    #getting {
        padding: 60px 25px 57px;
    }
    .headerLine {
        margin-bottom: 56px;
        padding: 6px 10px 8px 15px;
        width: 100%;
        font-size: 1.6rem;
        letter-spacing: 0.38em;
    }
    .change {
        margin-bottom: 0;
    }
    .change li {
        margin-bottom: 29px;
        padding: 6px 10px 7px;
        min-height: 61px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        text-align: center;
        font-size: 1.6rem;
        line-height: 1.44;
        letter-spacing: 0.08em;
    }
    .change .after {
        border-width: 1px;
        letter-spacing: 0.09em;
    }
    .change .before::before {
        font-size: 1.3rem;
        top: -16px;
    }
    .change .before::after {
        background-size: 25px;
        bottom: -25px;
    }
    .change .after::before {
        font-size: 1.3rem;
        top: -16px;
    }
    .episode {
        margin-bottom: 99px;
    }
    .episode .bgImg {
        width: 63px;
        top: -36px;
        left: -37px;
        z-index: 0;
    }
    .episode .imgBox {
        margin: -26px auto 0;
        display: block;
    }
    .episode:last-child .imgBox {
        margin-bottom: 0;
    }
    .episode:nth-last-of-type(2n) .imgBox {
        flex-direction: row;
    }
    .episode:nth-last-of-type(2n) .photoBox, .episode .photoBox {
        margin: 0 0 8px;
        width: auto;
        max-width: inherit;
        text-align: center;
    }
    .episode .photoBox img {
        width: 235px;
    }
    .episode .textBox p {
        margin: 0 0 28px;
    }
    #voice h2 {
        margin-bottom: 29px;
    }
    #voice {
        margin: 0 25px;
    }
    #voice .textBox {
        margin: 0 0 17px;
    }
    #voice .textBox p {
        margin-bottom: 19px;
        padding: 8px 13px 13px 15px;
        font-size: 1.4rem;
        line-height: 1.71;
    }
    #voice .endText {
        margin-top: -7px;
        padding-right: 0;
        font-size: 1.4rem;
    }
    #voice .textBox {
        width: auto;
    }
}
@media all and (max-width: 374px) {
    .topList li a {
        font-size: 1.4rem;
        background-size: 20px;
    }
    .topText .text01 {
        font-size: 2rem;
    }
    .topText .text02 {
        font-size: 2.4rem;
    }
    .topText .text03 {
        font-size: 3.1rem;
    }
    .timeBox .text02 {
        letter-spacing: 0;
    }
    .timeBox .ttlBox {
        padding: 7px 45px 6px 40px;
        font-size: 1.6rem;
    }
    .downBox {
        border-radius: 30px;
    }
    .headerLine {
        font-size: 1.3rem;
    }
    .episode .textBox p {
        font-size: 1.2rem;
        width: 100%;
    }
    #voice p {
        font-size: 1.1rem;
    }
    .timeBox {
        padding: 18px 15px 25px;
    }
	.downBox .step .title .large {
		font-size: 1.4rem;
	}
}