/* 1536 , 1530 × 735 ,1366 *//* 上記画面幅でも崩れていないか確認 */

/* 修正した場合→各項目の一番下に日付をコメントアウトして追記 */

@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho&display=swap');

/*
#loading{
    display:none;
}
*/

@charset "utf-8";
/*■■　ALL　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
#loading #loading_text .progressbar-text,
.intro_title1,
.con_title,
h3,h4,
#pc_nav li a,
#nav_menu,.overlay .overlay-nav .en,
#footer_nav_wrap li a,
.info_btn_wrap p a,
#page_title .page_title_box,
.cate_title,
.intro_title2,
#intro .intro_photo .title,
.top_title .title,
.more_item,
.cms_title,
#main_img .scr, #page_title_img .scr,
.fv_copy_inner,
#page10 .con_box ul li a{
    font-family: "Shippori Mincho",'Noto Sans JP', "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.tel_bt a:hover,
.contact_bt a:hover{
    background-color:#327143;
}


/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){

}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){

}



/*■■　FV　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
/* コピー全体のコンテナ（中央配置） */
.fv_copy_container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 1000px;
    z-index: 5;
    text-align: center;
}

/* 白い枠線 */
.fv_copy_inner {
    border: 1px solid rgba(255, 255, 255, 0.8);
    padding: 60px 40px;
    background: rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(2px); 
}

/* メインコピー */
.main_copy {
    color: #fff;
    font-size: 48px;
    font-weight: 500;
    line-height: 1.6;
    margin-bottom: 30px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

/* サブコピー */
.sub_copy {
    color: #fff;
    font-size: 18px;
    line-height: 1.8;
    letter-spacing: 0.1em;
}

/* ローディング後にじわっと出現 */
.load-blurTrigger{
    opacity: 0;
}
.load-blur{
  animation-name:load-blurAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
}

/* --- 修正版：中央配置を維持するアニメーション --- */

@keyframes load-blurAnime {
  from {
    filter: blur(10px);
    transform: translate(-50%, -50%) scale(1.05); 
    opacity: 0;
  }

  to {
    filter: blur(0);
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}

.fv_copy_container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 1000px;
    z-index: 5;
    text-align: center;
}

.load-blurTrigger {
    opacity: 0;
}

.load-blur {
    animation-name: load-blurAnime;
    animation-duration: 1.5s; 
    animation-fill-mode: forwards;
    animation-timing-function: ease-out;
}

/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){

}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){
#main_img{
    height:75vh!important;
}
.top .scroll{
    display:none;
}
.main_copy { 
    font-size: 28px;
    letter-spacing: -4px;
}
.sub_copy {
    font-size: 15px;
    letter-spacing: -1px;
}
.fv_copy_inner { padding: 40px 20px; }
}



/*■■　TOP　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
#contents {
    background: url(/Files/img/item4.png) no-repeat bottom right -2% / 20% auto;
}
#contents_wrap {
    background: url(/Files/img/item4.png) no-repeat top -2% right -1% / 20% auto;
}
.con_box.box2 {
    background: url(/Files/img/item4.png) no-repeat top left 45% / 13% auto;
}

/* 親要素：はみ出したシャボンを表示させるため overflow を visible に変更 */
#contents .con_photo {
    overflow: visible !important; /* はみ出しを許可 */
    border-radius: 0; /* マスクと角丸は画像（figure）側で行う */
    -webkit-mask-image: none;
    mask-image: none;
    position: relative;
    max-width: 40% !important;
    margin-left: auto;
    margin-right: auto;
}

/* 画像コンテナ：ここで画像を円形に切り抜き、サイズを調整 */
.con_photo .con_img {
    margin: 0 auto;
    padding: 0;
    width: 80%; /* 親要素に対して少し小さくする */
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 50%; /* 正円にする */
    
/* さらに広い範囲でじわっと消す */
-webkit-mask-image: radial-gradient(circle, black 50%, rgba(0,0,0,0) 70%);
mask-image: radial-gradient(circle, black 50%, rgba(0,0,0,0) 70%);
}

/* シャボンのイメージ：画像より一回り大きく配置 */
.con_photo::after {
    content: "";
    position: absolute;
    /* 親要素(40%幅)に対して上下左右に10%ずつはみ出させる */
    top: -10%;
    left: -10%;
    width: 120%;
    height: 120%;
    
    background: url("/files/img/item2.png") no-repeat center center;
    background-size: contain;
    
    /*mix-blend-mode: screen; */
    z-index: 2;
    pointer-events: none;
    opacity: 0.75;
}
/* シャボンふわふわ */
.con_photo::after {
    /* ここ追加 */
    animation: bubbleFloat 8s ease-in-out infinite;
}

/* ふわふわ動き */
@keyframes bubbleFloat {
    0% {
        transform: translate(0, 0) scale(1);
    }
    25% {
        transform: translate(6px, -8px) scale(1.02);
    }
    50% {
        transform: translate(-6px, -15px) scale(0.98);
    }
    75% {
        transform: translate(4px, -8px) scale(1.01);
    }
    100% {
        transform: translate(0, 0) scale(1);
    }
}



#top_cms .cms_title{
    text-align:center;
}
/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){
#intro .rotate_txt span{
    font-size: 70px;
}
#contents .con_photo{
    max-width:80%!important;
}
#contents {
    background: url(/Files/img/item4.png) no-repeat bottom 16% right 22% / 26% auto;
}
#contents_wrap {
    background: url(/Files/img/item4.png) no-repeat top 1% right 6% / 31% auto;
}
.con_box.box2{
    background: url(/Files/img/item4.png) no-repeat top 1% left / 25% auto;
}
}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){
#contents .con_photo{
    max-width:100%!important;
}
#contents {
    background: url(/Files/img/item4.png) no-repeat bottom 20% right 0% / 38% auto;
}
#contents_wrap {
    background: url(/Files/img/item4.png) no-repeat top 2% right 6% / 31% auto;
}
.con_box.box2 {
    background: url(/Files/img/item4.png) no-repeat top 37% left / 36% auto;
}
}



/*■■　下層ページ　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/


/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){

}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){
#tel_txt .width_30per{
    padding-left:0;
}
#tel_txt .width_70per{
    padding:10px;
}
}
/* --- 修正版：ロゴ差し替えによりサイズ変更 --- */

#logo img {
    max-width: 200px;
}
/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){
#logo img {
    max-width: 150px;
}
#loading #loading_text .progressbar-text {
        top: 66%;
    }
}
/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){
#loading #loading_text .progressbar-text {
        top: 72%;
    }
}