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

/* 中身-モバイルファースト======================================================================================================== */
#message{
background: #C7CACD;
background-image: -webkit-image-set(url(../images/bg.png) 1x, url(../images/bg@2x.png) 2x),radial-gradient(circle, #fff 0%, #C7CACD 200%);
background-repeat: no-repeat, no-repeat;
background-position: 10vw bottom, left top;
background-size: auto 110%, auto;
padding-top: 20vw;
padding-bottom: 20vw;
}
#message .contents_size{
position: relative;
}
#message .text{
position: relative;
z-index: 100;
}
#message .text .common_title .en{
padding-bottom: 5vw;
color: rgba(0, 0, 0, .1);
}
#message .text .common_title h2{
font-size: 5.5vw;
text-shadow:0px 0px 10px #fff, 0px 0px 10px #fff, 0px 0px 10px #fff, 0px 0px 10px #fff, 0px 0px 10px #fff;
}
#message .text .name span{
font-size: 18px;
}
#message .photo{
width: 45%;
position: absolute;
top: -8vw;
right: -8vw;
}


.box{
margin-top: 20vw;
position: relative;
}
.box .text h3{
display: inline-block;
font-size: 6vw;
margin-bottom: 10px;
position: relative;
text-shadow:0px 0px 10px #fff, 0px 0px 10px #fff, 0px 0px 10px #fff, 0px 0px 10px #fff, 0px 0px 10px #fff;
}
.box .text h3::before{
content: "";
display: block;
width: auto;
height: 120%;
min-height: 30vw;
aspect-ratio: 1/1;
background: #cae6ad;
background: radial-gradient(circle,#cae6ad 0%, rgba(255,255,255,0) 70%);
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
-webkit-transform: translateY(-50%) translateX(-50%);
margin: auto;
z-index: -1;
}

.box .text h4{
font-size: 4.5vw;
margin-bottom: 10px;
}
.box .text p{
margin-top: 1em;
}
.box .text p:first-child{
margin-top: 0;
}
.box .photo{
margin-top: 20px;
}


.box#box01 .photo{
margin-top: 0px;
margin-left: 0;
width: 35vw;
position: absolute;
top: -35vw;
right: -3vw;
}



/* PCのみ======================================================================================================== */
@media print, screen and (min-width: 751px){
#message{
background-position: 110% -100px, left top;
background-size: auto, auto;
padding-top: 12vw;
padding-bottom: 12vw;
}
#message .text{
padding-top: 0;
}
#message .text .common_title .en{
color: rgba(85, 85, 85, .2);
padding-bottom: 1vw;
padding-top: 2vw;
}
#message .text .common_title h2{
font-size: 3vw;
}
#message .text .common_btn{
text-align: left;
margin-top: 40px;
}

#message .text .name span{
font-size: 20px;
}
#message .photo{
width: 16vw;
max-width: 320px;
top: 10vw;
right: inherit;
left: 48vw;
}

.box{
display: flex;
margin-top: 6vw;
}
.box:nth-child(odd){
flex-direction: row-reverse;
}
.box .text{
flex: 1;
}
.box .text h3{
font-size: max(2.8vw,40px);
margin-bottom: 10px;
}
.box .text h3::before{
min-height: 15vw;
}
.box .text h4{
font-size: max(1.8vw,24px);
margin-bottom: 10px;
}
.box:nth-child(odd) .photo{
margin-right: 5vw;
}
.box:nth-child(even) .photo{
margin-left: 5vw;
}
.box .text p{
font-size: 20px;
}


.box#box01 .text{
flex: inherit;
padding-right: 280px;
}
.box#box01 .photo{
width: auto;
top: inherit;
bottom: 0;
right: 0;
}



}