﻿/* 1536 , 1530 × 735 ,1366 *//* 上記画面幅でも崩れていないか確認 */

/* 修正した場合→各項目の一番下に日付をコメントアウトして追記 */



@charset "utf-8";
/*■■　ALL　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

@import url('https://fonts.googleapis.com/css2?family=Dela+Gothic+One&family=M+PLUS+1p&display=swap');
.font_dela,
.title,
.cmstitle,
.more a,
.pagetitle,
#sp_nav .l-menu ul li a{
  font-family: "Dela Gothic One","M PLUS 1p","Noto Sans JP", "Hiragino Kaku Gothic ProN", "游ゴシック体", YuGothic, "YuGothic M", meiryo, sans-serif;
  font-weight: 400;
  font-style: normal;
}




/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){

}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){

}



/*■■　FV　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.pc_nav li a .font_15{
    display:none;
}
#main_img{
background-color: var(--color1);
    background-image: url(/Files/img/item3.png), url(/Files/img/item2.png);
    background-size: 34%, 28%;
    background-position: -9% -70%, 36% 135%;
    background-repeat: no-repeat, no-repeat;
}
#main_img .catchcopy {
    width: 35vw;
    max-width: 700px;
    top: 19%;
    left: 5%;
    z-index: 3;
}
#main_img .item1 {
    width: 20vw;
    max-width: 650px;
    bottom: 0;
    left: 40%;
    z-index: 2;
}
#main_img .slider{
    overflow:hidden;
    border-radius:500px 0 0 0;
}


@media screen and (max-width: 1366px){
#main_img .item1{
    width: 25vw;
}    
}

@media screen and (max-width:1024px){
#main_img .catchcopy{
    width: 37vw;
    top:35%;
}    
}

/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 820px){
.swiper-container{
    position: absolute!important;
    bottom: 0;
    left: 0;
    width: 100%!important;
    height: 45%;
    padding-bottom: 0;
}


#main_img {
    background-color: var(--color1);
    background-image: url(/Files/img/item3.png), url(/Files/img/item2.png);
    background-size: 52%, 61%;
    background-position: -20% -10%, 116% 44%;
    background-repeat: no-repeat, no-repeat;
}
#main_img .catchcopy {
    width: 64vw;
    top: 12%;
     left: 7%;
}
#main_img .item1 {
    width: 53vw;
    left: auto;
    right:-16%;
}
#main_img .slider{
    border-radius:200px 200px 0 0;
}
.pc_nav li{
    padding-top:0;
}
}

@media screen and (max-width: 768px){

}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){
#main_img {
        background-color: var(--color1);
        background-image: url(/Files/img/item3.png), url(/Files/img/item2.png);
        background-size: 52%, 61%;
        background-position: -20% -10%, 139% 44%;
        background-repeat: no-repeat, no-repeat;
    }
#main_img .catchcopy {
    width: 82vw;
    top: 15%;
    left: 8%;
}
 #main_img .item1 {
    width: 55vw;
    left: auto;
    right:-21%;
}
#main_img .slider{
    border-radius:80px 80px 0 0;
}
}


@media screen and (max-width: 375px) {
/* iPhone SE（375px幅）用 */
#main_img .item1 {
    width: 47vw;
    left: auto;
    right: -17%;
}
.f_contact_box h4{
    font-size:40px;
}

}


/*■■　TOP　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.con1_squ {
  left: 0;
  pointer-events: none;
}

.con1_squ span {
  display: block;
  margin-right: 5px;

  animation: squBounce 1.8s ease-in-out infinite;
}

/* 左から順にディレイ */
.con1_squ span:nth-child(1) {
  animation-delay: 0s;
}
.con1_squ span:nth-child(2) {
  animation-delay: .15s;
}
.con1_squ span:nth-child(3) {
  animation-delay: .3s;
}

/* ぽよんアニメーション */
@keyframes squBounce {
  0% {
    transform: translateY(0) scale(1);
  }
  15% {
    transform: translateY(-8px) scale(1.05);
  }
  30% {
    transform: translateY(0) scale(0.95);
  }
  45% {
    transform: translateY(-3px) scale(1);
  }
  60%,
  100% {
    transform: translateY(0) scale(1);
  }
}
#con3 {
    background-color: var(--color1);
    background-image: url(/Files/img/item3.png), url(/Files/img/item2.png);
    background-size: 34%, 28%;
    background-position: -3% -65%, 107% 135%;
    background-repeat: no-repeat, no-repeat;
}
#con3 .con_box .icon{
    margin-top:-40px;
}
#con3 .icon img{
    width:80px;
}
#topCms .cmstitle h3{
    color:var(--color2);
}


/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){
#con3 {
    background-color: var(--color1);
    background-image: url(/Files/img/item3.png), url(/Files/img/item2.png);
    background-size: 67%, 45%;
    background-position: -9% -5%, 116% 110%;
    background-repeat: no-repeat, no-repeat;
}
}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){
#con3 {
        background-color: var(--color1);
        background-image: url(/Files/img/item3.png), url(/Files/img/item2.png);
        background-size: 74%, 62%;
        background-position: -61% 0%, 140% 102%;
        background-repeat: no-repeat, no-repeat;
    }
}



/*■■　下層ページ　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/


/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){

}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){
#cms_2-c .cate_img1 {
    height:180px !important;
}
.contact_btn a{
    font-size:20px!important;
}
.line_box .contact_btn a{
    padding:0!important;
}
}


/*2026/01/14*/
#con1,.footer{
    background-color:#0d2a52;
}