*{
box-sizing: border-box;
margin: 0;
padding: 0;
border: none;
}
body{
font-family: 'Hiragino Sans',Meiryo,sans-serif;
font-size: 16px;
width: 100%;
max-width: 750px;
margin: 0 auto;
color: #1e1e1e;
background: #f5f5f5;
-webkit-text-size-adjust: 100%;
}
a{
display: block;
}
img{
max-width: 100%;
}
button{
display: block;
width: 100%;
}
ul,li{
list-style: none;
}
::placeholder{
color: #95989a;
}
@media (min-width: 751px){
body{
max-width: 1200px;
}
}
@media screen and (min-width:767px) and (max-width:1024px){
 body{font-size:1.56vw;}
}

/* font */
.ff-noto{
font-family: 'Noto Sans JP', sans-serif;
}
#downloadForm textarea{
font-family: 'Hiragino Sans',Meiryo,sans-serif;
}
h1,h2,h3,h4,h5,h6{
font-size: 1em;font-weight: normal;
}
.fs-10pc{
font-size:0.625em;
}
.fs-13pc{
font-size:0.8125em;
}
.fs-14pc{
font-size:0.875em;
}
.fs-16pc{
font-size:1em;
}
.fs-17pc{
font-size: 1.0625em;
}
.fs-18pc{
font-size:1.125em!important;
}
.fs-20pc{
font-size: 1.25em!important;
}
.fs-21pc{
font-size:1.3125em!important;
}
.fs-22pc{
font-size:1.375em!important;
}
.fs-24pc{
font-size: 1.5em!important;
}
.fs-28pc{
font-size:1.75em;
}
.fs-30pc{
font-size: 1.875em;
}
.fs-34pc{
font-size: 2.125em;
}
.fs-36pc{
font-size: 2.25em;
}
.fs-40pc{
font-size:2.5em;
}
.fs-44pc{
font-size:2.75em;
}
.fs-50pc{
font-size:3.125em;
}
.fs-54pc{
font-size:3.375em;
}
rt{
font-size: 15px!important;
}
@media (max-width: 750px){
body{
font-size: 4.266666666666667vw;
}
.fs-8{
font-size: 0.5em!important;
}
.fs-10{
font-size: .625em!important;
}
.fs-11{
font-size: .6875em!important;
}
.fs-12{
font-size: .75em!important;
}
.fs-13{
font-size: .8125em!important;
}
.fs-14{
font-size: .875em!important;
}
.fs-15{
font-size: .9375em!important;
}
.fs-16{
font-size: 1em!important;
}
.fs-17{
font-size: 1.0625em!important;
}
.fs-18{
font-size: 1.125em!important;
}
.fs-20{
font-size: 1.25em!important;
}
.fs-22{
font-size: 1.375em;
}
.fs-24{
font-size: 1.5rem!important;
}
.fs-25{
font-size: 1.5625em;
}
rt{
font-size: 8px!important;
}
}
.fw-b{
font-weight: bold;
}
.fw-600{
font-weight:600;
}
.fw-500{
font-weight:500;
}
.c-green{
color: #179cad;
}
.c-blue{
color: #15bcd1;
}
.c-white{
color: #fff;
}
.c-yellow{
color: #FAAD07;
}
.c-yellow01{
color: #F6EC35;
}
.c-darkgreen{
color: #214C52!important;
}
.bg-white{
background-color: #fff;
}
.bg-green{
background-color: #179cad;
}
.bg-darkgreen{
background-color: #214C52;
}
.bg-navy{
background-color: #263247;
}
.bg-orange{
background-color: #fa5539;
}
.bg-orange{
background-color: #fa5539;
}
/* header ☆*/
header{
position: relative;
background: #F5F5F5 url('../images/bg_header.jpg?20230202') no-repeat top center;
background-size: 100% auto;
height: 153.066666666666667%;
}
header #header_wrapper{
display: flex;
justify-content: center;
flex-direction: column;
}
header #header_wrapper img{
width: 100%;
max-width: 50px;
display: block;
margin: 3.47% auto 3.47%;
}
header #header_wrapper > p{
padding: 0 0 18.67%;
text-align: center;
margin-top: -0.5em;
}
header h1{
line-height: 1.5;
margin: -2% auto 12% 6%;
}
header > img{
display: block;
width: 40%;
max-width: 300px;
margin: 0 auto 10.267% 10.67%;
}
header > p{
line-height: 1.739;
/*margin: 0 0 37.334% 12%;*/
margin: 0 0 2.67% 10.67%;
}
header > p span{
margin: 0 .93%;
padding: .93%;
}
#youtube_wrapper{
margin: 0 auto 1em;
max-width: 78.666666666666667%;
width: 100%;
position: relative;
padding-top: 56.25%;
}
#youtube_wrapper iframe{
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
}
.button.col1{
display: flex;
width: 78.66%;
margin: 0 auto;
padding: 4.22% 0;
text-decoration: none;
color: #fff;
align-items: center;
justify-content: center;
background: #FA5539;
position: relative;
z-index: 3;
}
.button.col1 span{
position: relative;
padding-right: 6.67%;
}
.button.col1 span::after{
position: absolute;
top: 51%;
right: 0;
display: inline-block;
width: .375em;
height: .6875em;
content: '';
transform: translateY(-51%);
background-image: url('../images/icon_arrow.png');
background-repeat: no-repeat;
background-size: contain;
}
@media (min-width: 751px){
header{
background: url('../images/bg_header_pc.jpg?20230202') no-repeat top center;
background-size: 100% auto;
max-height: 1234px;
}
header #header_wrapper{
justify-content: flex-start;
flex-direction:row;
padding: 28px 0 0 100px;
}
header #header_wrapper img{
max-width: 113.49px;
height: 100px;
margin: 0 40px 0 0;
}
header #header_wrapper > p{
margin: 0;
padding: 0;
text-align: left;
}    
header h1{
letter-spacing: 0.03em;
line-height: 75px;
margin: 144px 0 48px 100px;
}
header > img{
max-width: 350px;
margin: 0 0 15px 100px;
}
header > p{
margin: 0 0 15px 100px;
}
header > p span{
margin: 0 15px;
padding: 8px;
}
#youtube_wrapper{
margin: 0 auto 70px 100px;
max-width: 526px;
padding-top: 296px;
} 
.button.col1{
width: 100%;
height: 80px;
margin: 0 auto;
padding: 16px 0;
}
.button.col1:hover{
opacity: .7;
}
.button.col1 span{
padding-right: 28px;
}
.button.col1 span::after{
width: 6.65px;
height: 13.3px;
}
.button.col1:hover span::after{
background-image: url('../images/icon_arrow_hover.png');
}
header .button.col1{
max-width: 50%;
margin-bottom: 90px;
}
}
/* main */
main{
position: relative;
overflow: hidden;
width: 100%;
margin: 0;
}
main > section{
position: relative;
}
main > section .wrapper{
width: 100%;
padding: 0 20px;
position: relative;
}
main > section h2{
text-align: center;
color: #214c52;
}
main > section h3{
margin: 0 auto;
padding: 5.634% 0 11.26%;
text-align: center;
color: #106e7a;
}
main > section h5{
line-height: 1.5;
margin-bottom: 20px;
color: #1e1e1e;
}
main > section .wrapper p{
line-height: 1.5;
margin-bottom: 2em;
}
main > section .wrapper > p:last-of-type{
margin-bottom: 1.25em;
}
@media (min-width: 751px){
main > section .wrapper{
padding: 0 50px;
}
main > section h3{
padding: 0 0 96px;
line-height: 1.36;
}
main > section h5{
line-height: 1.67;
margin:75px 0 28px;
}
main > section .wrapper p,
main > section .wrapper > p:last-of-type{
line-height: 1.77;
margin-bottom: 32px;
}
}

/* HeroArea */
#HeroArea{
position: relative;
overflow-x: hidden;
padding: 10.67% 0 0;
background: #f5F5F5 url('../images/bg_heroarea.png') no-repeat bottom center;
background-size: 100% auto;
}
#HeroArea .wrapper{
top: 0;
padding: 0 20px;
}
#HeroArea h2:first-child{
line-height: 1.5;
text-align: left;
position: relative;
}
#HeroArea dl{
position: relative;
margin: 7.46% 0 53.73%;
}
#HeroArea dl dt span{
padding: 2.666666666666667%;
text-align: center;
}
#HeroArea dl dd{
position: relative;
margin-bottom: 4.8%;
padding-left: 2.143em;
}
#HeroArea dl dd::before{
position: absolute;
top: 0;
left: 0;
display: inline-block;
width: 1.66em;
height: 1.5275em;
content: '';
background-image: url('../images/icon_checkbox.svg');
background-repeat: no-repeat;
background-size: contain;
}
#HeroArea dl dd:last-child{
margin-bottom: 0%;
}
#HeroArea p{
line-height: 1.5;
margin-bottom:10%;
text-align: center;
}
@media (min-width: 751px){
#HeroArea{
padding:0;
background: #f5f5f5 url('../images/bg_heroarea_pc.png') no-repeat bottom center;
background-size: 100% auto;
}
#HeroArea .wrapper{
padding: 0 4.167%;
}
#HeroArea h2:first-child{
line-height:1.625;
margin-left: 46px;
}
#HeroArea dl{
margin: 0 50px 150px;
padding-top: 40px;
}
#HeroArea dl dt{
padding-bottom: 50px;
text-align:left;
}
#HeroArea dl dt span{
padding: 21.5px 27px;
}
#HeroArea dl dd{
margin-bottom:30px;
padding-left: 60px;
line-height: 1.6;
}
#HeroArea dl dd::before{
width: 46.47px;
height:40.51px;
}
#HeroArea p{
margin-bottom: 72px;
text-align: center;
}
}

/* explanation */
#explanation{
position: relative;
background: #fff;
z-index: 1;
}
#explanation::before{
position: absolute;
top: 0;
left: 0;
content: '';
width: 100%;
height: 82px;
background-color: #fff;
background-image: url('../images/bg_green.png');
background-repeat: no-repeat;
background-size: contain;
z-index: 1;
}
#explanation h2{
position: relative;
z-index: 2;
width: 59.6%;
margin: 0 auto;
padding: 10.667% 0 0;
}
@media (min-width: 751px){
#explanation::before{
height: 100px;
background-image: url('../images/bg_green_pc.png');
z-index: 1;
}
#explanation h2{
padding: 5% 0;
max-width: 447px;
}
}

/* title_cause、title_example */
.title_cause,.title_example{
line-height: 1.3;
margin-bottom:4.7767%;
color: #1e1e1e;
}
.title_cause > span:first-child,.title_example > span:first-child{
display: flex;
margin-bottom: 4.7767%;
align-items: center;
}
.title_cause > span:first-of-type > img:first-child,.title_example > span:first-of-type > img:first-child{
width: 15.072%;
min-width: 56px;
max-width: 100px;
margin-right: 2.986%;
}
.title_cause > span:nth-of-type(2),.title_example > span:nth-of-type(2){
line-height: 1.32;
display: block;
}
.title_cause > span:first-of-type > img:nth-child(2),.title_example > span:first-of-type > img:nth-child(2){
width: 12.453%;
min-width: 41.72px;
max-width: 74px;
}
.title_cause strong,.title_example strong{
font-weight: 400;
}
.title_cause + p,.title_example + p{
font-weight: 500;
}
@media (min-width: 751px){
.title_cause,.title_example{
margin-bottom: 5.834%;
}
.title_cause > span:first-child,.title_example > span:first-child{
margin-bottom: 5.834%;
}
.title_cause > span:first-of-type > img:first-child,.title_example > span:first-of-type > img:first-child{
width: 100px;
margin-right: 13px;
}
.title_cause > span:first-of-type > img:nth-child(2),.title_example > span:first-of-type > img:nth-child(2){
width: 94px;
}
.Cause .inner div{
width: 48%;
padding: 0;
}
.Cause .inner div:last-child{
 width: 37.34%; 
 }
.Cause .inner div p{
margin-bottom: 0;
}
}
#Cause01,#Cause03,#Cause05{
 background: #fff;
}
#Cause02,#Cause04{
 background: #F5F5F5;
}
.Cause .inner, .Example .inner{
margin:0 auto;
padding:8.95% 0;
}
@media (min-width: 751px){
.Cause .inner, .Example .inner{
width: 90.91%;
display: flex;
justify-content:space-between;
padding:3.637% 0;
}
}

/* Cause05 */
#Cause05 .button.col1{
width: 89.3334%;
}
@media (min-width: 751px){
#Cause05 .button.col1{
max-width: 59.09%;
margin-top:3.334%;
}
}

/* introduction */
#introduction{
position: relative;
overflow-x: hidden;
background: #fff url('../images/bg_introduction.png') no-repeat bottom center;
background-size: 100% auto;
background-repeat: no-repeat;
z-index: 1;
}
#introduction h4{
line-height: 1.5;
color: #fff;
text-align: center;
margin: 26.67% auto 8%;
}
#introduction img{
margin: 0 auto 10.667%;
display: block;
width: 89.334%;
}
@media (min-width: 751px){
#introduction{
background: #fff url('../images/bg_introduction_pc.png') no-repeat bottom center;
}
#introduction h4{
line-height: 1.625;
margin: 15% auto 80px;
}
#introduction img{
max-width: 1000px;
margin: 0 auto 80px;
}
}

/* Example01 */
#Example01{
padding-bottom: 10.667%;
position: relative;
overflow-x: hidden;
background: #fff url('../images/bg_yellow.png') no-repeat top center;
background-size: 100% auto;
background-repeat: no-repeat;
z-index: 1;
}
#Example01 h3{
padding: 11.94% 0 0;
}
.Example .inner{
padding-bottom: 0;
}
#Example01 ul{
display: flex;
margin-bottom: 35px;
justify-content: space-between;
}
#Example01 ul li{
width: 44.02%;
}
main > section .youtube{
margin: 0 20px;
}
main > section .youtube p{
margin-bottom: 10px;
}
main > section .youtube .wrapper{
position: relative;
width: 100%;
padding: 56.25% 0 0;
}
main > section .youtube iframe,
main > section .youtube video{
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
}
@media (min-width: 751px){
#Example01{
width: 100%;
background: #fff url('../images/bg_yellow_pc.png') no-repeat top center;
padding-bottom: 72px;
}
#Example01.Example .inner > div:first-child{
width: 30%;
 }
#Example01.Example .inner > div:last-child{
width: 48%;
 }
#Example01 ul{
display: block;
margin-bottom: 0;
width: 100%;
}
#Example01 ul li{
width: 100%;
}
#Example01 ul li img:first-child{
margin-bottom: 40px;
}
.title_example > span:nth-of-type(2){
margin-bottom: 40px;
}
main > section .youtube{
margin: 0;
}
}

/* form ☆*/
#downloadForm{
color: #fff;
position: relative;
z-index: 10;
}
#downloadForm h6{
margin: 0 0 14.925373134328358%;
text-align: center;
color: #fff;
background: #263247;
}
#downloadForm .wrapper{
position: relative;
padding: 40px 20px 19.2%;
}
#downloadForm dl dd{
margin-bottom: 7.606%;
}
#downloadForm dl dd label{
display: block;
}
#downloadForm dl dt{
margin-bottom: 2.66%;
}
#downloadForm dl dt span.required,#downloadForm dl dt span.optional{
display: none!important;
}
#downloadForm dl dd span.error_blank{
padding-top: 0.5em;
color: #ffff00;
}
#downloadForm input[type='text'],#downloadForm input[type='email'],#downloadForm input[type='tel'],#downloadForm textarea{
display: block;
width: 80%;
padding: 3.5917%;
border-radius: 1.5px;
outline: none;
font-size: 16px!important;
}
#downloadForm textarea{
width: 99%;
height: 6em;
margin-bottom: 54px;
}
#downloadForm input[type='radio'],#downloadForm input[type='checkbox']{
margin: 0 8px 17px 0;
border: 1px #95989a solid;
}
#downloadForm input[type='radio'],#downloadForm input[type='checkbox']{
display: none;
}
#downloadForm .radio01,#downloadForm .checkbox01{
position: relative;
display: block;
box-sizing: border-box;
width: auto;
padding-left: 26px;
cursor: pointer;
}
#downloadForm .radio01{
margin-bottom: 13px;
}
#downloadForm .radio01::before,#downloadForm .checkbox01::before{
position: absolute;
top: 50%;
left: 0;
display: block;
width: 16px;
height: 16px;
content: '';
border: 1px solid #231815;
background: #fff;
}
#downloadForm .radio01::before{
margin-top: -8px;
border-radius: 50%;
background: #fff;
}
#downloadForm .radio01::after,#downloadForm .checkbox01::after{
position: absolute;
top: 50%;
display: block;
content: '';
opacity: 0;
}
#downloadForm .radio01::after{
left: 4px;
width: 10px;
height: 10px;
margin-top: -4px;
border-radius: 50%;
background: #1e1e1e;
z-index: 2;
}
#downloadForm .checkbox01::before{
transform: translateY(-50%);
}
#downloadForm .checkbox01::after{
left: 5px;
width: 5px;
height: 9px;
margin-top: -8px;
transform: rotate(45deg);
border-right: 3px solid #1e1e1e;
border-bottom: 3px solid #1e1e1e;
}
#downloadForm input:checked + label.radio01::after{
opacity: 2;
}

#downloadForm input[type=radio]:checked + .radio01::after,
#downloadForm input[type='checkbox']:checked + .checkbox01::after{
opacity: 2;
}
#downloadForm .radio01 a,#downloadForm .checkbox01 a{
display: inline-block;
position: relative;
z-index: 2;
}
#downloadForm #form_submit{
position: absolute;
bottom:0;
left:0;
height: 77px;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}
#downloadForm #form_submit input{
width: 78.666666666666667%;
height: 52px;
border: 1px #fff solid;
pointer-events: none;
background: #fa5539;
color: #fff;
font-size: 1.0625em;
}
#downloadForm #form_submit input.is-active{
pointer-events: all;
cursor: pointer;
}
#downloadForm .inner{
padding-bottom: 24%;
position: relative;
}
#downloadForm .inner > p:first-child{
margin-bottom: 8.955223880597014%;
}
#downloadForm .inner .interest_inner{
 margin: 0 0 29.850746268656716%;
}
#downloadForm .inner fieldset .radio01,
#downloadForm .inner fieldset .checkbox01{
display: inline-block;
width: 31.641791044776119%;
}
#downloadForm .inner hr{
 width: 100%;
 padding: 0 20px;
 border-bottom: 1px #5F7294 solid;
 position: absolute;
 top:18%;
 left: 0;
}
@media (min-width: 751px){
#downloadForm .wrapper{
position: relative;
padding: 80px 0 205px;
}
#downloadForm h6{
margin: 0 0 6.667%;
}
#downloadForm .inner{
display: flex;
padding: 0 100px 80px;
}
#downloadForm .inner > p{
width: 32.5%;
}
#downloadForm .inner > p:first-child{
text-align: left;
}
#downloadForm .inner .interest_inner{
 margin: 0 0 19.70%;
}
#downloadForm .inner fieldset .radio01,
#downloadForm .inner fieldset .checkbox01{
width: 22.667%;
}
#downloadForm .inner hr{
 padding: 0 100px;
 top:10%;
 left: 100px;
 max-width: 1000px;
 width:calc(100% - 200px);;
}
#downloadForm .inner > div{
width: 67.5%;
}
#downloadForm dl dd{
margin-bottom: 30px;
}
#downloadForm input[type='text'],#downloadForm input[type='email'],#downloadForm input[type='tel']{
width: 45.037037037037037%;
padding: 8px;
}
#downloadForm textarea{
width: 100%;
margin-bottom: 60px;
}
#downloadForm .radio01{margin-bottom: 15px}
#downloadForm #form_submit{
height: 150px;
}
#downloadForm #form_submit input{
max-width: 397px;
height: 70px;
font-size: 22px;
}
}


/* footer_button ☆*/
.footer_button{
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 10;
}
.footer_button a,.footer_button button,.footer_button input[type=submit]{
background: none;
}
.footer_button a{
line-height: 3.375;
position: relative;
padding-right: 6%;
text-decoration: none;
}
.footer_button a::after{
position: absolute;
top: 50%;
right: 0;
display: inline-block;
width: .375em;
height: .6875em;
content: '';
transform: translateY(-50%);
vertical-align: middle;
background-image: url('../images/icon_arrow.png');
background-repeat: no-repeat;
background-size: contain;
}
.footer_button button,.footer_button input[type=submit]{
line-height: 3;
display: block;
width: 100%;
margin: 2.66% 10.66%;
border: 1px #fff solid;
}
#fixed_button{
position: fixed;
bottom: 0; 
right: 0;
width: 100%;
z-index: 5;
display: flex;
justify-content: space-between;
}
#fixed_button a{
width: 50%;
padding:4.748% 5.868%;
text-decoration: none;
text-align: center;
}
#fixed_button a span{
position: relative;
padding-right: 10.134%;
}
#fixed_button a span::after{
position: absolute;
top: 51%;
right: 0;
display: inline-block;
width: .375em;
height: .6875em;
content: '';
transform: translateY(-51%);
background-image: url('../images/icon_arrow.png');
background-repeat: no-repeat;
background-size: contain;
}
.is-active {
opacity: 1;
transition: all 1s;
}
.is-hidden {
opacity: 0;
transition: all 1s;
}
@media (min-width: 751px){
#fixed_button{
max-width: 280px;
height: 160px;
bottom:inherit;
top:0;
filter: drop-shadow(0 3px 6px rgba(0,0,0,.3));
flex-direction: column;
}
#form_submit{
width: 100%;
}
.footer_button input[type=submit]{
width: 397px;
margin: 40px auto;
}
#fixed_button a{
width: 100%;
padding:26.2px 25px;
text-align: left;
}
#fixed_button a span{
padding-right: 28px;
max-width: 220px;
display: block;
}
}

/* footer ☆*/
footer{
display: flex;
height: 55px;
align-items: center;
justify-content: center;
position: relative;
z-index: 10;
}

/* other page ☆*/
body#download{
max-width:inherit;
background: #fff;
}
#download main li a{color: #1e1e1e;}
#download header{
height: 79px;
border-bottom: 1px #468992 solid;
background: #fff;
display: flex;
justify-content: space-between;
align-items: center;
box-sizing: content-box;
}
#download header > a:first-child{
max-width: 160px;
margin: 0 0 0 20px;
padding: 0;
border: none;
height: inherit;
}
#download header > a:last-child{
max-width: 250px;
margin: 0;
padding: 0;
border: none;
}
#download header > a:hover{
opacity: inherit;
}
#download main{
margin: 0 auto;
background: none;
display: flex;
justify-content: center;
min-height: calc(100vh - 134px);
line-height: 2;
}
#download main section{
padding: 2em 1em;
width: 100%;
}
#download main section h1{
margin-bottom: 2rem;
line-height: 1.3
}
#download main section p:first-of-type{
margin-bottom: 1em;
}
.dl_button{
display: flex;
width: 20em;
margin: 0 auto 1em;
padding: 1rem 0;
text-decoration: none;
border: 2px #FA5539 solid;
align-items: center;
justify-content: center;
background: #FA5539;
color: #fff;
}
.dl_button span{
position: relative;
padding-right: 6.67%;
}
.dl_button span::after{
position: absolute;
top: 51%;
right: 0;
display: inline-block;
width: .375em;
height: .6875em;
content: '';
transform: translateY(-51%);
background-image: url('../images/icon_arrow.png');
background-repeat: no-repeat;
background-size: contain;
}
.dl_button:hover{
background: #fff;
color: #FA5539;
transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
}
#download main ul,
#download main dl{
margin: 2em auto;
padding: 1em 2em;
background: #F5F5F5;
width: 100%;
}
#download main li{width: 24em;
margin: 0 auto;
text-align: left;
}
#download main li a{
display: inline-block;
}
#download main dt{
width: 100%;
padding-right: 1em;
font-weight: bold;
}
#download main dd{
width: 100%;
text-align: left;
padding-right: 1em;
margin-bottom: 0.5em;
}
#download main .wrapper{
display: flex;
padding: 1rem 0;
align-items: center;
justify-content:space-between;
}
#download main .wrapper input{
display: flex;
width: 48%;
padding: 1rem 0;
text-decoration: none;
box-sizing: border-box;
border: 1px #1e1e1e solid;
background: #fff;
}
#download main .wrapper input:hover{
cursor: pointer;
opacity: .5;
}
#download main .wrapper input:first-of-type{
}
#download main .wrapper input:last-of-type{
border: 1px #FA5539 solid;
background: #FA5539;
color: #fff;
}
#download main .home{
display: flex;
width: 22em;
margin: 0 auto;
padding:.5em;
border-radius: 1.5em; 
text-decoration: none;
color: #1e1e1e;
border: 1px #1e1e1e solid;
align-items: center;
justify-content: center;
font-size: 13px;
}
#download main .home:hover{
opacity: 0.5;
}
@media (min-width: 751px){
#download header > a:first-child{
margin: 0 0 0 100px;
}
#download main section{
margin: 5em 1em;
text-align: center;
}
#download main section h1{
margin-bottom: 5rem;
line-height: 1.3
}
#download main ul{
margin: 2em auto 5em;
padding: 1em 2em;
background: #F5F5F5;
width: 80%;
}
#download main dl{
display: flex;
flex-wrap: wrap;
}
#download main dt{
width: 42%;
text-align:right;
}
#download main dd{
width: 58%;
}
#download main .wrapper{
width: 30em;
margin: 0 auto 1em;
}
#download main .wrapper input{
width: 14em;
}
}

/* 20230129 ☆*/
#TrackRecord{
background: #C1DBDA;
padding: 20px 0;
}
#TrackRecord .inner{
background: #E2EFF3;
position: relative;
}
.button.left{
width: 100%;
z-index: 5;
display: flex;
justify-content: center;
max-width: 44.77%;
padding:2.84% 0;
text-decoration: none;
margin-left: auto;
}
.button.left span{
position: relative;
padding-right: 8.4%;
line-height: 1;
}
.button.left span::after{
position: absolute;
top: 51%;
right: 0;
display: inline-block;
width: .375em;
height: .6875em;
content: '';
transform: translateY(-51%);
background-image: url('../images/icon_arrow.png');
background-repeat: no-repeat;
background-size: contain;
}
@media (min-width: 751px){
.button.left{
width: 30%;
position: absolute;
 top:0;
 right: 0;
 }
 .button.left:hover{
  opacity: .7;
 }
}
#TrackRecord .inner .pickup_wrapper{
width: 88.059701492537313%;
margin: 0 auto 5.373%;
}
#TrackRecord .inner h4{
text-align: center;
margin-bottom: 5.373%;
}
ul.list{
padding: 0 20px 5.373%;
}
ul.list li{
line-height:1.3;
padding: 0 0 0.5em;
margin-left: 1em;
font-weight: 600;
list-style: disc;
list-style-position:outside;
}
#TrackRecord .pickup_player{
width: 70.2987%;
margin: 0 auto;
line-height: 1;
}
#TrackRecord .pickup_player img{
display: block;
}
@media (min-width: 751px){
#TrackRecord .inner .pickup_wrapper{
width: 52.727272727272727%;
padding: 3.637% 0 0 4.546%;
margin: 0;
}
#TrackRecord .inner h4{
text-align: left;
margin: 2.545% 0 0 4.546%;
}
ul.list{
padding: 3.273% 0 5.455% 4.546%;
}
#TrackRecord .pickup_player{
position: absolute;
 bottom:0;
 right: 4.546%;
 width: 42.818%;
margin: 0 auto;
line-height: 1;
}
}

/* exercise */
#exercise{
position: relative;
overflow-x: hidden;
background: #126D7A url('../images/bg_exercise.png') no-repeat top center;
background-size: 100% auto;
background-repeat: no-repeat;
z-index: 1;
}
#exercise .inner{
margin:0 auto;
padding: 10.667% 20px 8.95%;
}
#exercise h4{
text-align: center;
margin-bottom: 8.115%;
}
#exercise h5{
text-align: center;
 color: #179BAD;
margin:  10.667% auto 8.95%;
}
#exercise .inner a{
 margin: 0 20px;
}
@media (min-width: 751px){
#exercise{
background: #126D7A url('../images/bg_exercise_pc.png') no-repeat top center;
}
#exercise .inner{
margin:0 auto;
padding: 5% 0 0;
}
#exercise h4{
margin-bottom: 6%;
}
#exercise .youtube{
width: 43.916%;
 margin: 0 auto;
 }
#exercise h5{
text-align: center;
 color: #179BAD;
margin:  8.334% auto 6.667%;
}
#exercise .inner a{
 margin: 0 auto 8.334%;
width: 43.916%;
}
}
@media screen and (min-width:767px) and (max-width:1024px){
header #header_wrapper{
justify-content: flex-start;
flex-direction:row;
padding: 28px 0 0 3.255208333333334%;
}
header h1{
margin: 10.026041666666667% 0 48px 3.255208333333334%;
line-height:40px;
}
header > p,header > img{
margin-left:3.255208333333334%;
}
}
@media (max-width: 750px){
header #header_wrapper > p{
line-height:1;
}
}
/* for PC/SP☆*/
@media (max-width: 750px){
.for_pc{display: none!important;}
.for_sp{display: block!important;}
}

@media (min-width: 751px){
.for_sp{display: none!important;}
.for_pc{display: block!important;}
}