@charset "utf-8";

/* 画像挿入 */
.img {
    width: 100%;
    height: auto;
}

.pic3 img {
  border-radius: 50%;
}

/* アンダーライン */

.under {
  border-bottom: solid 1px #DEDED1;
}


/* ボタン横並び */
div{
text-align:center;
}
/* テキストシャドウ */

.tsl11oya{
  background  : #ffffff;
  padding     : 20px;
}
.tsl1{
  display     : inline-block;
  font-size   : 100%;
  font-weight : ;
  color       : #DEDED1;
  text-shadow:  2px  2px 10px #086A87 ,
               -2px  2px 10px #086A87 ,
                2px -2px 10px #086A87 ,
               -2px -2px 10px #086A87;
}

.tsl5{
  display     : inline-block;
  font-size   : 120%;
  font-weight : ;
  color       : #DEDED1;
  text-shadow:  2px  2px 10px #6E6E6E ,
               -2px  2px 10px #6E6E6E ,
                2px -2px 10px #6E6E6E ,
               -2px -2px 10px #6E6E6E;
}


/* フレックスボックスの基本設定 等間隔（両端揃え）折返しあり */
[class^="flex-col"] {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
 -webkit-align-items: center; /* 縦方向中央揃え（Safari用） */
 align-items: center; /* 縦方向中央揃え */
 -webkit-justify-content: center; /* 横方向中央揃え（Safari用） */
 justify-content: center; /* 横方向中央揃え */
}

/* コンテンツ下のマージン */
.flex-child { margin-bottom: 10px; }

/* 各カラム毎のコンテンツと疑似要素の横幅 */
.flex-col2 .flex-child { width: calc( (100% - 0px) / 2 ); }

.flex-col3::after,
.flex-col3 .flex-child { width: calc( (100% - 0px) / 2 ); }

.flex-col4::before,
.flex-col4::after,
.flex-col4 .flex-child { width: calc( (85% - 0px) / 4 ); }

.flex-col5::before,
.flex-col5::after,
.flex-col5 .flex-child { width: calc( (85% - 0px) / 3 ); }

/* 1280px以下で4列・3列 → 2列 */
@media screen and (max-width: 1280px) {
  .flex-col3 .flex-child { width: 100%; } 
  .flex-col4 .flex-child { width: calc( (100% - 10px) / 2 ); }
  .flex-col5 .flex-child { width: calc( (100% - 10px) / 2 ); }
}

/* 750px(前575)以下で全て1列 */
@media screen and (max-width: 750px) {
  .flex-col2 .flex-child,
  .flex-col3 .flex-child,
  .flex-col4 .flex-child { width: 100%; }
  .flex-col5 .flex-child { width: 100%; },
}

@media screen and (min-width:1380px) {
/* ここにPC向けのCSS指定 */

.order1 {
  order: 1;
}
.order2 {
  order: 2;
}
.order3 {
  order: 3;
}
.order4 {
  order: 4;
}
.order5 {
  order: 5;
}
.order6 {
  order: 6;
}

}

.shadow_test {
        filter: drop-shadow(3px 3px 3px #151515);
}

.arrow_box{              /* 吹き出し設定 */
    position:static;
    width:80%;
    height:100%;
    background:#0B2F3A;
    padding:10px;
    text-align:center;
    color:#DEDED1;
    font-size:14px;
    border-radius:50px;
    -webkit-border-radius:50px;
    -moz-border-radius:50px;
}

.arrow_box2{              /* 吹き出し設定 */
    position:static;
    width:80%;
    height:100%;
    background:#071019;
    padding:10px;
    text-align:center;
    color:#DEDED1;
    font-size:14px;
    border-radius:50px;
    -webkit-border-radius:50px;
    -moz-border-radius:50px;
}

.btn-flat-logo {              /* ボタン設定 */
               /* ボタン設定 #00bcd4*/
  display: inline-block;
  font-weight: /* bold */;
  border-radius: 10px;
  padding: 0.4em 0.6em;
  text-decoration: none;
  color: #B0A271;
  background: #071019;
  transition: .4s;
  border-radius: 15px;
  box-shadow: 0px 0px 0px 2px #071019;
  border: dashed 1px
}

.btn-flat-logo:hover {
  background: #636363;
}

.table_s1, th, td {
    width: 70%;
    border: none;
    margin-left: center;
    margin-right: center;
}

@media (min-width: 1024px) {
  .column {
    width: 50%;
  }
}

.bg_test {
    height: auto;              /* 高さ指定 */
    padding:  5px;             /* 余白指定 */
    font-size: 100%;
    color: #DEDED1;            /* 文字サイズ指定 */
    background-color: #0B2F3A;  /* 背景色指定 */
}

.bg6 {
   background: url('topimg/b_kuro1.png') top center / cover repeat-y;
 }

.bg5 {
   background: url('topimg/p_sora_001.jpg') top center / cover repeat-y;
 }

 .bg_test2 {
    background-color: #009688;  /* 背景色指定 */
    padding:  20px;             /* 余白指定 */
    float:  right;              /* 位置指定 */
    position:  relative;        /* 位置指定 */
    top: 110px;                 /* 位置指定 */
}

.bg_test3 {
    height: 50px;              /* 高さ指定 */
    padding:  5px;             /* 余白指定 */
    font-size: 10px;            /* 文字サイズ指定 */
    color: #B0A271;
    background-color: #0B2F3A;  /* 背景色指定 */
}

html{                 /* ページ内スムーズスクロール */
  scroll-behavior: smooth;
}
a{
  text-decoration: none;
}
.Content{
  padding-top: 96px;
}
.Item{
  border-radius: 50%;
  width: 240px;
  height: 240px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #5bc8ac;
  color: #fff;
}

h2 {
  position: relative;
  padding-left: 0px;
}

h2:after {
  position: absolute;
  content: '';
  bottom: -3px;
  left: 0px;
  width: 100%;
  border-bottom: solid 2px rgb(50, 50, 50);
}

/* フェードイン　*/

body {
    animation: fadeIn 3s ease 0s 1 normal;
    -webkit-animation: fadeIn 3s ease 0s 1 normal;
}

@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

/* PC設定　*/

* {
   box-sizing: border-box;
}
body {
   margin: 0;
   padding: 0;
   font-family: "Hiragino Kaku Gothic Pro",'Limelight', "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", "Helvetica Neue", Helvetica, Arial, sans-serif;
   background-color: #e6e6e6;
   letter-spacing : 0.2em;
}
header {
   padding: 10px 4% 10px;
   position: fixed;
   top: 0;
   width: 100%;
   background-color: transparent;
   display: flex;
   align-items: center;
      z-index: 1;
}
h1 {
   margin: 0; padding: 0;
   font-size: 28px;
}
a { 
   text-decoration: none;
   color: #ffffff;
}
nav {
   margin: 0 0 0 auto;
}
ul {
   list-style: none;
   margin: 0;
   display: flex;
}

li {
   margin: 0 0 0 15px;
   font-size: 14px;
}
.main-visual {
   display: flex;
   justify-content: center;
   align-items: center;
             display: block; /*一応block要素にしておく*/
            padding-top:33%; /* 縦 ÷ 横 x　100 */
   background: url('topimg/kv001.jpg') top center / cover no-repeat;
}

h2 {
   margin: 0;
   font-size: 12px;
   font-weight: normal;
   color: #B0A271;
}

h3 {
   margin: 0; padding: 0;
   font-size: 22px;
}

h4 {
   margin: 0; padding: 0;
   font-weight: normal;
   font-size: 12px;
}

h5 {
   margin: 0; padding: 0;
   font-size: 18px;
}

.sp-nav {
   display: none;
}

@media screen and (max-width: 750px) {
   .pc-nav {
      display: none;
   }
   .sp-nav {
      z-index: 1;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      display: block;
      width: 100%;
      background: rgba(0, 0, 0, .8);
      opacity: 0;
      transform: translateY(-100%);
      transition: all .2s ease-in-out;
   }
   #hamburger {
      position: relative;
      display: block;
      width: 30px;
      height: 25px;
      margin: 0 0 0 auto;
   }
   #hamburger span {
      position: absolute;
      top: 50%;
      left: 0;
      display: block;
      width: 100%;
      height: 2px;
      background-color: #fff;
      transform: translateY(-50%);
   }
   #hamburger::before {
      content: '';
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 2px;
      background-color: #fff;
   }
   #hamburger::after {
      content: '';
      display: block;
      position: absolute;
      bottom: 0;
      left: 0;
      width: 70%;
      height: 2px;
      background-color: #fff;
   }
   /*スマホメニュー*/
   .sp-nav ul {
      padding: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 100%;
   }
   .sp-nav li {
      margin: 0;
      padding: 0;
   }
   .sp-nav li span {
      font-size: 14px;
      color: #fff;
   }
   .sp-nav li a, .sp-nav li span {
      display: block;
      padding: 20px 0;
   }
/*hamburger menu close style*/
#nav_toggle span:nth-child(1) {
  top: 0px;
}
#nav_toggle span:nth-child(2) {
  top: 6px;
}
#nav_toggle span:nth-child(3) {
  top: 12px;
}

   .toggle {
      transform: translateY( 0 );
      opacity: 1;
   }

html { font-size: calc(85% - 0.25vw) }
h1 { font-size: 40px; }
h2 {font-size: 20px;}
h3 {font-size: 30px;}
h4 {font-size: 20px;}
h5 {font-size: 24px;}

html {font-size: 24px;}

.main-visual {
   display: flex;
   justify-content: center;
   align-items: center;
             display: block; /*一応block要素にしておく*/
            padding-top:100%; /* 縦 ÷ 横 x　100 */
   background: url('topimg/kv002.jpg') top center / cover no-repeat;

}


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

html { font-size: calc(85% - 0.25vw) }
h1 { font-size: 20px; }
h2 {font-size: 10px;}
h3 {font-size: 18px;}
h4 {font-size: calc(85% - 0.25vw)}
h5 {font-size: 13px;}