/* 変数 */
:root {
  --main-color: #23baa6;
  --btn-color: #f61061;
  --fs-s:16px;
  --fs-s:16px;
  --fs-m:24px;
  --fs-l:30px;
  --fs-ti-sub:36px;
  --fs-ti:48px;
  --section-padding: 80px 0;
}


/*class*/
.sp_only{
    display: none;
}
.cont{
    width: 1000px;
    margin: 0 auto;
}
.fudemoji{
    font-family: "kokuryu", sans-serif;
    font-weight: 400;
    font-style: normal;
}
.fudemoji{font-family: "shinryu", sans-serif;
font-weight: 400;
font-style: normal;
}
.cf::after {
   content: "";
   display: block;
   clear: both;
}
a.btn {
    display: inline-block;
    padding: 0.5em 3em 0.5em 2em;
    background: #fff;
    border:solid 4px var(--main-color);
    border-radius: 50px;
    color: var(--main-color);
    position: relative;
    font-size: 24px;
    transition: 0.4s;
}
a.btn:hover {
    display: inline-block;
    padding: 0.5em 3em 0.5em 2em;
    background: var(--main-color);
    border-radius: 50px;
    color: #fff;
    position: relative;
    font-size: 24px;
}
a.btn span {
    position: absolute;
    right: 0.5em;
    top: 50%;
    margin-top: -0.5em;
}

/* フェードインのアニメーション定義 */
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(100px); /* 下から */
    }
    100% {
        opacity: 1;
        transform: translateY(0); /* 元の位置 */
    }
}

@keyframes fadeInLeft {
    0% {
        opacity: 0;
        transform: translateX(-100%);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    0% {
        opacity: 0;
        transform: translateX(100%);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}


/* フェードイン用のクラス */
.fade_up ,
.fade_left ,
.fade_right{
    opacity: 0;
}
.fade_up.fadeIn {
    opacity: 1;
    animation: fadeInUp 1s ease-in-out forwards;
    transition: 1s;
}

/* .fade_left クラスに対するフェードイン */
.fade_left.fadeIn {
    opacity: 1;
    animation: fadeInLeft 1s ease-in-out forwards;
    transition: 1s;
}
/* .fade_right クラスに対するフェードイン */
.fade_right.fadeIn {
    opacity: 1;
    animation: fadeInRight 1s ease-in-out forwards;
    transition: 1s;
}




/*見出し*/
.section h2 {
    font-size: 3em;
    text-align: center;
    line-height: 1;
    display: table;
    margin: 0 auto 1em;
    position: relative;
    padding-bottom: 1em;
}
.section h2 span {
    font-size: 0.4em;
    display: block;
    margin: 1.4em 0 0;
}
.section h2 b {
    font-size: 1.2em;
}
.section h2:before {
    content: "";
    height: 8px;
    width: 120px;
    background: #f3e1bf;
    position: absolute;
    bottom: 0;
    margin: 0 auto;
    display: block;
    margin: 0 auto;
    left: 0;
    right: 0;
}
.section h2:after {
    content: "";
    height: 8px;
    width: 40px;
    background: #f8a501;
    position: absolute;
    bottom: 0;
    margin: 0 auto;
    display: block;
    margin: 0 auto;
    left: 0;
    right: 0;
}
#service h3 span.main_bg {
    font-size: 1.3em;
    color: #fff;
    line-height: 1;
    display: inline-block;
    padding: 0.2em;
    margin-right: 0.2em;
}

/*section:nth-child(odd) {
    background: #efefef;
}*/




@media (max-width: 1000px) {
.section {
    padding: 4vh 5vw 5vh;
}
.cont{
	width: 100%;
	margin: 0 auto;
}
}


@media (max-width: 750px) {

/*class*/
.sp_only{
    display: block;
}



.section h2 {
    font-size: 2em;
}
.section h2:before{
	width: 16vw;
	height: 4px;
}
.section h2:after{
	width: 8vw;
	height: 4px;
}

}