@charset "UTF-8";

Theme Name: made_in_heaven_theme

html {
-webkit-text-size-adjust: 100%;
}


body {
display: block;
font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
}



/* --------------------------------------------- */
/* --------------------------------------------- */


.page_title_en {
background-image: url(../image/page_img/en_mission_pt.webp);
background-size: cover;
background-position: center;
background-repeat: no-repeat; /* 画像を繰り返さない */
aspect-ratio: 800 / 90;
width: 800px;
height: auto;
margin: 0 auto;
margin-top: 5%;
margin-bottom: 2%;
}/*OK*/


/* --------------------------------------------- */

.page_title_jp {
background-image: url(../image/page_img/jp_mission_pt.webp);
background-size: cover;
background-position: center;
background-repeat: no-repeat; /* 画像を繰り返さない */
aspect-ratio: 800 / 35;
width: 800px;
height: auto;
margin: 0 auto;
margin-top: 2%;
margin-bottom: 5%;
}/*OK*/


/* --------------------------------------------- */
/* --------------------------------------------- */
/* --------------------------------------------- */


.contact_margin {
display: flex; /* 画面に合わせた拡大縮小*/
margin: 0 auto;
width: 40%; /* 画面に合わせた左右のマージン確保*/
	
@media screen and (min-width:961px) { /* 961px以上の時*/
width: 50%; /* フルスクリーンの時の画面サイズ*/
}

@media screen and (min-width:1320px) { /* 1320px以上の時*/
width: 100%; /* フルスクリーンの時の画面サイズ*/
}
}/*OK*/

/* --------------------------------------------- */
/* --------------------------------------------- */
/* --------------------------------------------- */

.contact_botton_box {
display: flex; /* 画面に合わせた拡大縮小*/
margin: 0 auto;
aspect-ratio: 270 / 70;
width: 800px;
height: auto;
}/*OK*/

.contact_botton img{
display: flex;
width: 100%;
height: auto;
justify-content: center; /* 水平中央寄せ */
align-items: center;     /* 垂直中央寄せ */

}

.contact_botton {
display: flex;
max-width: 270px; /* 画像に合わせた拡大縮小*/
max-height: 70px;
width: 100%;
height: auto;
border: 4px solid #5DC6DA;
background-color: #FFFFFF;
text-align: center;
vertical-align: middle; 
border-radius: 40px;
position: relative;
z-index: 1;
overflow: hidden;
transition: .4s;
margin: 0 auto;
}

.contact_botton:before {
content: "";
width: 120%;
height: 200%;
position: absolute;
top: -50%;
right: 0;
z-index: -1;
background-color: #ADE2EC;
border-radius: 0 100% 100% 0;
transform: translateX(-100%);
transition: transform ease .4s;
}

.contact_botton:hover {
}

.contact_botton:hover::before {
transform: translateX(10%);
}/*OK*/


/* --------------------------------------------- */
/* --------------------------------------------- */
/* --------------------------------------------- */



.page_mission_01 {
display: flex;
height: auto;
margin: 0 auto;
margin-top: -10%;
margin-bottom: 15%;
}/*OK*/

.page_mission_02 {
display: flex;
height: auto;
margin: 0 auto;
padding-top: 15%;
padding-bottom: 3%;
}/*OK*/

.page_mission_03 {
display: flex;
height: auto;
margin: 0 auto;
padding-top: 0%;
padding-bottom: 0%;
}/*OK*/

.page_mission_text_01 {
max-width: 80vw;
font-weight: 400;
margin-top: 15%;
text-align: center;
font-size: clamp(14px, 2.5vw, 16px);/* 最小値（14px）：推奨値（2.5vw）：：最大値（16px） */
line-height: 3.56;
color: #606060;
}/*OK*/

.page_mission_text_02 {
max-width: 80vw;
font-weight: 800;
margin-top: 15%;
text-align: center;
font-size: clamp(18px, 2.8vw, 20px);/* 最小値（18px）：推奨値（3.2vw）：：最大値（24px） */
line-height: 3.56;
color: #606060;
}/*OK*/


/* --------------------------------------------- */
/* --------------------------------------------- */
/* --------------------------------------------- */



.page_mission_message_box {
display: flex;
margin: 0 auto;
margin-bottom: 10%;
@media screen and (min-width:1000px) { /* 1000px以上の時*/
width: 80%;
}
@media screen and (min-width: 768px) and (max-width: 999px)  {
width: 70%;
}	
@media screen and (max-width:767px) { /* 999px以下の時*/
width: 60%;
}	
}/*OK*/

.page_mission_message_01 {
display: flex;
margin: 0 auto;
max-width: 600px;
width: 80%;
height: auto;
margin-top: 10%;
}/*OK*/

.page_mission_message_02 {
display: flex;
margin: 0 auto;
max-width: 600px;
width: 90%;
height: auto;
}/*OK*/

.page_mission_message_img img{
width: 100%;       /* 親要素の幅いっぱいに広げる */
max-width: 600px;  /* ただし、最大でも600pxまで */
height: auto;      /* 縦横比を維持 */
}/*OK*/


/* --------------------------------------------- */
/* --------------------------------------------- */
/* --------------------------------------------- */


.features_title_oshikatsu {
background-image: url(../image/page_img/features_title_oshikatsu.webp);
background-size: cover;
background-position: center;
background-repeat: no-repeat; /* 画像を繰り返さない */
aspect-ratio: 800 / 160;
width: 100%;
height: auto;
margin: 0 auto;
}/*OK*/


/* --------------------------------------------- */
/* --------------------------------------------- */


.subhead_title_vision{
background-image: url(../image/page_img/vision_title.webp);
background-size: cover;
background-position: center;
background-repeat: no-repeat; /* 画像を繰り返さない */
aspect-ratio: 600 / 80;
width: 100%;
max-width: 600%;
height: auto;
margin: 0 auto;
}/*OK*/


.subhead_title_origin{
background-image: url(../image/page_img/origin_title.webp);
background-size: cover;
background-position: center;
background-repeat: no-repeat; /* 画像を繰り返さない */
aspect-ratio: 600 / 80;
width: 100%;
max-width: 600%;
height: auto;
margin: 0 auto;
}/*OK*/


/* --------------------------------------------- */
/* --------------------------------------------- */



.page_mission_origin_logo_box{
display: flex;
margin: 0 auto;
width: 100%;
margin-bottom: 10%;
}/*OK*/

.page_mission_origin_logo{
display: flex;
margin: 0 auto;
max-width: 600px;
width: 100%;
height: auto;
}/*OK*/

.page_mission_origin_logo_img{
background-image: url(../image/page_img/mission_logo.webp);
background-size: cover;
background-position: center;
background-repeat: no-repeat; /* 画像を繰り返さない */
aspect-ratio: 600 / 500;
width: 100%;
max-width: 600%;
height: auto;
margin: 0 auto;
}/*OK*/