@charset "utf-8";
/* CSS Document */

/* ---------------------------------------------------------------------------------------------

   Wrap

--------------------------------------------------------------------------------------------- */
.wrap{
    width: 100%;
    overflow: hidden;
}

.whole-wrap{
    width: 100%;
}

/* ---------------------------------------------------------------------------------------------

   Contents-wrap

--------------------------------------------------------------------------------------------- */
.contents-wrap{
    float: right;
    width: 85%;
    background: #fff;
    border-left: 0.5px solid #999;
    padding: 0 2.5%;
}

@media screen and (max-width:1200px) {

.contents-wrap{
    float: none;
    width: 90%;
    border-left: 0;
    padding: 0;
    margin: auto;
}
}

/* ---------------------------------------------------------------------------------------------

   Corner-wrap

--------------------------------------------------------------------------------------------- */
.corner-wrap{
    width: 95%;
    padding: 96px 0 0 0;/*6.25% 0 0 0*/
}

@media screen and (max-width:1200px) {

.corner-wrap{
    width: 100%;
}
}


/* ---------------------------------------------------------------------------------------------

   H2

--------------------------------------------------------------------------------------------- */
.icon-text {
    display: flex;
    align-items: center; /* 縦の中央揃え */
    gap: 10px; /* 画像とテキストの間の余白 */
    margin-bottom: 20px;
}

.icon-text img {/*------*/
    width: 30px;/*#c99f63*/
}

h2{
    font-weight: normal;
	font-size: 30px;
    letter-spacing: 0.15em;
    line-height: 1.5;
}

@media screen and (max-width:1200px) {
    
.icon-text img{
    display: none;
}
}


/* ---------------------------------------------------------------------------------------------

   Contents

--------------------------------------------------------------------------------------------- */
.contents{
    width: 100%;
    margin-left: 2.5em;
}

@media screen and (max-width:1200px) {

.contents{
    margin-left: 0;
}
}


/* ---------------------------------------------------------------------------------------------

   H3 ※各コーナー別指定はstyle.css

--------------------------------------------------------------------------------------------- */
h3{
    text-align: center;
	font-size: 18px;
    letter-spacing: 0.05em;
    border: 0.5px solid #999;
    line-height: 1;
    font-weight: normal;
    border-radius: 50px;
    padding: 10px 25px;
    margin-bottom: 15px;
}


/* ---------------------------------------------------------------------------------------------

   文章テキスト

--------------------------------------------------------------------------------------------- */
.corner-wrap .text-18{
    letter-spacing: 0.15em;
    font-size: 18px;
    line-height: 2.25;/*------*/
}


/* ---------------------------------------------------------------------------------------------

   Fadeアニメーション設定

--------------------------------------------------------------------------------------------- */
 .fade{
  opacity: 0;
   transform: translate3d(0, 0, 0);
  transition: all 3s ease;
  &.full {
   transition: all 0.8 ease;
  }
}

 .top_fade{
  opacity: 0;
   transform: translate3d(0, -70px, 0);
  transition: all 2s ease;
  &.full {
   transition: all 0.8 ease;
  }
}

 .left_fade{
  opacity: 0;
   transform: translate3d(-75px, 0, 0);
  transition: all 2s ease;
  &.full {
   transition: all 0.8 ease;
  }
}

 .right_fade{
  opacity: 0;
   transform: translate3d(75px, 0, 0);
  transition: all 2s ease;
  &.full {
	  
   transition: all 0.8 ease;
  }
}

 .bottom_fade{
  opacity: 0;
   transform: translate3d(0, 75px, 0);
  transition: all 2s ease;
  &.full {
   transition: all 0.8 ease;
  }
}

.fade-content .anm_mod.active {
 opacity: 1;
 transform: translate3d(0, 0, 0);
}