@charset "UTF-8";
/*==================================================
ボティーベースカラーアイボリー
===================================*/
body{
  background-color:	#fffff9;
    /*background-image:url("../img/back_02.png");
    background-repeat: repeat;*/
   
  
}
@media screen and (max-width:599px) {
body{background-image:url("../img/b058.jpg");
    background-repeat: repeat; 
    }}
/**/

 @media screen and (max-width:599px) {
.wrap_original{
overflow: hidden; 
}
} 
/*==================================================
改行<br>表示/非表示
===================================*/
/*スマートフォンでは有効（改行する）*/
.kaigyo{
    display: none;
}
@media screen and (max-width:768px) {
.kaigyo{
        display: block;
    }
.kesu{
        display: none;
}
}
.kaigyo_599{
   display: none; 
}
.kaigyo_970{
   display: none; 
}
@media screen and (max-width:599px) {
   .kaigyo_599{
        display: block;
    } 
}
@media screen and (max-width:970px) {
   .kaigyo_970{
        display: block;
    } 
}
/*==================================================
コンテンツふわっ
===================================*/

/* その場で */
.fadeIn{
animation-name:fadeInAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
/*=================================
h4____title装飾
===================================*/
.heading15 {
	position: relative;
	padding-bottom: 20px;
	font-size: 26px;
	text-align: center;
}
.heading15::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 7px;
	height: 7px;
	background-color: #ffa3d1;
	border-radius: 7px;
}

/*=================================
ふわふわ動く
===================================*/
.target {
  animation: gokigensaun-y 2.5s ease-in-out infinite alternate-reverse;
}
@keyframes gokigensaun-y{
  0% {
    transform: translateY(-10%);
  }
  100% {
    transform: translateY(-1%);
  }
}
/*青い鳥*/
.target_bottom{
  animation: bard-y 2.8s ease-in-out infinite alternate-reverse;
}
@keyframes bard-y {
  0% {
    transform: translateY(-45%);
  }
  100% {
    transform: translateY(-1%);
  }
}


/*===============================
ツンと上下に動く
===================================*/
.updown {
    animation-name:updown1;   /* アニメーション名の指定 */
    animation-delay:0s;   /* アニメーションの開始時間指定 */
    animation-duration: 3.5s;   /* アニメーション動作時間の指定 */
    animation-timing-function: ease-in-out;  /* アニメーションの動き指定（徐々に早く）*/
    animation-iteration-count: infinite; 
}
 
@keyframes updown1 {
  0% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
  65% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(0);
  }
}
/*====================================================
スクロールするとふわっとコンテンツがふわと表示
===================================*/

.js-fade {
    opacity: 0;
    visibility: hidden;
    transform: translateY(50px);
    transition: opacity 1s,visibility 1s, transform 1s;
}

.scroll {
    opacity: 1;
    visibility: visible;
    transform: translateY(0px);
}
.js-fade_sp {
    opacity: 0;
    visibility: hidden;
    transform: translateY(50px);
    transition: opacity 1s,visibility 1s, transform 1s;
}

.scroll_sp {
    opacity: 1;
    visibility: visible;
    transform: translateY(0px);
}
/*==================================================
1024px 以下はーーーーー改行消す
===================================*/
.kaigyo{
    display: none;

}
@media screen and (max-width:1024px) {
    
.kaigyo{
    display:inline;

}
    .kesu{
        display: none;
    }
    }   

/*==================================================
Googleフォント
===================================*/
.zen-maru gothic-regular {
  font-family: "Zen Maru Gothic", serif;
  font-weight: 400;
  font-style: normal;
}

.zen-maru gothic-light {
  font-family: "Zen Maru Gothic", serif;
  font-weight: 300;
  font-style: normal;
}

.zen-maru gothic-medium {
  font-family: "Zen Maru Gothic", serif;
  font-weight: 500;
  font-style: normal;
}

.zen-maru gothic-bold {
  font-family: "Zen Maru Gothic", serif;
  font-weight: 700;
  font-style: normal;
} 
.wf-roundedmplus1c { 
    font-family: "M PLUS Rounded 1c"; 
    transform:rotateZ(0.03deg);
}

/*==================================================
→付きボタン
===================================*/
.button020 a,
.button021 a,
.button022 a,
.button023 a,
.button024 a
{
     background: #554738;
    position: relative;
    font-family: "M PLUS Rounded 1c";
    letter-spacing: 0.05em;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
    max-width: 240px;
    padding: 10px 25px;
    color: #fff;
    transition: 0.3s ease-in-out;
    font-weight: 500;
    border-radius: 25px;
}
.button020 a:hover{
    background: #e95388;
    font-family: "M PLUS Rounded 1c";
}
.button021 a:hover{
    background: #9cbb1c;
    font-family: "M PLUS Rounded 1c";
}
.button022 a:hover{
    background: #00afcc;
    font-family: "M PLUS Rounded 1c";
}
.button023 a:hover{
    background: #FF6600;
    font-family: "M PLUS Rounded 1c";
}
.button024 a:hover{
   background: #0066CC;
    font-family: "M PLUS Rounded 1c";
}
.button020 a:before, .button020 a:after,
.button021 a:before, .button021 a:after,
.button022 a:before, .button022 a:after,
.button023 a:before, .button023 a:after,
.button024 a:before, .button024 a:after
{
  content: "";
  position: absolute;
  display: block;
  transition: all 0.3s;
  right: 0.6rem;
  top: 50%;
}
.button020 a:before,
.button021 a:before,
.button022 a:before,
.button023 a:before,
.button024 a:before
{
  width: 1.4rem;
  height: 2px;
  background: #fff;
  transform: translateY(-50%);
}
.button020 a:after,
.button021 a:after,
.button022 a:after,
.button023 a:after,
.button024 a:after
{
  opacity: 0;
  width: 0;
  height: 0;
  border-top: solid 2px currentColor;
  border-right: solid 2px currentColor;
  transform: translateY(-50%) rotate(45deg);
}
.button020 a:hover:before,
.button021 a:hover:before,
.button022 a:hover:before,
.button023 a:hover:before,
.button024 a:hover:before
{
  width: 1.5rem;
}
.button020 a:hover:after,
.button021 a:hover:after,
.button022 a:hover:after,
.button023 a:hover:after,
.button024 a:hover:after
{
  opacity: 1;
  width: 8px;
  height: 8px;
}
/*-----------------
黄色アンダーライン
-----------------*/

.yelow{
    background:linear-gradient(transparent 60%, #ff6 60%);
}
.tex_b{
    font-size: 1.3rem;
    padding-bottom: 3px;
}
/*========= スクロールダウンのためのCSS ===============*/

/*=== 9-1-2 丸が動いてスクロールを促す ====*/

/*スクロールダウン全体の場所*/
.scrolldown2{
    /*描画位置※位置は適宜調整してください*/
  position:absolute;
  bottom:-100px;
  left:50%;
  
}
/*--------------------
Scroll『位置』------------------599
-------------------------------------*/
@media screen and (max-width:599px) { 
.scrolldown2{
    /*描画位置※位置は適宜調整してください*/
  position:absolute;
  bottom:-80px;
  left:50%;
  
}
}
/*Scrollテキストの描写*/
.scrolldown2 span{
    /*描画位置*/
  position: absolute;
  left:10px;
  bottom:10px;
    /*テキストの形状*/
  color: #554738;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  /*縦書き設定*/
  -ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
}

/* 丸の描写 */
.scrolldown2:before {
    content: "";
    /*描画位置*/
    position: absolute;
    bottom:0;
    left:-4px;
    /*丸の形状*/
  width:10px;
  height:10px;
  border-radius: 50%;
  background:#554738;
    /*丸の動き1.6秒かけて透過し、永遠にループ*/
  animation:
    circlemove 1.6s ease-in-out infinite,
    cirlemovehide 1.6s ease-out infinite;
}

/*下からの距離が変化して丸の全体が上から下に動く*/
@keyframes circlemove{
      0%{bottom:45px;}
     100%{bottom:-5px;}
 }

/*上から下にかけて丸が透過→不透明→透過する*/
@keyframes cirlemovehide{
      0%{opacity:0}
     50%{opacity:1;}
    80%{opacity:0.9;}
  100%{opacity:0;}
 }

/* 線の描写 */
.scrolldown2:after{
  content:"";
    /*描画位置*/
  position: absolute;
  bottom:0;
  left:0;
    /*線の形状*/
  width:2px;
  height: 50px;
  background:#554738;
}