@charset "UTF-8";
 /*  */
p {
  line-height: 1.7;
  color: #666;
}
td {
  color: #666;
}
.text-normal {
  font-size: 1rem;
}
/* -------------------------------------------------- */
.text-long{
  transform: scale( 0.8 , 1 );
white-space: nowrap;
}
.text-vw{
  font-size: 3.3vw;
}
/* -------------------------------------------------- */
.font_space {letter-spacing: 0.3em}
.font_space_clear {letter-spacing: 0}
.Arrow-Bottom {
  border-bottom: solid 1px;
  border-right: solid 1px;
  width: 24px;
  height: 24px;
  transform: rotate(45deg);
}
.Arrow-Top {
  border-top: solid 1px;
  border-left: solid 1px;
  width: 24px;
  height: 24px;
  transform: rotate(45deg);
}

.index_img {
  background: #F1F1F1 url("../img/index_back.png%3F20210401") bottom / cover;
  width: 100%;
  min-height: 40vh;
}

.index_nav_back {
  background: rgba(255,255,255,.6);
}

.index_title_box{
  height: 600px;
  display:flex; /* ←これを指定 */
  align-items: center;  /* ←これを指定 */
}

.index_title{
  font-size: 4vw;
  -webkit-text-stroke: 1px #8ac6f0;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  text-align: center;
  color: rgba(255,255,255,0.00);
}

.contents {
  position: relative;
  overflow: hidden;
  padding: 0;
  z-index: 2;
}
.contents:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 120%;
  height: 70%;
  margin: 3% -10% 0;
  background: linear-gradient(-135deg, rgba(255, 218, 153, .6), rgba(255, 255, 255, .6));/* カラーコード#FFDA99, #FFFFFF 斜め部分の色 */ 
  -webkit-transform-origin: left center;
  -ms-transform-origin: left center;
  transform-origin: left center;
  -webkit-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  z-index: -1;
}
.contents_inner {
  box-sizing: boder-box;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  padding: 100px 10px 120px;
  text-align: center;
}
.contents.reverse:before {
    margin: 2% -10% 0;
    -webkit-transform-origin: right center;
    -ms-transform-origin: right center;
    transform-origin: right center;
    -webkit-transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);
    transform: rotate(-3deg);
}
.contents.double:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 120%;
    height: 70%;
    margin: 3% -10% 0;
    background: linear-gradient(-135deg, rgba(255, 255, 204, .6), rgba(227, 255, 182, .6));/* カラーコード#ffffcc, #e3ffb6 斜め部分の色 */ 
    -webkit-transform-origin: right center;
    -ms-transform-origin: right center;
    transform-origin: right center;
    -webkit-transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);
    transform: rotate(-3deg);
    z-index: -2;
}
/*--------------------------------------------------
    [Back To Top Theme Button]
----------------------------------------------------*/
#page_top{
  width: 150px;
  height: 30px;
  position: fixed;
  right: 0;
  bottom: 0;
  background: #ff7dba;
  opacity: 1;
    transform: rotate(90deg);
    transform-origin: top right;
}
#page_top a{
  position: relative;
  display: block;
  width: 150px;
  height: 30px;
  text-decoration: none;
}
#page_top a::before{
  content: '\025c0 PAGE TOP';
  font-size: 14px;
  color: #fff;
  position: absolute;
  top: 2;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}
/*--------------------------------------------------
    季節のイベントカラー
----------------------------------------------------*/
.bg-spring {
  background-color: #ffeff7;
}
.text-spring {
  color: #ff6699;
}
.bg-summer {
  background-color: #eaffea;
}
.text-summer {
  color: #00cc66;
}
.bg-autumn {
  background-color: #fff2e5;
}
.text-autumn {
  color: #ff6600;
}
.bg-winter {
  background-color: #f7efff;
}
.text-winter {
  color: #9966ff;
}
/*--------------------------------------------------
    ベース
----------------------------------------------------*/
.logo {
  height: 87px;
  max-width: 100%;
}
.bg-main {
  background-color: #c1e0e5;
}
.text-main {
  color: #dfabcd;
}
.text-sub {
  color: #3a9bbe;
}
.text-third {
  color: #666666;
}
/* Media Query
================================================ */
/* 大ディスプレイ */
@media screen 
  and (min-width: 1200px) {}
/* 小ディスプレイ */
@media screen 
  and (max-width: 1024px) {}
/* タブレット（Landscape） */
@media screen 
  and (min-width: 769px) 
  and (max-width: 1024px) {}
/* タブレット（Portrait） */
@media screen 
  and (min-width: 736px)
  and (max-width: 768px) {}
/* タブレット（Portrait） + スマートフォン */
@media screen 
  and (max-width: 768px) {}
/* スマートフォン */
@media screen 
  and (max-width: 736px) {
    #service .display-3 {
      font-size: 3.5rem;
    }
    #greeting .display-4 {
      font-size: 2.5rem;
    }
  }
/* スマートフォン */
@media screen 
  and (max-width: 320px) {}