@charset "UTF-8";
/* CSS Document */

/* 中身-モバイルファースト======================================================================================================== */

.js-open-modal{
cursor: pointer;
}
.swiper-slide{
text-align: center;
}
.modal img{
aspect-ratio: 3/2;
object-fit: contain;
margin-right: auto;
margin-left: auto;
max-height:90vh;
}
.modal__content{
max-width: 1040px;
}


#introduction .alpha{
text-align: center;
}
#introduction h2{
font-size: 30px;
}
#introduction h2 + p{
margin-bottom: 20px;
text-align: left;
}
#introduction h3{
font-size: 20px;
margin-bottom: 20px;
}
#introduction .point{
background-color: #eee;
padding: 15px;
}
#introduction .point li{
font-size: 18px;
padding: 10px 0;
margin-bottom: 10px;
border-bottom: solid 1px #ccc;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
#introduction .point li:last-child{
margin-bottom: 0px;
border-bottom: none;
}
#introduction .point li > *{
line-height: 1;
}
#introduction .point li .icon img{
height: 30px;
margin-right: 5px;
}

#introduction .type li{
margin-bottom: 10px;
}
#introduction .type li:last-child{
margin-bottom: 0px;
}
#introduction .type li em{
display: block;
font-size: 18px;
background-color: #111;
color: #fff;
padding: 10px;
}

#introduction .structure li{
margin-bottom: 10px;
text-align: center;
}
#introduction .structure li:last-child{
margin-bottom: 0px;
}
#introduction .structure li em{
display: block;
font-size: 18px;
line-height: 1.2;
background-color: #111;
color: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 52px;
}
#introduction .structure li em span{
display: block;
font-size: 14px;
}


#example h2 + p{
margin-bottom: 20px;
}
#example .article .box{
margin-bottom: 40px;
}
#example .article dl{
display: flex;
align-items: center;
margin-bottom: 20px;
}
#example .article dt{
display: flex;
line-height: 1.4;
align-items: center;
}
#example .article dt .t{
font-size: 3vw;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
}
#example .article dt .n{
font-size: 8vw;
margin-top: -0.1em;
}
#example .article dd{
font-size: 5.5vw;
line-height: 1.4;
padding-left: .5em;
margin-left: .5em;
border-left: solid 2px #111;
}
#example .article .photo{
position: relative;
}
#example .article .photo p{
width: 100%;
text-align: center;
background-color: rgba(0,0,0,.5);
color: #fff;
padding: 10px 0;
position: absolute;
left: 0;
bottom: 0;
}
#example .article .photo img{
/* aspect-ratio: 3/2;
object-fit: contain; */
vertical-align: top;
}
#example .article .photo + .common_btn{
margin-top: 10px;
}

#support .alpha{
margin-bottom: 20px;
}
#support .alpha .photo{
margin-bottom: 10px;
}

#support .beta{
text-align: center;
margin-bottom: 20px;
}
#support .beta h3{
font-size: 20px;
}
#support .beta ul{
display: flex;
justify-content: center;
margin: 10px 0;
}
#support .beta li{
font-size: 4vw;
border-right: solid 1px #111;
padding-right: 0.5em;
margin-right: 0.5em;
}
#support .beta li:last-child{
border-right: none;
padding-right: 0;
margin-right: 0;
}

#support .list li{
margin-bottom: 20px;
}
#support .list li:last-child{
margin-bottom: 0px;
}
#support .list li .box{
display: flex;
align-items: center;
justify-content: space-between;
background-color: #eee;
padding: 20px;
}
#support .list li .box .icon{
width: 20%;
}
#support .list li .box .icon img{
aspect-ratio: 1/1;
}
#support .list li .box .text{
flex: 1;
margin-left: 1em;
text-align: right;
}
#support .list li .box .text h3{
font-size: 16px;
font-weight: bold;
text-align: left;
}
#support .list li .box .text p{
text-align: left;
font-size: 12px;
}
#support .list li .box .text .btn{
display: inline-block;
background-color: #fff;
font-size: 12px;
text-align: center;
padding: 5px 4em;
margin-top: 5px;
border-radius: 100px;
}
#support .list li.caption{
text-align: right;
}



/* PCのみ======================================================================================================== */
@media print, screen and (min-width: 751px){

#introduction h2{
font-size: 60px;
}#introduction h2 + p{
padding: 0 150px;
margin-bottom: 60px;
}
#introduction h3{
font-size: 24px;
margin-bottom: 30px;
}
#introduction .point{
display: flex;
justify-content: space-between;
}
#introduction .point li{
width: 30%;
font-size: 20px;
border-bottom: none;
margin-bottom: 0px;
position: relative;
}
#introduction .point li::after{
content: "";
display: block;
width: 2px;
height: 50px;
background-color: #111;
position: absolute;
top: 50%;
right: -35px;
transform: translateY(-50%) rotate(45deg);
-webkit-transform: translateY(-50%) rotate(45deg);
margin: auto;
}
#introduction .point li:last-child:after{
display: none;
}

#introduction .type{
display: flex;
}
#introduction .type li{
margin-bottom: 0px;
width: 25%;
border-right: solid 1px #fff;
}
#introduction .type li:last-child{
border-right: none;
}
#introduction .type li img{
width: 100%;
}
#introduction .type li em{
font-size: 24px;
}

#introduction .structure{
display: flex;
justify-content: space-between;
}
#introduction .structure li{
margin-bottom: 0px;
width: 390px;
}
#introduction .structure li em{
font-size: 24px;
height: 60px;
}
#introduction .structure li em span{
font-size: 16px;
}


#example{
}
#example h2 + p{
font-size: 20px;
text-align: center;
margin-bottom: 60px;
}
#example .article .box{
margin-bottom: 60px;
}

#example .article dt{
line-height: 1;
}
#example .article dt .t{
font-size: 24px;
margin-right: 10px;
}
#example .article dt .n{
font-size: 60px;
}
#example .article dd{
font-size: 30px;
min-height: 60px;
display: flex;
align-items: center;
border-width: 3px;
}
#example .article .box{
text-align: center;
}
#example .article .photo{
width: 1000px;
margin: 0 auto;
}
#example .article .photo p{
padding: 15px 0;
}


#support .alpha{
display: flex;
align-items: center;
margin-bottom: 60px;
}
#support .alpha .photo{
margin-bottom: 0px;
margin-right: 60px;
}
#support .alpha .text{
flex: 1;
font-size: 20px;
}

#support .beta{
margin-bottom: 100px;
}
#support .beta h3{
font-size: 30px;
}
#support .beta ul{
margin: 40px 0;
}
#support .beta li{
font-size: 30px;
padding: 0 60px;
}
#support .beta p{
font-size: 20px;
}

#support .list ul{
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}
#support .list li{
width: 590px;
}
#support .list li .box{
transition: all 0.2s ease;
}
#support .list li .box:hover{
background-color: #ddd;
}
#support .list li .box .icon{
width: 70px;
}
#support .list li .box .text{
}
#support .list li .box .text h3{
font-size: 20px;
}
#support .list li .box .text p{
font-size: 16px;
}





}