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

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



@charset "utf-8";
/*■■　ALL　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
#wrap{overflow: hidden;}
.nav_tel, .main_page_link_span, .main_img_txt, .main_img_txt2, .contents1_title , .contents1_subtitle, .more_btn, .about_area_title, .contents_no, .contents2_title, .contents3_title, .modal_txt_wrap .title,  .top_cms_title, .footer_tel, .footer_mail, #page_title, #page8 #phone a, #page9 h3, #page10 li a{
 /* font-family: 'Crimson Text', "游明朝", "YuMincho", "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "Sawarabi Mincho", "serif";*/
 font-family:  "Zen Maru Gothic", "Noto Sans JP","游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif;
 font-weight: bold;
}

#fix_bnr{
	bottom: 10px;
	right: 40px;
	z-index: 5;
	width: 200px;
}
@media screen and (max-width: 667px){
	#fix_bnr{width: 120px;}
}


/* スライダー全体と各スライドを親の高さに合わせる */
/*.swiper-wrapper, 
.swiper-slide {
    height: 100% !important;
}*/

/* 背景画像の表示を整える */
.box_img {
    height: 100%;
    width: 100%;
    background-size: cover;    /* 領域いっぱいに表示 */
    background-position: center; /* 中央合わせ */
    background-repeat: no-repeat;
}
/*.swiper-slide{opacity: 1!important;}*/


/* お問い合わせ */
#tel_txt .title {
    /* color: 
color-mix(in srgb, var(--color3) 30%, #fff); */
    color: var(--color1);
}

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

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

}



/*■■　FV　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.swiper-container-fade .swiper-slide{
    border-radius: 0 0 10% 0;
}
.main_img_txt{
    width: 30%;
    right: 0;
    bottom: 0;
}
/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){
.swiper-container-fade .swiper-slide{
    border-radius: inherit;
}
.main_img_txt, .main_img_txt2 {
        left: inherit;
        right: 0;
        bottom: 0;
        width: 38%;
    }
}

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

}



/*■■　TOP　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.bg_white_top{top: -7vw;left: 0;}
.top_cms_item{position: relative;}
.top_cms_item:after {
    content: '';
    width: 100%;
    height: 8.3vw;
    display: block;
    background: repeat-y center top;
    background-size: 100% 100%;
    position: absolute;
    left: 0;
    bottom: -100px;
}
.top_cms_item:after {
    /* background-image: url(/Files/img/bg_white_top.png); */
}
.top_cms_item_svg {
    width: 600px;
    top: 40px;
    left: 0;
    z-index: -1;
}
.top_cms_bg {
    opacity: 1;
    background: #FFF;
}
#about_area{
    /* background-image: url(/Files/img/bg_img.png);
    background-size: cover; */
}
.about_area_title{
    max-width: 500px;
    margin: 0px auto;
    padding-left: 15%;
}


#video_area{display: none;}
.filter{display: none;}
.top_cms_item_svg svg {
  fill: currentColor;      /* txt_color3 の色を反映 */
  animation: rotate 20s linear infinite; /* ゆっくり回転 */
  transform-origin: center;
}
#slideshow_area figure img{border-radius: 20px;}


/* 浮遊する動き */
@keyframes float {
  0%, 100% { transform: translateY(0) translateX(0); }
  50% { transform: translateY(-20px) translateX(10px); }
}

/* ゆっくり回転する動き */
@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}



.blob{
  border-radius: 30% 70% 60% 40% / 40% 40% 60% 60%;
  animation: blob 8s ease-in-out infinite alternate;
  will-change: border-radius, transform;
}

@keyframes blob{
  0%{
    border-radius: 30% 70% 60% 40% / 40% 40% 60% 60%;
    transform: translateY(0);
  }
  50%{
    border-radius: 55% 45% 35% 65% / 55% 35% 65% 45%;
    transform: translateY(-6px);
  }
  100%{
    border-radius: 40% 60% 70% 30% / 35% 60% 40% 65%;
    transform: translateY(0);
  }
}

#contents1{
    background-color: #fff;
    /* padding: 15% 10% 10%; */
    /* max-width: none; */
    border-radius: 5%;
}
.contents1_title{line-height: 1.2;}
.contents2_img ,.contents3_img{
    background: none;
}
.contents2_outer_bg,
.contents3_outer_bg{display: none;}


/*loopアニメーション*/
:root {
  --bg-url: url('/Files/img/loop_txt01.png');    
  --illust-url-01: url('/Files/img/loop_img01.png'); /* 1つ目のイラスト（左用） */
  --illust-url-02: url('/Files/img/loop_img02.png'); /* 2つ目のイラスト（右用） */
  --img-w: 1900px; 
  --img-h: 150px;  
  --speed: 100s;
}

.loop_wrap {
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  overflow: hidden; 
  padding: 40px 0;
}

.loop_txt {
  display: flex;
  height: var(--img-h);
  width: calc(var(--img-w) * 3); 
  position: relative;
  will-change: transform;
}

/* --- 背景のテキスト (共通) --- */
.loop_txt::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: var(--bg-url);
  background-repeat: repeat-x;
  background-size: auto 100%;
  z-index: 1;
}

/* --- イラストの共通設定 --- */
.loop_txt::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: var(--img-w); /* ループさせないので画像1枚分の幅に固定 */
  height: 120%; /* ご提示のコードを反映 */
  background-repeat: no-repeat;
  background-size: auto 110%; /* ご提示のコードを反映 */
  z-index: 2;
}

/* --- 【個別設定】左段のイラスト --- */
.left::after {
  background-image: var(--illust-url-01);
  background-position: 200px center;
}

/* --- 【個別設定】右段のイラスト --- */
.right::after {
  background-image: var(--illust-url-02);
  /* 右に流れる際、イラストの出現位置を調整したい場合はここを変更 */
  background-position: 800px center; 
}

/* アニメーション設定 */
.left { animation: loop-left var(--speed) linear infinite; }
.right { animation: loop-right var(--speed) linear infinite; }

@keyframes loop-left {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(-1 * var(--img-w))); }
}

@keyframes loop-right {
  0% { transform: translateX(calc(-1 * var(--img-w))); }
  100% { transform: translateX(0); }
}

.top_cms_title p{
    color: #e16582;
}


/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){
.index .main_header h1 {
        max-width: 110px;
        margin: 0;
    }
    
    #contents1 {
    border-radius: inherit;
}

:root {
    --img-h: 80px;   /* 文字の高さ（150px → 80pxに縮小） */
    --speed: 60s;    /* スマホは横幅が狭いので、速度を少し速めると見やすいです */
  }

  .loop_wrap {
    padding: 25px 0; /* イラストのはみ出し余白もスマホ用に調整 */
  }

  /* イラストの大きさや位置をスマホ用に微調整 */
  .loop_txt::after {
    height: 130%;        /* 文字に対して少し大きめに表示 */
    background-size: auto 100%; 
  }

  /* 必要に応じて、左右それぞれのイラストの出現位置を調整 */
  .left::after {
    background-position: 100px center; /* 200pxだと遠すぎる場合、100pxに */
  }
  .right::after {
    background-position: 400px center; /* 800pxだと遠すぎる場合、400pxに */
  }

    #logo2 {
        max-width: 140px;
    }
}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){
    .index .main_header h1 {
        max-width: 80px;
    }
}



/*■■　下層ページ　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.sub_page .main_header h1 {
    max-width: 120px;
}
#page10 ul li a{font-size: 20px;}
#page10 ul li a span{font-size: 16px;}


/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){
.sub_page .main_header h1 {
    max-width: 100px;
}
}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){
.sub_page .main_header h1 {
    max-width: 80px;
}
#page_title .title_box h2{letter-spacing: 0px;}


}