@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_business_white.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_business_white.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*/


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


.business_content_margin_90 {
display: flex; /* 画面に合わせた拡大縮小*/
margin: 0 auto;
width: 90%; /* 画面に合わせた左右のマージン確保*/
margin-top: 5%;

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


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


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

.page_business_02 {
display: flex;
height: auto;
margin: 0 auto;
}/*OK*/

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

.page_business_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_business_text_02 {
max-width: 80vw;
font-weight: 800;
margin-top: 15%;
text-align: center;
font-size: clamp(18px, 2.8vw, 20px);/* 最小値（18px）：推奨値（2.8vw）：：最大値（20px） */
line-height: 3.56;
color: #606060;
}/*OK*/


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



.page_business_message_box {
display: flex;
margin: 0 auto;
@media screen and (min-width:1000px) { /* 1000px以上の時*/
width: 50%;
}

@media screen and (max-width:999px) { /* 999px以下の時*/
width: 100%;
}	
}/*OK*/

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

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

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


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


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

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

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


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


.page_business_img_box{
display: flex;
margin: 0 auto;
max-width: 1260px;
width: 100%;
margin-bottom: 1%;
margin-top: -8%;
}/*OK*/

.business_img_margin_90 {
display: flex; /* 画面に合わせた拡大縮小*/
margin: 0 auto;
width: 100%; /* 画面に合わせた左右のマージン確保*/
margin-top: 5%;

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


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


.page_business_img_01 {
background-size: cover;
background-position: center;
background-repeat: no-repeat; /* 画像を繰り返さない */

@media screen and (min-width:962px) { /* 1200px以上の時*/
background-image: url(../image/page_img/business_img_pc_01.webp);
aspect-ratio: 1260 / 600;
width: 100%;
max-width: 100%;
height: auto;
margin: 0 auto;
}
	
@media screen and (min-width: 768px) and (max-width: 961px)  {
background-image: url(../image/page_img/business_img_tab_01.webp);
aspect-ratio: 961 / 600;
width: 100%;
max-width: 100%;
height: auto;
margin: 0 auto;
}

@media screen and (max-width:767px) { /* 767px以下の時*/
background-image: url(../image/page_img/business_img_sp_01.webp);
aspect-ratio: 727 / 600;
width: 100%;
max-width: 100%;
height: auto;
margin: 0 auto;
}
}/*OK*/


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


.page_business_img_02 {
background-size: cover;
background-position: center;
background-repeat: no-repeat; /* 画像を繰り返さない */

@media screen and (min-width:962px) { /* 1200px以上の時*/
background-image: url(../image/page_img/business_img_pc_02.webp);
aspect-ratio: 1260 / 600;
width: 100%;
max-width: 100%;
height: auto;
margin: 0 auto;
}
	
@media screen and (min-width: 768px) and (max-width: 961px)  {
background-image: url(../image/page_img/business_img_tab_02.webp);
aspect-ratio: 961 / 600;
width: 100%;
max-width: 100%;
height: auto;
margin: 0 auto;
}

@media screen and (max-width:767px) { /* 767px以下の時*/
background-image: url(../image/page_img/business_img_sp_02.webp);
aspect-ratio: 727 / 600;
width: 100%;
max-width: 100%;
height: auto;
margin: 0 auto;
}
}/*OK*/


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


.page_business_img_03 {
background-size: cover;
background-position: center;
background-repeat: no-repeat; /* 画像を繰り返さない */

@media screen and (min-width:962px) { /* 1200px以上の時*/
background-image: url(../image/page_img/business_img_pc_03.webp);
aspect-ratio: 1260 / 600;
width: 100%;
max-width: 100%;
height: auto;
margin: 0 auto;
}
	
@media screen and (min-width: 768px) and (max-width: 961px)  {
background-image: url(../image/page_img/business_img_tab_03.webp);
aspect-ratio: 961 / 600;
width: 100%;
max-width: 100%;
height: auto;
margin: 0 auto;
}

@media screen and (max-width:767px) { /* 767px以下の時*/
background-image: url(../image/page_img/business_img_sp_03.webp);
aspect-ratio: 727 / 600;
width: 100%;
max-width: 100%;
height: auto;
margin: 0 auto;
}
}/*OK*/