@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;
}



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

.content_box{
display: flex; /* 画面に合わせた拡大縮小*/
margin: 0 auto;
width: 100%;
	
 /* スクロール連動アニメーション */
  animation: fadeIn linear;
  animation-timeline: view();
  animation-range: entry 0% cover 50%;
}

/* サポートされていない場合のフォールバック */
@supports not (animation-timeline: view()) {
  .item {
    opacity: 1;
    transform: none;
  }
}/*OK*/


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



.page_title_back {
display: block;
width: 100%;
height: auto;
background-repeat: no-repeat; /* 画像を繰り返さない */
background-size: cover; /* 画面全体を覆うように拡大縮小 */
background-position: center; /* 中央寄せ */

@media screen and (min-width:1200px) { /* 1200px以上の時*/
background-image: url(../image/page_img/page_title_sq_back.webp);
padding-top: 5%;
padding-bottom: 5%;
}
	
@media screen and (min-width: 768px) and (max-width: 1199px)  {
background-image: url(../image/page_img/page_title_sq_back.webp);
padding-top: 10%;
padding-bottom: 10%;
}

@media screen and (max-width:767px) { /* 767px以下の時*/
background-image: url(../image/page_img/page_title_sq_back_sp.webp);
padding-top: 20%;
padding-bottom: 20%;
}
}/*OK*/




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


.page_title_box{
display: block;
width: 100%;
height: auto;
padding-top: 5%;
padding-bottom: 5%;
}/*OK*/

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

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

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

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

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

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

.page_title_line {
border:solid #FFFFFF 1px;
width: 1600px;
margin: 0 auto;
}/*OK*/

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

.back_page_back{
display: flex;
margin: 0 auto;
width: 100%;
height: auto;
padding-top: 10%;
padding-bottom:  10%;
}/*OK*/


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


.back_page_margin {
display: flex; /* 画面に合わせた拡大縮小*/
margin: 0 auto;

@media screen and (max-width:961px) { /* 961px以下の時*/
width: 50%; /* フルスクリーンの時の画面サイズ*/
}
@media screen and (max-width:767px) { /* 767px以下の時*/
width: 8%; /* フルスクリーンの時の画面サイズ*/
}
}/*OK*/


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


.back_page {
display: flex;
margin: 0 auto;
max-width: 60px; /* 画像に合わせた拡大縮小*/
width: 100%;
height: auto;
}/*OK*/


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

.back_page_img img{
display: block;/* display: blockじゃないとhoverが効かない */
max-width: 60px; /* 画像に合わせた拡大縮小*/
width: 100%;
margin: 0 auto;
opacity: 1; /* 初期状態は不透明 */
transition: opacity 0.35s ease-in-out; /* ふわっとさせる時間を指定 */
}
.back_page_img:hover {/* ホバー時のスタイル */
opacity: 0.3; /* ホバー時に薄くする */
}


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



.stripes_blue_line{
display: flex;
background-image: url(../image/common_img/stripes_blue.webp);
background-size: cover;
background-position: center;
background-repeat: no-repeat; /* 画像を繰り返さない */
aspect-ratio: 1260 / 50;
width: 1260px;
height: auto;
margin: 0 auto;
margin-top: 20%;
margin-bottom: 8%;
}/*OK*/



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



.stripes_br_line{
display: flex;
background-image: url(../image/common_img/stripes_br.webp);
background-size: cover;
background-position: center;
background-repeat: no-repeat; /* 画像を繰り返さない */
aspect-ratio: 1260 / 50;
width: 1260px;
height: auto;
margin: 0 auto;
margin-top: 20%;
margin-bottom: 8%;
}/*OK*/



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



.stripes_red_line{
display: flex;
background-image: url(../image/common_img/stripes_red.webp);
background-size: cover;
background-position: center;
background-repeat: no-repeat; /* 画像を繰り返さない */
aspect-ratio: 1260 / 50;
width: 1260px;
height: auto;
margin: 0 auto;
margin-top: 20%;
margin-bottom: 8%;
}/*OK*/



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



.stripes_ry_line{
display: flex;
background-image: url(../image/common_img/stripes_ry.webp);
background-size: cover;
background-position: center;
background-repeat: no-repeat; /* 画像を繰り返さない */
aspect-ratio: 1260 / 50;
width: 1260px;
height: auto;
margin: 0 auto;
margin-top: 20%;
margin-bottom: 8%;
}/*OK*/



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



.stripes_yb_line{
display: flex;
background-image: url(../image/common_img/stripes_yb.webp);
background-size: cover;
background-position: center;
background-repeat: no-repeat; /* 画像を繰り返さない */
aspect-ratio: 1260 / 50;
width: 1260px;
height: auto;
margin: 0 auto;
margin-top: 20%;
margin-bottom: 8%;
}/*OK*/



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



.stripes_yellow_line{
display: flex;
background-image: url(../image/common_img/stripes_yellow.webp);
background-size: cover;
background-position: center;
background-repeat: no-repeat; /* 画像を繰り返さない */
aspect-ratio: 1260 / 50;
width: 1260px;
height: auto;
margin: 0 auto;
margin-top: 20%;
margin-bottom: 8%;
}/*OK*/



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