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

#page_title{
background-image: url(images/pagetitle_bg.jpg);
background-image: -webkit-image-set(url(images/pagetitle_bg.jpg) 1x, url(images/pagetitle_bg@2x.jpg) 2x);
}

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

#top_copy h3{
text-align: center;
font-weight: 900;
margin-bottom: 5vw;
}
#top_copy h3 span{
font-size: 9.5vw;
color: #ea5504;
display: block;
}

#top_copy ul{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#top_copy li{
width: 48%;
}
#top_copy li .inner{
aspect-ratio: 1/1;
border: solid 2px #ea5504;
text-align: center;
color: #ea5504;
font-weight: 700;
border-radius: 50%;
position: relative;
padding-top: 40%;
}
#top_copy li:first-child{
width: 100%;
}
#top_copy li:first-child .inner{
width: 48%;
padding-top: 20%;
margin: 0 auto;
}
#top_copy li .illust{
position: absolute;
top: -20px;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
margin: 0 auto;
}
#top_copy li .illust img{
height: 80px;
}
#top_copy li p{
font-size: 3vw;
}
#top_copy li em{
font-size: 4.5vw;
}


#top_copy .comment{
display: flex;
align-items: center;
justify-content: center;
margin-top: 40px;
}
#top_copy .comment .illust{
width: 20vw;
}
#top_copy .comment p{
flex: 1;
font-weight: 700;
margin-right: 1em;
position: relative;
}
#top_copy .comment p::before,
#top_copy .comment p::after{
content: "";
display: block;
width: 60px;
height: 2px;
background-color: #111;
position: absolute;
right: 0;
}
#top_copy .comment p::before{
-webkit-transform: rotate(15deg);
transform: rotate(15deg);
top: -10px;
}
#top_copy .comment p::after{
-webkit-transform: rotate(-15deg);
transform: rotate(-15deg);
bottom: -10px;
}


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

#top_copy{
}
#top_copy h3{
white-space: nowrap;
}
#top_copy h3 img{
width: 600px;
margin: 0 auto;
}
#top_copy h3 span{
font-size: 40px;
}

#top_copy ul{
justify-content: center;
}
#top_copy li{
width: 25%;
margin: 0 2%;
}
#top_copy li .inner{
}
#top_copy li:first-child{
width: 25%;
}
#top_copy li:first-child .inner{
width: 100%;
padding-top: 40%;
}
#top_copy li .illust{
top: -4vw;
}
#top_copy li .illust img{
height: 12vw;
}
#top_copy li p{
font-size: 1.5vw;
}
#top_copy li em{
font-size: 2vw;
}


#top_copy .comment .illust{
width: 150px;
}
#top_copy .comment p{
flex: inherit;
font-size: 20px;
}
#top_copy .comment p::before,
#top_copy .comment p::after{
height: 3px;
}


}