:root{
    --title1:2rem;
    --title2: 1.7rem;
    --title3: 2rem;
    --title4: 3.7rem;
    --waveh:180px;
}
/* スマホ */
@media screen and (max-width: 667px){
    :root{
        --title1: 1.6rem;
        --title2: 1.6rem;
        --title3: 1.6rem;
        --title4: 2.4rem;
        --waveh:80px;
    }
}

/*■■ ヨシダについてページ ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

#cms_4-b .con_box{
    box-sizing: border-box;
    width: 68%;
    padding: 15px 0 15px;
}
#cms_4-b .con_box .box_title2{text-align: left;}
#cms_4-b #cate3565 .cate_box{
    background-color: var(--color5);
    padding: 15px 0 15px;
    border-bottom: 1.5px solid #fff;
}
#cms_4-b #cate3565 .cate_box .box_title1{padding: 0;}

/* タブレット */
@media screen and (max-width: 768px){
    #cms_4-b #cate3565 .con_box{letter-spacing: -0.03em;}
}

/* スマホ */
@media screen and (max-width: 667px){
    #cms_4-b #cate3565 .con_box{
        width: 100%;
        padding: 10px 3% 40px;
        letter-spacing: -0.03em;
    }
    #cms_4-b #cate3565 .cate_box{
        width:100%!important;
        padding: 5px 0 5px;
    }
    #cms_4-b #cate3565 .con_box:last-child{padding: 10px 3% 0px;}
}

/*■■ カテゴリリスト ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

.cate_list li{width: 50%!important;}
.cate_list li a{padding: 10px 20px;}


/* タブレット */
@media screen and (max-width: 768px){
    .cate_list li{width: 100%!important;}
}

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

/*■■ 固定問い合わせバナー ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.pagetop{z-index: 3;}
#contact{
    border-radius: 50px;
    right: 120px;
    transition: all 0.5s;
    bottom: -100px;
    z-index: 3;
}

.under #contact{bottom: 55px;}

#contact a{
    display: block;
    padding: 16px 40px;
    color: #fff;
    font-size: 1.6rem;
    font-weight: bold;
    transition: all 0.5s;
}

#contact:hover{
    transform: scale(1.05);
}


/* タブレット */
@media screen and (max-width: 768px){
    .pagetitle{padding: 130px 0 calc(var(--waveh) - 70px);}
}

/* スマホ */
@media screen and (max-width: 667px){
    .pagetitle{padding: 120px 0 calc(var(--waveh) + 110px);}
    #contact a{
        font-size: 1.3rem;
        text-align: center;
        line-height: 1.3;
    }
}

/*■■ 区切り装飾 ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.kugiri1 {
    bottom: -1px;
    left: 0;
}

/*■■ main~introの背景 ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.top_bg{
    position: relative;
    /* background-image: url(../img/bg2.jpg); */
    background:radial-gradient(circle,  #05ddfe, #a1edfa, #fffff2);/* linear-gradient(30deg,#79bbff, #93d9e9,#65cdff , #86ddf1, #fffff2) */
    background-size: 200% 200%;
    animation: bggradient 4s ease infinite;;
}
@keyframes bggradient{
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}
.top_bg::before{
    content: "";
    width: 100%;
    height: 100%;
    background-image: url(../img/bg3.png);
    background-size: cover;
    position: absolute;
}


/*■■ main, top, all ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

.title1{font-size: var(--title1);line-height: 1.3;font-weight: bold;}
.title2{font-size: var(--title2);line-height: 1.5;font-weight: bold;}
.title3{font-size: var(--title3);line-height: 1.5;font-weight: bold;}
.title4{font-size: var(--title4);line-height: 1.5;font-weight: bold;}


#main_img{
    height: 80vh;
    background-color: transparent;
}


#main_img .machi{
    margin: 6% auto 0;
    position: relative;
}
#main_img .machi svg{
    margin: 0 auto;
    width: 97%;
}

#main_img .catch{
    top: 30%;
    width: 43%;
}



#top_btn{
    max-width: 1200px;
    margin: 0 auto;
}
#top_btn .btn{
    width: 28%;
    margin: 0 1%;
    box-shadow: 0px 5px 20px rgb(0 90 150 / 40%);
    border-radius: 61px;
    transition: all 0.5s;
}
#top_btn .btn:hover{
    transform: translateY(-3px);
    box-shadow: 0px 8px 30px rgb(0 90 150 / 40%);
    filter: brightness(1.2);
}

#con1{
    padding: 100px 0 calc(var(--waveh) + 20px);
    background-color: transparent;
}

#con1 .kugiri1{
    width: 100%;
    bottom: -1px;
    left: 0;
}

#con1 .title{
    font-size: 2.2rem;
    font-weight: bold;
}

#con2{
    padding: 100px 0 calc(var(--waveh) + 30px);
}

#con2 .musimegane{
    position: absolute;
    width: 40%;
    bottom: -40px;
    right: 0;
}

#con3{
    padding: 100px 0 calc(var(--waveh) + 20px);
}

#con3 .box .img{
    border-radius: 50%;
    width: 70%!important;
    margin: 0 auto 10px;
}



.f_contact_box h4{}
.footer_contact .tel{line-height: 1.5;}
.footer_contact .txt2{
    margin-bottom: 30px;
    letter-spacing: 0.03em;
    font-size: 1rem;
}


/* タブレット */
@media screen and (max-width: 768px){
    #main_img .machi{margin: 20% auto 0;}
    #main_img .catch{
        top: 31%;
        width: 80%;
    }
    
    #con3 .box{margin: 0 auto 60px;}
    #con3 .box .img{width: 50% !important;}
}
/* スマホ */
@media screen and (max-width: 667px){
    #main_img .machi{margin: 0% auto 0;}
    #main_img .machi svg{
        width: 90%;
        transform: translateX(5%);
    }
    #main_img .catch{
        top: 20%;
        width: 90%;
    }
    
    
    #top_btn .btn{
        width: 70%;
        margin: 0 0 20px;
    }
    
    
    #con1 .title{
        font-size: 1.8rem;
        line-height: 1.7;
        text-align: center;
    }
    
    
    #con2{
        padding: 80px 0 calc(var(--waveh) + 110px);
    }
    #con2 .title1{
        text-align: center;
    }
    
    
    #con3{
        padding: 80px 0 calc(var(--waveh) + 10px);
    }
    
    
    #con3 .box{margin: 0 auto 30px;}
    #con3 .box .img{width: 70% !important;}
    
    .f_contact_box h4{
        font-size: 2rem;
    }
}

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

.pagetitle{
    padding: 180px 0 calc(var(--waveh) + 0px);
    background-color: var(--color2);
}

.all_contents{
    background: linear-gradient(180deg, #fff, var(--color5));
}
.all_contents .content{
    box-shadow: 0px 0px 40px var(--color5);
}
.all_contents .kugiri1{}


/* タブレット */
@media screen and (max-width: 768px){}
/* スマホ */
@media screen and (max-width: 667px){
    .pagetitle{padding: 120px 0 calc(var(--waveh) + 10px);}
}


/*■■ 波 ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.wave{
position:relative;
height:200px;/*何も表示されない場合は各波の親要素に高さを持たせましょう。*/
}
canvas{
position: absolute;
bottom: 0;
left:0;
width: 100%;
}

/*■■ お問い合わせページ ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.radio_wrap .radio-input {
    display: none;
}
.radio_wrap .radio-input + label {
    padding-left: 23px;
    position: relative;
    margin-right: 20px;
    cursor: pointer;
}
.radio_wrap .radio-input + label::before {
    content: "";
    display: block;
    position: absolute;
    top: 3px;
    left: 0;
    width: 15px;
    height: 15px;
    border: 1px solid #9e9e9e;
    border-radius: 50%;
}
.radio_wrap .radio-input:checked + label::after {
    content: "";
    display: block;
    position: absolute;
    top: 5.5px;
    left: 3px;
    width: 11px;
    height: 11px;
    background: var(--color1);
    border-radius: 50%;
}
/*■■ フェードイン ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.fadein{
	transform: translateY(20px);
	transition: transform 1.5s ease, opacity 2s;
	transition-property: opacity,transform;
	opacity: 0;
}
.fadein.start{transform: translateY(0);opacity: 1;}




.fadein_top{
    transform: translate(-50%,-47%);
	transition: transform 1.5s ease, opacity 2s;
	transition-property: opacity,transform;
	opacity: 0;
}
.fadein_top.start{transform: translate(-50%,-50%);opacity: 1;}



.fadein2{
	transform: translateX(30px) rotate(40deg);
	transition: transform 1.5s ease, opacity 2s;
	transition-property: opacity,transform;
	opacity: 0;
	transform-origin: right bottom;
}
.fadein2.start{transform: translateX(0)rotate(0deg);opacity: 1;}



.anim_box .item{
	transform: translateY(20px);
	transition: transform 1.5s ease, opacity 2s;
	transition-property: opacity,transform;
	opacity: 0;
}
.anim_box .item.start{transform: translateY(0);opacity: 1;}

/*■■ machiのアニメーション ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
/***************************************************
 * Generated by SVG Artista on 6/25/2025, 5:55:46 PM
 * MIT license (https://opensource.org/licenses/MIT)
 * W. https://svgartista.net
 **************************************************/

svg .svg-elem-1 {
  stroke-dashoffset: 57.51508712768555px;
  stroke-dasharray: 57.51508712768555px;
  -webkit-transition: stroke-dashoffset 2s ease 0s;
          transition: stroke-dashoffset 2s ease 0s;
}

svg.active .svg-elem-1 {
  stroke-dashoffset: 115.0301742553711px;
}

svg .svg-elem-2 {
  stroke-dashoffset: 57.50189971923828px;
  stroke-dasharray: 57.50189971923828px;
  -webkit-transition: stroke-dashoffset 2s ease 0.42s;
          transition: stroke-dashoffset 2s ease 0.42s;
}

svg.active .svg-elem-2 {
  stroke-dashoffset: 115.00379943847656px;
}

svg .svg-elem-3 {
  stroke-dashoffset: 87.01110076904297px;
  stroke-dasharray: 87.01110076904297px;
  -webkit-transition: stroke-dashoffset 2s ease 0.84s;
          transition: stroke-dashoffset 2s ease 0.84s;
}

svg.active .svg-elem-3 {
  stroke-dashoffset: 174.02220153808594px;
}

svg .svg-elem-4 {
  stroke-dashoffset: 143.18856811523438px;
  stroke-dasharray: 143.18856811523438px;
  -webkit-transition: stroke-dashoffset 2s ease 1.26s;
          transition: stroke-dashoffset 2s ease 1.26s;
}

svg.active .svg-elem-4 {
  stroke-dashoffset: 286.37713623046875px;
}

svg .svg-elem-5 {
  stroke-dashoffset: 43.42613220214844px;
  stroke-dasharray: 43.42613220214844px;
  -webkit-transition: stroke-dashoffset 2s ease 1.68s;
          transition: stroke-dashoffset 2s ease 1.68s;
}

svg.active .svg-elem-5 {
  stroke-dashoffset: 86.85226440429688px;
}

svg .svg-elem-6 {
  stroke-dashoffset: 71.95111846923828px;
  stroke-dasharray: 71.95111846923828px;
  -webkit-transition: stroke-dashoffset 2s ease 2.1s;
          transition: stroke-dashoffset 2s ease 2.1s;
}

svg.active .svg-elem-6 {
  stroke-dashoffset: 143.90223693847656px;
}

svg .svg-elem-7 {
  stroke-dashoffset: 77.3758773803711px;
  stroke-dasharray: 77.3758773803711px;
  -webkit-transition: stroke-dashoffset 2s ease 2.52s;
          transition: stroke-dashoffset 2s ease 2.52s;
}

svg.active .svg-elem-7 {
  stroke-dashoffset: 154.7517547607422px;
}

svg .svg-elem-8 {
  stroke-dashoffset: 46.827823638916016px;
  stroke-dasharray: 46.827823638916016px;
  -webkit-transition: stroke-dashoffset 2s ease 2.94s;
          transition: stroke-dashoffset 2s ease 2.94s;
}

svg.active .svg-elem-8 {
  stroke-dashoffset: 93.65564727783203px;
}

svg .svg-elem-9 {
  stroke-dashoffset: 46.826873779296875px;
  stroke-dasharray: 46.826873779296875px;
  -webkit-transition: stroke-dashoffset 2s ease 3.36s;
          transition: stroke-dashoffset 2s ease 3.36s;
}

svg.active .svg-elem-9 {
  stroke-dashoffset: 93.65374755859375px;
}

svg .svg-elem-10 {
  stroke-dashoffset: 95.0494155883789px;
  stroke-dasharray: 95.0494155883789px;
  -webkit-transition: stroke-dashoffset 2s ease 3.78s;
          transition: stroke-dashoffset 2s ease 3.78s;
}

svg.active .svg-elem-10 {
  stroke-dashoffset: 190.0988311767578px;
}

svg .svg-elem-11 {
  stroke-dashoffset: 2398.73095703125px;
  stroke-dasharray: 2398.73095703125px;
  -webkit-transition: stroke-dashoffset 2s ease 4.2s;
          transition: stroke-dashoffset 2s ease 4.2s;
}

svg.active .svg-elem-11 {
  stroke-dashoffset: 4797.4619140625px;
}

svg .svg-elem-12 {
  stroke-dashoffset: 44.67789840698242px;
  stroke-dasharray: 44.67789840698242px;
  -webkit-transition: stroke-dashoffset 2s ease 4.62s;
          transition: stroke-dashoffset 2s ease 4.62s;
}

svg.active .svg-elem-12 {
  stroke-dashoffset: 89.35579681396484px;
}

svg .svg-elem-13 {
  stroke-dashoffset: 44.66657257080078px;
  stroke-dasharray: 44.66657257080078px;
  -webkit-transition: stroke-dashoffset 2s ease 5.04s;
          transition: stroke-dashoffset 2s ease 5.04s;
}

svg.active .svg-elem-13 {
  stroke-dashoffset: 89.33314514160156px;
}

svg .svg-elem-14 {
  stroke-dashoffset: 44.67626190185547px;
  stroke-dasharray: 44.67626190185547px;
  -webkit-transition: stroke-dashoffset 2s ease 5.46s;
          transition: stroke-dashoffset 2s ease 5.46s;
}

svg.active .svg-elem-14 {
  stroke-dashoffset: 89.35252380371094px;
}