* {
	margin: 0;
	padding: 0;
}
html {
  font-size: 62.5%;
  font-family: YuGothic, sans-serif;
}
body {
  font-size: calc(1.6rem + (1vw - 0.56rem) * 1.0000);/* 16px~20pxで可変*/
  line-height: 2;
	max-width: 1920px;
  color: #333;
}
a {
  text-decoration: none;
  color: #333;
}
a:hover {
  /* text-decoration: underline; */
}

h1 {
    font-size: calc(3.5rem + (1vw - 0.56rem) * 4.7500);/* 35px~54pxで可変*/
    line-height: 2.2;
    font-family: 'Noto Serif JP', YuMincho, serif;
    writing-mode: vertical-rl;
    text-shadow: -3px 3px 0 rgba(0, 0, 0, 0.5);
    color: #fff;
    align-items: center;
    margin: 0 auto;
    letter-spacing: 0.4em;
    white-space: nowrap;
}
h2 {
    font-size: calc(2.5rem + (1vw - 0.56rem) * 3.7500);/* 25px~40pxで可変*/
    line-height: 1.3;
    font-family: 'Noto Serif JP', YuMincho, serif;
}
h3{
  font-size: calc(2.0rem + (1vw - 0.56rem) * 2.5000);/* 20px~30pxで可変*/
  font-family: 'Noto Serif JP', YuMincho, serif;
}
hr.style7 {
	border-top: 1px solid #8c8b8b;
	border-bottom: 1px solid #fff;
}
/* コラム一覧・お知らせ一覧は表示しない */
.blog.custom-background hr.style7,
.archive hr.style7 {
	border-top: 1px solid rgba(255,250,244,0);
	border-bottom: 1px solid rgba(255,250,244,0);
}

h1 span{
  padding-top: 50px;
}

/* Firefox */
_:lang(x)::-moz-placeholder,
h1 {
  text-shadow: 5px 3px 0 rgba(0, 0, 0, 0.4);
}
​
/* Safari */
_:lang(x)+_:-webkit-full-screen-document,
h1 {
  text-shadow: 5px 3px 0 rgba(0, 0, 0, 0.4);
}


/* 文節で改行したい箇所につける(span) */
.indent {
  display: inline-block;
}


/*========= 背景動画設定のCSS ===============*/

/*header設定*/
#header{
  position: relative;
  height: 100vh;
  min-height: 800px;
  z-index: -1;
  overflow: hidden;
} 
#video-area{
  position: fixed;
  z-index: -1;
  top: 0;
  right:0;
  left:0;
  bottom:0;
  overflow: hidden;
}

#video {
  /*天地中央配置*/
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /*縦横幅指定*/
  width: 177.77777778vh!important; /* 16:9 の幅→16 ÷ 9＝ 177.77% */
  height: 56.25vw; /* 16:9の幅 → 9 ÷ 16 = 56.25% */
  min-height: 100%;
  min-width: 100%;
}

/* グローバルナビゲーション */
#navigation {
  left: 0;
  width: 15%;
  max-width: 250px;
  height: 100%;
  background: #FFFAF4;
  text-align: center;
  font-family: 'Noto Serif JP', YuMincho, serif;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  overflow-y: scroll;
  z-index: 999;
}
.navigation-top {
  position: absolute;
}
.navigation {
  position: fixed;
  top: 0;
}
.navigation-inner {
  position: absolute;
  width: 100%;
  height: 100%;
  min-height: 800px;
}
/* グロナビスクロールバー調整 */
#navigation::-webkit-scrollbar {
  width: 2px;
}
#navigation::-webkit-scrollbar-thumb {
  border-radius: 0;
  background: #358010;
}
#navigation::-webkit-scrollbar-track {
  border-radius: 0;
  background: #FFFFFF;
}

/* 会社名 */
nav p.headline {
  padding-top: 15%;
}
nav p.headline a{
  color: #333333;
  font-size: 2.0rem;
  font-weight: bold;
  display: block;
  line-height: 1.5;
}

nav p.headline a span{
  font-size: 14px;
  margin-bottom: -30px;
}

/* グローバルナビゲーション */
nav ul.nav-list{
  /* margin-top: 30%; */
  /* margin-left: 15%; */
  margin: 30% 10% 0 10%;
  list-style: none;
  text-align: left;
}

nav ul.nav-list li.nav-list-item:nth-child(even){
  padding: 30px 0;
}

nav ul.nav-list li.nav-list-item:hover {
  opacity: 0.8;
}

nav ul.nav-list li.nav-list-item a{
  font-weight: bold;
  display: block;
  line-height: 1.5;
}

nav ul.nav-list li.nav-list-item a span{
  color: #358010;
  font-size: 14px;
  font-weight: lighter;
  font-family: YuGothic, sans-serif;
  display: block;
}

/* フォント変更版 */
.nav-list-ja{
  /* height: 2.0rem; */
  height: 3.8rem;
}
.nav-list-ja.kana{
  /* height: 1.8rem; */
  height: 3.6rem;
}

/* グロナビアイコン */
/* .nav-list-link.top,
.nav-list-link.appealpoint{
  height: 75px;
} */
/* .nav-list-link.top:before {
  content: '';
  display: inline-block;
  background-image: url(/img/icon_top.svg);
  background-size: contain;
  vertical-align: middle;
  background-repeat: no-repeat;
  width: 2.6rem;
  height: 2.8rem;
  margin-right: 5px;
  margin-bottom: 5px;
}
.nav-list-link.appealpoint:before {
  content: '';
  display: inline-block;
  background-image: url(/img/icon_appealpoint.svg);
  background-size: contain;
  vertical-align: middle;
  background-repeat: no-repeat;
  width: 2.6rem;
  height: 2.8rem;
  margin-right: 5px;
  margin-bottom: 5px;
}
.nav-list-link.our_service:before {
  content: '';
  display: inline-block;
  background-image: url(/img/icon_ourservice.svg);
  background-size: contain;
  vertical-align: middle;
  background-repeat: no-repeat;
  width: 2.6rem;
  height: 2.8rem;
  margin-right: 5px;
  margin-bottom: 5px;
}
.nav-list-link.column:before {
  content: '';
  display: inline-block;
  background-image: url(/img/icon_column.svg);
  background-size: contain;
  vertical-align: middle;
  background-repeat: no-repeat;
  width: 2.6rem;
  height: 2.8rem;
  margin-right: 5px;
  margin-bottom: 5px;
}
.nav-list-link.gallery:before {
  content: '';
  display: inline-block;
  background-image: url(/img/icon_gallery.svg);
  background-size: contain;
  vertical-align: middle;
  background-repeat: no-repeat;
  width: 2.6rem;
  height: 2.8rem;
  margin-right: 5px;
  margin-bottom: 5px;
}
.nav-list-link.company:before {
  content: '';
  display: inline-block;
  background-image: url(/img/icon_company.svg);
  background-size: contain;
  vertical-align: middle;
  background-repeat: no-repeat;
  width: 3.0rem;
  height: 3.0rem;
  margin-right: 5px;
  margin-bottom: 5px;
}
.nav-list-link.access:before {
  content: '';
  display: inline-block;
  background-image: url(/img/icon_access.svg);
  background-size: contain;
  vertical-align: middle;
  background-repeat: no-repeat;
  width: 3.0rem;
  height: 3.0rem;
  margin-right: 5px;
  margin-bottom: 5px;
}
.nav-list-link.news:before {
  content: '';
  display: inline-block;
  background-image: url(/img/icon_news.svg);
  background-size: contain;
  vertical-align: middle;
  background-repeat: no-repeat;
  width: 3.0rem;
  height: 3.0rem;
  margin-right: 5px;
  margin-bottom: 5px;
}
.nav-list-link.contact:before {
  content: '';
  display: inline-block;
  background-image: url(/img/icon_mail_black.svg);
  background-size: contain;
  vertical-align: middle;
  background-repeat: no-repeat;
  width: 2.4rem;
  height: 2.4rem;
  margin-right: 5px;
  margin-bottom: 5px;
} */



.nav-list-item.sns-icon img{
  display: block;
  width: 30px;
  margin: 0 auto;
}

.navigation-sp {
  padding: 20px 20px 20px 0;
  background: #FFF;
  opacity: 0.9;
  position: fixed;
  width: 100%;
  z-index: 999;
  box-sizing: border-box;
  top: 0;
}

#nav-drawer {
  position: relative;
}

/*チェックボックス等は非表示に*/
.nav-unshown {
  display:none;
}

/*アイコンのスペース*/
#nav-open {
  display: inline-block;
  width: 30px;
  height: 22px;
  vertical-align: middle;
}

/*ハンバーガーの形をCSSで表現*/
#nav-open span, #nav-open span:before, #nav-open span:after {
  position: absolute;
  height: 3px;/*線の太さ*/
  width: 25px;/*長さ*/
  border-radius: 3px;
  background: #555;
  display: block;
  content: '';
  cursor: pointer;
}
#nav-open span:before {
  bottom: -8px;
}
#nav-open span:after {
  bottom: -16px;
}

/*閉じる用の薄黒箇所*/
#nav-close {
  display: none;
  position: fixed;
  z-index: 99;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  opacity: 0;
  transition: .3s ease-in-out;
}

/*メニューの中身*/
#nav-content {
  overflow: auto;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 90%;
  max-width: calc(100% - 30%);
  height: 100%;
  background: #fff;
  transition: .3s ease-in-out;
  -webkit-transform: translateX(-105%);
  transform: translateX(-105%);
}


/*チェックがついたら表示させる*/
#nav-input:checked ~ #nav-close {
  display: block;
  opacity: .5;
}

#nav-input:checked ~ #nav-content {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
  box-shadow: 6px 0 25px rgba(0,0,0,.15);
}

.my-parts-hidden {
  display: none;
}

#nav-open {
  cursor: pointer;
  display: inline-block;
  height: 30px;
  position: relative;
  width: 40px;
  margin: 0 0 0.5rem 0;
}

#nav-open span {
  background:  #358010;
  border-radius: 4px;
  display: block;
  height: 13%;
  left: 50%;
  margin: -8% 0 0 -42%;
  position: absolute;
  top: 50%;
  transition: all 0.3s ease-in-out;
  width: 84%;
}

#nav-open span::before,
#nav-open span::after {
  -webkit-transform: rotate(0);
  background: #358010;
  border-radius: 4px;
  content: "";
  display: block;
  height: 100%;
  left: 50%;
  margin: -8% 0 0 -50%;
  position: absolute;
  top: 50%;
  transform: rotate(0);
  transition: all 0.3s ease-in-out;
  width: 100%;
}

#nav-open span::before {
  margin-top: -33%;
}

#nav-open span::after {
  margin-top: 24%;
}

#nav-input:checked ~ #nav-open span {
  background: rgba(51, 51, 51, 0);
}

#nav-input:checked ~ #nav-open span::before,
#nav-input:checked ~ #nav-open span::after {
  content: "";
  display: block;
  height: 100%;
  left: 50%;
  margin: -8% 0 0 -42%;
  position: absolute;
  top: 50%;
  width: 100%;
}

#nav-input:checked ~ #nav-open span::before {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

#nav-input:checked ~ #nav-open span::after {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

ul.delete-marker{
  text-align: left;
  list-style: none;
  padding-top: 80px;
  /* height: 100vh; */
  background-image:
   url(/img/bg_our_service_top_left.svg), url(/img/bg_our_service_top_right.svg);
    background-position: left top, right top;
    background-size: 35% auto, 25% auto;
    background-repeat: no-repeat;
    margin: 0;
}
.navigation-sp .nav-list-item{
  font-family: 'Noto Serif JP', YuMincho, serif;
  font-weight: bold;
  margin: 0;
}
span.navi-sp-en{
  display: block;
  font-size: 1.2rem;
  color: #358010;
  font-family: YuGothic, sans-serif;
  line-height: 1;
  font-weight: normal;
}
.navigation-sp .nav-list-item:nth-child(even){
  padding: 30px 0;
}

.navigation-sp .nav-list-item .nav-list-ja {
  height: 3.8rem;
  margin:0 15%;
}


.header-logo-menu{
 display: block;
 text-align: right;
 flex-direction: row;
 -moz-flex-direction: row;
 -o-flex-direction: row;
 -webkit-flex-direction: row;
 -ms-flex-direction: row;
}

.sp-title-area {
  position: absolute;
  text-align: left;
  top: -13px;
  left: 10px;
}
.sp-title1 {
  font-size: 1.1rem;
  line-height: 2;
  padding-left: 3px;
  margin: 0;
}
.sp-title2 {
  font-size: 1.6rem;
  line-height: 1.1;
  font-family: 'Noto Serif JP', YuMincho, serif;
  font-weight: bold;
  margin: 0;
}

/*ロゴやサイトタイトルをセンタリング*/
.logo-area{text-align:center;margin:auto;}


/* ローディング画面 */
#loading {
  width: 100vw;
  height: 100vh;
  transition: all 1s;
  background-color: #0bd;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
}
.spinner {
  width: 100px;
  height: 100px;
  margin: 200px auto;
  background-color: #fff;
  border-radius: 100%;
  animation: sk-scaleout 1.0s infinite ease-in-out;
}
/* ローディングアニメーション */
@keyframes sk-scaleout {
  0% {
    transform: scale(0);
  } 100% {
    transform: scale(1.0);
    opacity: 0;
  }
}
.loaded {
  opacity: 0;
  visibility: hidden;
} 

@media screen and (orientation: portrait) {/* 縦長 */
  #op_anime {display: none;}
}
@media screen and  (orientation: landscape) {/* 横長 */
  #op_anime_sp {display: none;}
  #op_anime {display: block;}
}

#op_anime, #op_anime_sp {
	width: 100vw;
  height: 100vh;
	position: fixed;
	background: #53A733;
	transition: all 1s;
  opacity: 1;
	z-index: 9999;
	top: 0;
  left: 0;
}

.op_animed, .op_animed_sp {
	opacity: 0!important;
  z-index: -1!important;
}

#anime_left, #anime_sp_left {
    height: 100vh;
    position: fixed;
    bottom: 0;
    left: 0;
}
#anime_top, #anime_sp_top {
	width:100%;
	height: 50vh;
	position: fixed;
	top:0;
  left:25%;
}
#anime_bottom{
	width:100%;
	height: 50vh;
	position: fixed;
	bottom:0;
  left:25%;
}
#anime_right, #anime_sp_right {
    height: 100vh;
    position: fixed;
    bottom: 0;
    right: 0;
}
#op_anime svg, #op_anime_sp svg {
  width: auto!important;
  min-height: 100%;
}



/*ワーケーション*/
#main_workation {
  position: fixed;
  bottom: 0;
  right: 10%;
  z-index: -1;
  height: 24%;
  max-height: 320px;
}
/*釣り人*/
#main_fishing {
  position: fixed;
  max-height: 250px;
  height: 30%;
  bottom: 20%;
  left: 25%;
  z-index: -1;
}
/*こども*/
#main_child {
  position: fixed;
  height: 20%;
  max-height: 200px;
  bottom: 0;
  left: 25%;
  z-index: -1;
}


/* text */
.text-box {
  height: 100vh;
  /* display: flex; */
}
/*下からフェードイン*/
.fade-in-bottom {
   opacity: 0;
   animation-name: fadein-bottom;
   animation-duration: 1.5s;
   animation-timing-function: ease-out;
   animation-fill-mode: forwards;
   margin: auto;
   display: block;
   padding: 10%;
   font-weight: normal;
}


.fade-in-bottom span.kana {
  padding: 0;
}
@keyframes fadein-bottom {
   0% {
      opacity: 0;
      transform: translateY(20px);
   }
   100% {
      opacity: 1;
      transform: translateY(0);
   }
}

.header_contact {
  position: absolute;
  top: 0;
  right: 0;
  background: rgba(255,255,255,0.8);
  padding: 10px 25px 15px 20px;
  border-radius: 15px 0 0 15px;
}
.header_contact .txt1 {
  font-size:1.1rem;
  line-height: 2;
  padding-left: 4px;
}
.header_contact .txt2 {
  line-height: 1.2;
  font-family: 'Noto Serif JP', YuMincho, serif;
  font-weight: bold;
}
.header_contact a{
  color: #333;
}
.header_contact .time{
  font-size: 1.4rem;
  line-height: 1;
}

/* 天気 */
.weather {
    position: absolute;
    top: 170px;
    right: 0;
    font-size: 1.6rem;
    width: 180px;
    padding: 0 10px;
}
.weather p {
    color:#fff;
}
.weather-inner {
  display: flex;
  justify-content: space-around;
  text-align: center;
}
#report-image img {
  width: 50px;
}
#now-date {
  font-size: 2.5rem;
  padding-right: 5px;
}
#reportTemp {
  margin-top: -10px;
}
.weather-icon {
  margin-top: -5px;
}
#max-temperature::after,
#min-temperature::after {
  content: "\0b0";
}
@media screen and (max-width:959px) {
  .weather {
    top: 85px;
    font-size: 1.4rem;
    width: 150px;
  }
  #now-date {
    font-size: 2.0rem;
  }
  #report-image img {
    width: 35px;
  }
  .weather-icon {
    margin-top: 0;
  }
  #reportTemp {
    margin-top: -8px;
  }
}

/* --------------------メイン-------------------- */
#mainContents {
  overflow: hidden;
  position: relative;
  min-height: 100vh;
  margin: 0 auto;
  padding: 0 0 0 15%;
}


/*要素*/
.box1, .box2, .box3 {
  position: relative;
	width:90%;
	margin: 0 auto 10% auto;
  padding: 5%;
  box-sizing: border-box;
  background-color: rgba(255,250,244,0.96);
}
.box1 {
  background-image: 
  url(/img/bk_box1-top.svg), 
  url(/img/bk_box1_bottom_left.svg), 
  url(/img/bk_box1_bottom_center.svg), 
  url(/img/bk_box1_bottom_right.svg);
  background-position: left top, left bottom, center bottom, right bottom;
  background-size: 200px, 30%, 45%, 30%;
  background-repeat: no-repeat;
}
.box2 {
  padding: 10%;
  height: 1080px;
  background-color: transparent;
}
/* 見出し */
.ttl.vertical {
  position: absolute;
  top: 0;
  left: 0;
  writing-mode: vertical-rl;
  -webkit-writing-mode: vertical-rl;
  -moz-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  width: 100px;
  margin: 5% 0 0 5%;
  box-sizing: border-box;
}
.ttl .en {
  display: block;
  font-size: 1.6rem;
  font-family: YuGothic, sans-serif;
  color: #358010;
  font-weight: normal;
  text-shadow: 3px 3px 0 rgba(0,0,0,0.2);
  line-height: 2;
  white-space: nowrap;
}
.ttl .ja {
  display: block;
  line-height: 1;
  text-shadow: -3px 3px 0 rgba(0,0,0,0.2);
  padding-top: 30px;
  white-space: nowrap;
  letter-spacing: 0.2rem;
}

/* Firefox */
_:lang(x)::-moz-placeholder,
.ttl .ja {
  text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.2);
}
​
/* Safari */
_:lang(x)+_:-webkit-full-screen-document,
.ttl .ja {
  text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.2);
}



/*-------------------- 夢の南の島 --------------------*/
#introduction {
  background-image:
  url(/img/bk_box1-top.svg), 
  url(/img/bg_miyako.svg),
  url(/img/bk_box1_bottom_left.svg), 
  url(/img/bk_box1_bottom_center.svg), 
  url(/img/bk_box1_bottom_right.svg);
  background-position: left top, 50% 10%, left bottom, center bottom, right bottom;
  background-size: 200px, 80%, 30%, 45%, 30%;
  background-repeat: no-repeat;
}

.airplane {
  position: absolute;
  width: 80px;
  right: 40%;
  top: 5%;
  animation-name: expansion;
  animation-duration: 10s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@keyframes expansion{
  0%{
    top: 5%;
    right: 40%;
  }
  100%{
    top: 40%;
    right: -50%;
  }
}

.intro p {
  line-height: 3;
}
.catch {
  width:70%;
  padding: 100px 5% 5% 15%;
}
.catch_2 {
  padding-top: 5%;
}
.onayami {
  text-align: center;
}
#onayami1, #onayami2, #onayami3 {
  display: inline-block;
  width:300px;
  height: 300px; 
}
.catch_3 {
  text-align: center;
  width: 70%;
  margin: 5% auto 10% auto;
}
.green {
  color: #358010;
  font-weight: bold ;
}

/* 959px以下 タブレット向け*/
@media screen and (max-width:959px) {
  #introduction {
    background-size: 150px, 80%, 30%, 45%, 30%;
  }
  
  .airplane {
    right: 25%;
  }
  .intro {
    background-position: 0 20%;
  }
  .catch {
    width: 95%;
    padding: 100px 5% 5% 15%;
    margin-bottom: 0;
    box-sizing: border-box;
  }
  .catch_3 {
    width: 90%;
  }
}
/* 560px以下 スマホ向け*/
@media screen and (max-width: 560px) {
  #introduction {
    background-image:
    url(/img/bk_box1-top.svg), 
    url(/img/bg_miyako.svg),
    url(/img/bk_box1_bottom_left.svg),
    url(/img/bk_box1_bottom_right.svg);
    background-position: left top, 50% 8%, left bottom, right bottom;
    background-size: 180px auto, 80%, 60%, 50%;
    background-repeat: no-repeat;
  }
  .airplane {
    right: 30%;
    top: 0;
  }
  @keyframes expansion{
    0%{
      top: 0;
      right: 30%;
    }
    100%{
      top: 20%;
      right: -50%;
    }
  }
  .catch{
    padding: 0;
    margin: 0 auto;
  }
}

/*ーーーーーーーーーー 私たちの強み ーーーーーーーーーー*/
#appeal_point .ttl.vertical.right {
  top: 0;
  left: 75%;
}
.ttl.vertical.right .ja,
.ttl.vertical.right .en {
  color: #fff;
}
.point {
  position: absolute;
  background: rgba(255,250,244,0.96);
  width: 40%;
  padding: 3%;
  box-sizing: border-box;
}
.point h3 {
  writing-mode: vertical-rl;
  margin: 0 0 30px auto;
  text-align: end;
  line-height: 1.5;
}
.point p {
  padding-top:20px;
}
.point_side {
  display: flex;
  align-items: center;
}  
.point.point1 {
  top:0;
  left: 10%;
}
.point.point2 {
  top:40%;
  right: 0;
}
.point.point3 {
  display: flex;
  align-items: center;
  bottom: 0;
  width: 45%;
  height: 400px;
}
.point.point3 h3 {
  margin: 0 auto;
  width: 90px;
}
#point1, #point2 {
  width: 65%;
}
#point3{
  height: 100%;
  /* flex: 1; */
}
/* 959px以下 タブレット向け*/
@media screen and (max-width:959px) {
  .box2{
    min-height: 950px;
    height: 100vh;
  }
  .point, .point.point3{
    width: 48%;
  }
  .point.point1 {
    top: 0;
    left: 0;
  }
  .point.point2{
    top: 35%;
  }
  .point.point3 {
    left: 0;
    bottom: 10%;
    height: auto;
  }
}
/* 560px以下 スマホ向け*/
@media screen and (max-width: 560px) {
  .box2{
    padding: 0;
    height: auto;
  }
  #appeal_point .ttl.vertical.right {
    position: static;
    padding: 20px 0;
  }  
  .point, .point.point3{
    position: static;
    width: 100%;
  }
  .point h3{
    margin: 0 auto;
    text-align: center;
  }
  .point {
    padding: 10% 5%;
    margin-bottom: 10px;
  }
  .ttl.vertical.right {
    padding-bottom: 50px;
  }
  .point.point3 {
    height: 350px;
  }
}

/*ーーーーーーーーーー事業案内ーーーーーーーーーー*/
.service_big{
  padding-top: 100px;
  padding-left: 10%;
}
.service_big .service_cont {
  display: flex;
  justify-content: space-around;
  padding-bottom: 50px;
  /* border: 1px solid;   */
}
.service_big .service_cont .txt{
  width: 50%;
  box-sizing: border-box;
  /* border: 1px solid red; */
}
#service1, #service2, #service3{
  /* border:1px solid; */
  width: 35%;
  height: auto;
}
.service_big .service_cont:nth-child(odd) {
  flex-direction: row-reverse;
  justify-content: space-around;
}
.service_small {
  display: flex;
  justify-content: space-around;
  padding-bottom: 100px;
}
.service_small .service_cont h3 {
  height: 7.5rem;
  font-size: 2.9rem;
}
.service_small .service_cont{
  width: 30%;
}
#service4, #service5, #service6{
  width: 100%;
  height: 200px;
}
.service_cont .txt a{
  display: block;
  text-align: end;
  color: #1a0dab;
}
/* 959px以下 タブレット向け*/
@media screen and (max-width:959px) {
  #our_service {
    margin-top: 150px;
    background-position: left top, right top, left 25%, left 60%, right 45%,bottom;
    background-size: 150px auto, 150px auto, 50px auto, 50px auto, 50px auto, 100%;
  }
  .service_big{
    width: 90%;
    margin: 0 auto;
    padding-top: 20%;
    padding-left: 10%;
    box-sizing: border-box;
  }
  .service_big .service_cont {
    justify-content: space-between;
  }
  .service_big .service_cont .txt{
    width: 55%;
  }
  #service1, #service2, #service3 {
    width: 40%;
  }
  .service_big .service_cont:nth-child(odd) {
    justify-content: space-between;
  }
  .service_small{
    width: 90%;
    margin: 0 auto;
    justify-content: space-between;
  }
  .service_cont h3 {
    padding-bottom: 10px;
    line-height: 1.2;
  }
  .service_small .service_cont h3 {
    line-height: 1.2;
    height: 6.5rem;
    font-size: 2.0rem;
  }
  .service_cont p {
    font-size: 16px;
  }
}
/* 560px以下 スマホ向け*/
@media screen and (max-width: 560px) {
  .service_big{
    padding: 0;
  }
    .service_big .service_cont{
      display: block;
    }
    .service_big .service_cont .txt{
      width: 100%;
    }
    #service1, #service2, #service3{
      width: 90%;
      margin: 0 auto;
    }
    .service_small {
      display: block;
    }
    .service_small .service_cont{
      width: 100%;
      display: block;
      align-items: center;
    }
    .service_small .service_cont .txt{
      padding-top: 30px;
      padding-bottom: 50px;
    }
    .service_small .service_cont h3{
      height: auto;
    }
}

/*ーーーーーーーーーーあば！宮古島ーーーーーーーーーー*/
#column {
  background-image: url(/img/bg_colum_top_left.svg), url(/img/bg_colum_bottom_right.svg);
  background-position: left top, right bottom;
  background-size: 100px auto, 200px auto;
  background-repeat: no-repeat;
  min-height: 450px;
}
._aba_catch {
  margin: 2% auto 2% 15%;
}
._aba_catch h3 {
  margin-bottom: 1%; 
}
._aba_box-gr{
  background-color:#ccc;
  width: 400px;
  padding-top: 61.8%;
}
/* ._aba_box a {
  color: black;
} */
p.bold {
  font-weight: bold;
  line-height: 1.5;
  width: 95%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
p.lead {
  font-size: 0.8em;
  line-height: 2;
}

.swiper-slide {
  width: 400px;
}
.swiper-slide .post__thumb--img {
  /* margin: 0 0 15px;*/
  /* width: 400px; */
  width: 95%;
}
.swiper-slide .post__thumb--img a {
  /* color: black; */
  padding-top: 62.5%;
  width: 100%;
  display: block;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.swiper-slide .post__thumb--img::before {
  position      : absolute;          /* 親からの相対位置の定義  */
  display       : inline-block;      /* インラインボックス定義  */
  box-sizing    : border-box;        /* 罫線・余白も含む大きさ  */
  line-height   : 1;                 /* 1行の高さを初期化       */
  background    : #358010;           /* タイトル背景色          */
  color         : #ffffff;           /* タイトルの文字色        */
  content       : attr(title);       /* タイトルに[title]を表示 */
  font-weight   : bold;              /* タイトルは太字          */
  padding       : 8px 10px;          /* タイトル内の余白        */
  font-size     : 12px;              /* タイトルの文字サイズ    */
}

.swiper-custom-button{
  background: linear-gradient(to left, rgba(255,250,244,0.9),  rgba(255,250,246,0));
  height: 130%;
  margin: -190px -10px 0px 0px;
  width:100px;
}
.next-button{
 color    : #358010;  
 font-size : 102px; 
 margin: 50px -5px 0px 0px;
}

.swiper-pagination{
	visibility: hidden;
}

.content-block{
	visibility: hidden;
	height: 5px;
}
#_abalink {
  /* text-decoration: none; */
  margin: 5% auto 0 15%;
  display: block;
  color: #1a0dab;
}


/* 959px以下 タブレット向け*/
@media screen and (max-width:959px) {
  ._aba_catch {
    margin: 5% auto 5% 15%;
  }
}
/* 560px以下 スマホ向け*/
@media screen and (max-width: 560px) {
  #column {
    background-size: 80px auto, 150px auto;
  }
  ._aba_catch {
    margin: 5%;
  }
  ._aba_catch h3 {
    font-size: 2.0rem;
  }
  .swiper-pagination{
  visibility: visible;
    position: relative;
  }
  .swiper-pagination-bullet-active {
    background: #358010;
  }
  .swiper-pagination-bullet {
    width: 15px;
    height: 15px;
    margin: 10px;
  }
	.swiper-custom-button{
	 display: none;
	}
	#_abalink {
    margin: 0;
    padding: 3%;
    text-align: center;
	}
	/* .content-block {
	  overflow: hidden;
	  text-overflow: ellipsis;
	  white-space: nowrap;
	  visibility: visible;
	  height: auto;
	} */

}
/*ーーーーーーーーーーギャラリー(Instagram)ーーーーーーーーーー*/
#gallery{
  background-image: url(/img/bk_box1-top.svg), url(/img/bg_gallery_bottom_right.svg);
    background-position: left top, right bottom 50px;
    background-size: 200px auto, 100px auto;
    background-repeat: no-repeat;
}
#gallery .ttl .ja{
  padding-top: 0;
  padding-bottom: 30px;
  text-shadow: 3px 3px 0 rgba(0,0,0,0.2);
  width: auto;
}
.box_instagram {
  overflow: hidden;
}
.instagram {
  /* display: flex; */
  overflow: hidden;
}
/* Instagramボタン */
#sb_instagram #sbi_load{
  text-align: right!important;
}
#sb_instagram .sbi_follow_btn a {
  background: none!important;
  color: #333!important;
  font-size: 2.0rem!important;
}
#sb_instagram .sbi_follow_btn a:focus,
#sb_instagram .sbi_follow_btn a:hover {
  color: #fff!important;
  box-shadow: inset 0 0 10px 20px #358010!important;
}

#sb_instagram .sbi_follow_btn .fa, #sb_instagram .sbi_follow_btn svg{
  font-size: 2.0rem!important;
}
/* 959px以下 タブレット向け*/
@media screen and (max-width:959px) {

}
/* 560px以下 スマホ向け*/
@media screen and (max-width: 560px) {
  #gallery {
    background-position: left top, right bottom 0;
    background-size: 150px auto, 80px auto;
    max-height: 2540px;
  }
  #gallery .ttl{
    padding-left: 10%;
  }
  #gallery .ttl .ja{
    height: 30px;
  }
  #sb_instagram #sbi_load {
    text-align: center!important;
  }
}



/*ーーーーーーーーーー 会社概要 ーーーーーーーーーー*/
#company_info, #our_service {
  background-image: url(/img/bg_our_service_top_left.svg), url(/img/bg_our_service_top_right.svg),
  url(/img/bg_our_service_centor_left.svg),
  url(/img/bg_our_service_centor_left.svg),
  url(/img/bg_our_service_centor_right.svg),
  url(/img/bk_box1_bottom_left.svg), 
  url(/img/bk_box1_bottom_center.svg), 
  url(/img/bk_box1_bottom_right.svg);
    background-position: left top, right top, left 35%, left 70%, right 50%, left bottom, center bottom, right bottom;
    background-size: 200px auto, 160px auto, 100px auto, 100px auto, 100px auto,  30%, 45%, 30%;
    background-repeat: no-repeat;
}
#company_info {
  padding-bottom: 15%;
}
.campany-info {
  margin: 100px auto 45px 100px;
}
.campany-info .message,
.campany-info .vision,
.campany-info .campany {
  padding: 0 5%;
}
.campany-info h3 {
  padding: 5% 0;
}
.campany-info .message {
  position: relative;
  padding-bottom: 15%;
}

.campany-info .message,
.campany-info .vision {
  border-bottom: 1px solid #707070;
}
.message_text {
  display: flex;
  align-items: flex-end;
}
.message_text .name {
  /* text-align: right; */
  padding-top: 30px;
  font-family: 'Noto Serif JP', YuMincho, serif;
}
.campany-info img {
  /* border:1px solid; */
  width: 30%;
  height:auto;
}
.message_text p {
  padding-left: 10%;
}
#campany, #yagi {
  height: 150px;
  width: auto;
}
#campany {
  position: absolute;
  bottom: 20px;
  right: 5%;
}
#campany svg {
  width: auto!important;
  height: auto!important;
}

.campany-info .vision li {
  list-style-position: inside;
}
.vision-img {
  display: flex;
  justify-content: space-around;
}
.vision-picture {
  text-align: center;
  line-height: 1.2;
  font-size: 1.8rem;
}
.vision-picture img {
  width: 90%;
}
.vision-detail {
  padding: 30px 0;
}

.campany-info .campany dl {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.campany-info .campany dt {
  width: 25%;
  padding: 15px 20px;
  border-bottom: 1px dotted #707070;
  box-sizing: border-box;
}
.campany-info .campany dd {
  width: 75%;
  padding: 15px 20px;
  border-bottom: 1px dotted #707070;
  box-sizing: border-box;
  line-height: 1.5;
}
/* 959px以下 タブレット向け*/
@media screen and (max-width:959px) {
  .campany-info {
    margin: 0 auto;
    width: 90%;
  }
  .campany-info .message {
    padding: 20% 5% 15% 20%;
  }
  .campany-info .vision {
    padding: 0 5%;
  }
  .campany-info .campany {
    margin: 0;
    padding: 0 5% 10% 5%;
  }
  .campany-info .message .indent {
    display: inline-block;
  }
  #campany {
    right: 85%;
  }
  .vision-picture p {
    padding: 0 5px;
    font-size: 1.4rem;
  }
}
/* 560px以下 スマホ向け*/
@media screen and (max-width: 560px) {

  .campany-info .message h3,
  .campany-info .vision h3,
  .campany-info .campany h3 {
    text-align: center;
  }
  .message_text{
    display: block;
  }
  .message_text p {
    padding: 0;
    text-align: left;
  }
  .campany-info img {
    width: 50%;
  }

  .campany-info .vision p {
    text-align: left;
  }
  .vision-img{
    display: block;
  }
  .vision-picture {
    font-size: 1.4rem;
    padding-top: 5%;
  }
  .campany-info .campany dt,
  .campany-info .campany dd {
    padding: 12px 0;
    line-height: 1.5;
  }
  .campany-info img {
    width: 100%;
  }
  .campany-info .message_text img {
    width: 50%;
    display: block;
    margin: 0 auto;
  }
  .vision-picture p {
    text-align: center;
  }
  .message_text .name p{
    width: 300px;
    font-size: 1.6rem;
  }
  .message_text .name p span{
    font-size: 1.6rem;
  }
  .campany-info .message,
  .campany-info .campany {
    padding: 0 0 15% 0;
  }
  .campany-info .vision {
    padding: 0;
  }
  #campany {
    right: 0;
  }
}

/* ---------------------- アクセス ---------------------- */
#access{
  background-image: url(/img/bg_map_top_right.svg),url(/img/bg_map_bottom_right.svg);
  background-position: right top,right bottom;
  background-repeat: no-repeat;
  background-size: 200px, 150px;
}
.map{
  padding: 0;
}
.map .ttl.vertical{
  left: auto;
  right: 0;
  margin: 5%;
}
.access_map {
  display: flex;
  padding: 5% 0;
}
.map_map{
  width: 60%;
}
.map_address{
  width: 40%;
  padding: 0 15% 0 3%;
}
.map_address dl {
  padding-bottom: 5%;
}
.map_address dl dt {
  font-weight: bold;
}
.map_address dl dd {
  line-height: 1.5;
}

#yadokari {
  position: absolute;
  width: 45px;
  bottom: -15px;
  left: 50%;
  animation-name: anime_yadokari;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  animation-duration: 100s;
  animation-iteration-count: infinite;
}
@keyframes anime_yadokari {
  0%{
    left: 50%;
    transform: scale(1, 1);
  }
  50%{
    left: 90%;
    transform: scale(1, 1);
  }
  51%{
    left: 90%;
    transform: scale(-1, 1);
  }
  100%{
    left: 50%;
    transform: scale(-1, 1);
  }
}

/* 959px以下 タブレット向け*/
@media screen and (max-width:959px) {
  .box3.map {
    padding: 10% 5%;
  }
  .access_map {
    display: block;
    padding: 0;
  }
  .map_map{
    width: 100%;
  }
  .map_address{
    width: 100%;
    padding: 0;
  }
  .info{
    width: 85%;
  }
}
/* 560px以下 スマホ向け*/
@media screen and (max-width: 560px) {
  #access{
    position: relative;
    padding: 30% 0 15% 0;
  }
  .map .ttl.vertical{
    position: absolute;
    top: 0;
    margin: 0 3% 0 0;
  }
  .map .ttl.vertical .ja{
    width: 2.5rem;
  }
  .access_map{
    width: 90%;
    margin: 0 auto;
  }

}

/*ーーーーーーーーーー　お知らせ　ーーーーーーーーーー*/
#information {
  background-image: url(/img/bg_our_service_top_left.svg),
   url(/img/bg_gallery_bottom_right.svg);
  background-position: left top, right bottom 0;
  background-size: 150px auto, 80px auto;
  background-repeat: no-repeat;
  height: auto;
  min-height: 260px;
  white-space: nowrap;
}
#information .ttl.vertical{
  /* padding: 10% 0 0 5%; */
  margin-top: 3%;
}
.info {
  width: 80%;
  margin: 0 0 0 auto;
/*  border: 1px solid;  */
  list-style-type:none;
  background-image:none;
  padding-left:0;
}

.info span.title_text{
  margin:0 0 0 4%;
}
.info ul{
  list-style: none;
}
.info li {
  padding-bottom: 1%;
}
.info li p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.info a.info-list {
  display: block;
  text-align: right;
  position: absolute;
  bottom: 5%;
  right: 10%;
  color: #1a0dab;
}
/* #information {
  white-space: nowrap;
} */
/* 959px以下 タブレット向け*/
@media screen and (max-width:959px) {

}
/* 560px以下 スマホ向け*/
@media screen and (max-width: 560px) {
  #information {
    background-size: 100px auto, 60px auto;
    padding-top: 10%;
    padding-bottom: 10%;
   }
  #information .ttl.vertical{
    position: absolute;
    left: 0;
    margin: 5%;
    padding: 0;
    width: 50px;
  }
  .info span.date{
    display: block;
  }
  .info li {
    padding-bottom: 3%;
  }
}

/*-------------------- footer --------------------*/
footer {
  margin: 0 auto;
  width: 90%;
  height: 350px;
  font-size: 1.8rem;
}
.fotter_b {
  background: rgba(0,0,0,0.7);
  color: #fff;  
  height: 100%;
  float: left;
  padding: 5% 3%;
  box-sizing: border-box;
  width: 50%;
}
.fotter_b a{
  color: #fff;
  display: block;
}
.footer_contact {
  display: flex;
  margin-top: 3%;
  justify-content: space-evenly;
}
.footer_contact .box{
  border: 1px solid #fff;
  padding: 3%;
  text-align: center;
  font-size: 1.6rem;
  width: 50%;
}
.footer_contact .box a {
    text-decoration:none;
    line-height: 1.4;
}
.contact_button{
  border: 1px solid #fff;
  margin-top: 20px;
  font-size: 1.6rem;
  padding: 5px;
}
.footer_phone-number {
  font-size: 2.4rem;
}

.reception-time{
  line-height: 1;
  font-size: 1.6rem;
}
.fotter_w {
  background: rgba(255,250,244,0.86);
  height: 100%;
  float: left;
  padding: 5% 3%;
  box-sizing: border-box;
  /* color: black; */
  width: 50%;
  font-size: 1.6rem;
}
.sub_name{
  font-size: 1.5rem;
  padding: 0 0 1% 8px;
  margin: 0;
  line-height: 1;
}
.company_name {
  font-size: 2.8rem;
  line-height: 1;
  font-family: 'Noto Serif JP', YuMincho, serif;
}
address {
  padding-top: 5%;
  font-style: normal;
  font-size: 1.6rem;
}

.footer2{  
  width: 70%;
  height: 350px;
  margin: 0 25%;
}
._copyright {
  color: #808080;
  font-size: smaller;
}

/* ----------- */
.contact_button {
  opacity: 0.8;
  color: #333!important;
  font-weight: bold;
  -webkit-transition: all 0.7s ease-out;
  transition: all 0.7s ease-out;
  background: -webkit-linear-gradient(180deg,                           #358010,
  #ffffff,
  #868686,
  #3d3d3d);
  background: -webkit-linear-gradient(right,                             #358010,
  #ffffff,
  #868686,
  #3d3d3d);
  background: linear-gradient(270deg,
  #358010,
  #358010,
  #ffffff,
  #ffffff);
  background-position: 1% 50%;
  background-size: 300% 300%;
}

/* マウスオーバー時 */
.contact_button:hover {
  background-position: 99% 50%;
  color: #ffffff!important;
  border: 1px solid #358010;
  cursor: pointer;
}

.nav-list-link {
  transition: all .3s ease 0s;
}
.nav-list-link:hover {
  transform: scale(1.1);
}


/* 959px以下 タブレット向け*/
@media screen and (max-width:959px) {
  footer {
    width: 95%;
  }
	.fotter_b, .fotter_w {
		width: 100%;
    height: auto;
    padding: 5%;
	}
  .contact_button{
    padding: 3%;
    margin: 3%;
  }
  .fotter_w {
    font-size: 1.6rem;
  }


}
/* 560px以下 スマホ向け*/
@media screen and (max-width: 560px) {
  .footer_contact {
    display: block;
  }
  .reception-time {
    line-height: 1;
    font-size: 1.4rem;
  }
  .footer_contact .box {
    width: 90%;
    margin: 0 auto;
  }
}

/*ーーーーーーーーーーお問合せフォームカスタムCSSーーーーーーーーーー*/
#contact{
  padding-bottom: 15%;
}
.contact-input{
  /* margin-left: 7%; */
  width: 80%;
  margin: 0 auto;
}

.contact-header-title{
  margin-bottom: 2%;
}

.btn--orange,
a.btn--orange {
  color: #fff;
  background-color: #358010;
  padding: 7px 50px;
  font-size: 2.4rem;
}

.btn--orange:hover,
a.btn--orange:hover {
  color: #fff;
  background: #358010;
}

.contact-header{
  /* margin-top: 3%; */
  text-align: center;
  width: 80%;
  margin: 10% auto 0 auto;
}

.contact-description{
  margin: 4% auto;
  text-align: center;
  width: 80%;
}
/* .contact-description p{
  text-align: left;
} */

/* カスタムフォーム */
.form__wrap {
  width: 100%;
  max-width: 900px;/*フォームの最大幅*/
  margin-right: auto;
  margin-left: auto;
}
.wpcf7 .template02 {
  color: #666;
  font-size: 15px;
}
.wpcf7 .template02 a {
  margin: 0;
  padding: 0;
  text-decoration: underline;
  color: inherit;
  transition: opacity .25s;
  color: #1a0dab;
}
.wpcf7 .template02 a:hover {
  opacity: .5;
  transition: opacity .25s;
}
.wpcf7 .template02 div.form__row {
  display: flex;
  margin: 0;
  padding: 0;
/*  border-top: 1px solid #efe8e5; */
}
.wpcf7 .template02 div.form__row.row-privacy,
.wpcf7 .template02 div.form__row.row-submit {
  display: block;
  border-top: 0;
  margin-top: 1em;
  text-align: center;
}
.wpcf7 .template02 p.form__label,
.wpcf7 .template02 p.form__body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.wpcf7 .template02 p.form__label {
  width: 36%;
  padding: 1.5em 1em;
}
.wpcf7 .template02 p.form__body {
 width: 64%;
  padding: 1.5em 1em;
}
.wpcf7 .template02 div.form__row.row-privacy .form__body,
.wpcf7 .template02 div.form__row.row-submit .form__body {
  width: 100%;
}
.wpcf7 .template02 p.form__label label {
  position: relative;
  margin: 0;
  padding: 0;
/*  padding-left: 44px; */
  box-sizing: border-box;
}
.wpcf7 .template02 p.form__label label::after {
  left: 120px;
}
.wpcf7 .template02 p.form__label.is-required label {
  position: relative;
}
.wpcf7 .template02 p.form__label.is-required label::after {
  content: "必須";
  display: inline-block;
  /* position: absolute; */
  /* top: 0; */
  /* right: 0; */
  width: 36px;
  /* padding: 0 5px; */
  background-color: #358010;
  color: #fff;
  font-size: 11px;
  text-align: center;
  margin-left: 10px;
}
/* テキストフィールド */
.wpcf7 .template02 input[type=text],
.wpcf7 .template02 input[type=tel],
.wpcf7 .template02 input[type=email],
.wpcf7 .template02 textarea {
  width: 100%;
  margin: 0;
  padding: .5em 1em;
  border: 1px solid #808080;
  border-radius: 4px;
  box-shadow: none;
  background-color: #fefefe;
  color: inherit;
  font-family: inherit;
  font-weight: inherit;
  font-size: 16px;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
/* テキストフィールド placeholder */
.wpcf7 .template01 input[type=text]::placeholder,
.wpcf7 .template01 input[type=tel]::placeholder,
.wpcf7 .template01 input[type=email]::placeholder,
.wpcf7 .template01 input[type=url]::placeholder,
.wpcf7 .template01 input[type=date]::placeholder,
.wpcf7 .template01 input[type=number]::placeholder,
.wpcf7 .template01 textarea::placeholder {
  color: #ccc;
}
.wpcf7 .template01 input[type=text]:-ms-input-placeholder,
.wpcf7 .template01 input[type=tel]:-ms-input-placeholder,
.wpcf7 .template01 input[type=email]:-ms-input-placeholder,
.wpcf7 .template01 input[type=url]:-ms-input-placeholder,
.wpcf7 .template01 input[type=date]:-ms-input-placeholder,
.wpcf7 .template01 input[type=number]:-ms-input-placeholder,
.wpcf7 .template01 textarea:-ms-input-placeholder {
  color: #ccc;
}
.wpcf7 .template01 input[type=text]::-ms-input-placeholder,
.wpcf7 .template01 input[type=tel]::-ms-input-placeholder,
.wpcf7 .template01 input[type=email]::-ms-input-placeholder,
.wpcf7 .template01 input[type=url]::-ms-input-placeholder,
.wpcf7 .template01 input[type=date]::-ms-input-placeholder,
.wpcf7 .template01 input[type=number]::-ms-input-placeholder,
.wpcf7 .template01 textarea::-ms-input-placeholder {
  color: #ccc;
}
/* テキストフィールド フォーカス時 */
.wpcf7 .template01 input[type=text]:focus,
.wpcf7 .template01 input[type=tel]:focus,
.wpcf7 .template01 input[type=email]:focus,
.wpcf7 .template01 input[type=url]:focus,
.wpcf7 .template01 input[type=date]:focus,
.wpcf7 .template01 input[type=number]:focus,
.wpcf7 .template01 textarea:focus {
  outline: 0;
  border: 1px #6c5d2f solid;
  box-shadow: 0 0 2px 2px rgba(133, 112, 92, 0.5);
}
/* チェックボックス */
.wpcf7 .template02 input[type=checkbox] {
  display: none;
}
.wpcf7 .template02 input[type=checkbox] + span {
  cursor: pointer;
  position: relative;
  margin: 0;
  padding: 0 1em 0 1.8em;
  font-size: inherit;
  box-sizing: border-box;
  transition: opacity .25s ease;
}
.wpcf7 .template02 input[type=checkbox] + span::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 1.24em;
  height: 1.24em;
  border: 1px solid #808080;
  background-color: #fefefe;
  box-sizing: border-box;
}
.wpcf7 .template02 input[type=checkbox] + span::after {
  content: "";
  opacity: 0;
  display: block;
  position: absolute;
  top: 0.15em;
  left: 0.44em;
  width: 0.4em;
  height: .8em;
  border-bottom: 3px solid #358010;
  border-right: 3px solid #358010;
  box-sizing: border-box;
  transform: rotate(40deg);
  transition: opacity .25s ease;
}
.wpcf7 .template02 input[type=checkbox]:checked + span {
  color: #6c5d2f;
  transition: all .25s ease;
}
.wpcf7 .template02 input[type=checkbox]:checked + span::before {
  opacity: 1;
  transition: opacity .25s ease;
}
.wpcf7 .template02 input[type=checkbox]:checked + span::after {
  opacity: 1;
  transition: opacity .25s ease;
}
/* ラジオボタン */
.wpcf7 .template02 input[type=radio] {
  display: none;
}
.wpcf7 .template02 input[type=radio] + span {
  cursor: pointer;
  position: relative;
  margin: 0;
  padding: 0 1em 0 1.8em;
  font-size: inherit;
  box-sizing: border-box;
  transition: opacity .25s ease;
}
.wpcf7 .template02 input[type=radio] + span::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 1em;
  height: 1em;
  border: 1px solid #808080;
  border-radius: 50%;
  background-color: #fefefe;
  box-sizing: border-box;
  transition: opacity .25s ease;
}
.wpcf7 .template02 input[type=radio] + span::after {
  content: "";
  display: block;
  opacity: 0;
  position: absolute;
  box-sizing: border-box;
  transition: opacity .25s ease;
}
.wpcf7 .template02 input[type=radio]:checked + span::before {
  box-shadow: 0 0 2px 2px rgba(133, 112, 92, 0.5);
}
.wpcf7 .template02 input[type=radio]:checked + span::after {
  opacity: 1;
  top: 0;
  left: 0;
  width: 1em;
  height: 1em;
  background-color: #358010;
  border-radius: 50%;
  box-sizing: border-box;
  transition: opacity .25s ease;
}
/* セレクト */
.wpcf7 .template02 span.select-wrap {
  position: relative;
  width: 250px;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.wpcf7 .template02 select {
  cursor: pointer;
  width: 250px;
  max-width: 100%;
  margin: 0;
  padding: .5em 3.5em .5em 1em;
  border: 1px solid #c4bbb8;
  border-radius: 4px;
  box-shadow: none;
  background-color: #fefefe;
  background-image: linear-gradient(90deg, #d4cbb2, #d4cbb2);
  background-position: 100% 0;
  background-size: 2em 3.5em;
  background-repeat: no-repeat;
  color: inherit;
  font-size: inherit;
  line-height: 1;
  box-sizing: border-box;
  transition: border-color 0.2s ease, outline 0.2s ease;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.wpcf7 .template02 select::-ms-expand {
  display: none;
}
.wpcf7 .template02 span.select-wrap::after {
  content: "";
  pointer-events: none;
  position: absolute;
  display: block;
  width: .6em;
  height: .6em;
  top: 50%;
  right: .8em;
  margin-top: -3px;
  border-bottom: 1px solid #6c5d2f;
  border-right: 1px solid #6c5d2f;
  transform: rotate(45deg) translateY(-50%);
  transform-origin: 50% 0;
  box-sizing: border-box;
}
.wpcf7 .template02 select:focus {
  outline: 0;
  border: 1px #6c5d2f solid;
  box-shadow: 0 0 2px 2px rgba(133, 112, 92, 0.5);
}
.wpcf7 .template02 span.select-wrap:focus-within::after {
  border-bottom: 1px solid #6c5d2f;
  border-right: 1px solid #6c5d2f;
}
/* 送信ボタン */
.wpcf7 .template02 .submit-btn {
  position: relative;
  width: 320px;
  height: 65px;
  max-width: 100%;
  margin: 0;
  padding: 0;
  margin-left: auto;
  margin-right: auto;
}
.wpcf7 .template02 input[type="submit"] {
  cursor: pointer;
  width: 230px;
  max-width: 100%;
  padding: 5px 18px;
  box-shadow: none;
  border: 1px #358010 solid;
  background-color: #358010;
  color: #fff;
  font-size: 18px;
  text-align: center;
  box-sizing: border-box;
  transition: all .25s;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.wpcf7 .template02 input[type="submit"]:disabled {
  cursor: not-allowed;
  box-shadow: none!important;
  border: 1px solid #cdcdcd!important;
  background-color: #cdcdcd!important;
  color: #333!important;
}
.wpcf7 .template02 input[type="submit"]:hover {
  box-shadow: 0 0 2px 2px rgba(133, 112, 92, 0.5);
  background-color: #fff;
  color: #6c5d2f;
  transition: all .25s;
}
.wpcf7 .template02 input[type="submit"]:focus {
  outline: 0;
  border: 1px #6c5d2f solid;
  box-shadow: 0 0 2px 2px rgba(133, 112, 92, 0.5);
}



/*ーーーーーーーーーーレスポンシブ対応ーーーーーーーーーー*/
@media screen and (max-width:959px) {/*　画面サイズが561pxから959pxまで*/

  .fade-in-bottom {
    /* margin: 200px auto; */
    padding: 30% 10%;
 }

  /* ナビゲ―ション */
  #navigation {display:none;}
  #anime_top {display: none;}
  .header_contact {display: none;}

  #mainContents {
    padding: 0;
  }
	.box1, .box2, .box3 {
		width: 95%;
	}
  .box1 {
    background-size: 150px, 30%, 45%, 30%;
  }

  /* 見出し */
  .ttl.vertical {
    margin: 5% 0 0 3%;
  }

  /* メインビジュアル（背景） */
  #main_workation {
    right: 0;
  }
  #main_child {
    left: 0;
  }
  #main_fishing {
    left: 0;
  }

  /* 背景：事業案内・会社概要 */
  #our_service, #company_info {
    background-image: url(/img/bg_our_service_top_left.svg), url(/img/bg_our_service_top_right.svg),
    url(/img/bk_box1_bottom_left.svg), 
    url(/img/bk_box1_bottom_center.svg), 
    url(/img/bk_box1_bottom_right.svg);
      background-position: left top, right top, left bottom, center bottom, right bottom;
      background-size: 20% auto, 20% auto, 30%, 45%, 30%;
      background-repeat: no-repeat;
  }



  .contact-description p{
    text-align: left;
  }

  .nav-list-item.sns-icon {
    display: block;
    background-image: url(/img/bk_box1_bottom_left.svg), url(/img/bk_box1_bottom_right.svg);
    background-position: left bottom, right bottom;
    background-size: 60%, 50%;
    background-repeat: no-repeat;
    padding-bottom: 30%!important;
  }
}
@media screen and (max-width: 560px) {/* 560px以下 スマホ向け*/
  body{
      font-size:1.6rem;/* 16px*/
      line-height: 2;
  }
  h1{
      font-size: 3.5rem;/* 35px*/
      text-shadow: -2px 3px 0 rgba(0, 0, 0, 0.4);
  }
  h1.fade-in-bottom span.kana {
    font-size: calc(3.5rem * 0.85);
  }
  /* Firefox */
  _:lang(x)::-moz-placeholder,
  h1 {
    text-shadow: 2px 3px 0 rgba(0, 0, 0, 0.4);
  }​
  /* Safari */
  _:lang(x)+_:-webkit-full-screen-document,
  h1 {
    text-shadow: 2px 3px 0 rgba(0, 0, 0, 0.4);
  }

  h2 {
      font-size: 2.5rem;/* 25px*/
  }
  h3 {
      font-size: 2.0rem;/* 25px*/
  }

  /* メインビジュアル（背景） */
  #main_workation {
    bottom: 75px;
    right: -100px;
  }
  .fade-in-bottom {
    padding: 50% 10%;
  }
  .fade-in-bottom img {
    width: 300px;
  }


  .box1 {
    background-image:
    url(/img/bk_box1-top.svg),
    url(/img/bk_box1_bottom_left.svg),
    url(/img/bk_box1_bottom_right.svg);
    background-position: left top, left bottom, right bottom;
    background-size: 180px auto, 60%, 50%;
    padding-bottom: 20%;
  }
  #company_info, #our_service {
    background-image: 
    url(/img/bg_our_service_top_left.svg),
    url(/img/bg_our_service_top_right.svg),
    url(/img/bk_box1_bottom_left.svg), 
    url(/img/bk_box1_bottom_right.svg);
      background-position: left top, right top, left bottom, right bottom;
      background-size: 35% auto, 25% auto, 60%, 50%;
  }

  .ttl.vertical{
    position: static;
    margin: 0 auto;
    padding: 20px 0;
    width: auto;
  }
  .ttl .en {
    font-size: 1.4rem;
    text-shadow: 2px 2px 0 rgba(0,0,0,0.2);
  }
  .ttl .ja {
    text-shadow: -1px 2px 0 rgba(0,0,0,0.2);
    width: 3.5rem;
  }
  /* Firefox */
  _:lang(x)::-moz-placeholder,
  .ttl .ja {
    text-shadow: 1px 2px 0 rgba(0, 0, 0, 0.2);
  }
  /* Safari */
  _:lang(x)+_:-webkit-full-screen-document,
  .ttl .ja {
    text-shadow: 1px 2px 0 rgba(0, 0, 0, 0.2);
  }





  /* お問い合わせ */
  #contact{
    padding-bottom: 30%;
  }
  .contact-description{
    margin: 4% auto;
    width: 90%;
  }
  .contact-input {
    width: 100%;
  }
  .contact-header{
    margin: 5% auto 0 auto;
  }
  .btn--orange,
  a.btn--orange {
  padding: 7px 30px;
  font-size: 2.0rem;
  }


}
@media (min-width: 960px) {/* 960px以上 PC向け*/

  /* ナビゲーション */
  #navigation-sp {display:none;}
  /* #navigation-sp-con {display:none;} */

  body {
    font-size:2.0rem;/* 20px*/
  }
  h1 {
    font-size: 5.4rem;/* 54px*/
  }
  h2 {
    font-size: 4.0rem;/* 40px*/
  }
  h3 {
    font-size: 3.0rem;/* 40px*/
    line-height: 1.3;
  }

  h1.fade-in-bottom span.kana {
    font-size: calc(5.4rem * 0.85);
  }



}

@media screen and (min-width:768px) {/* 768px以上 タブレット向け*/
}
@media screen and (max-width:767px) {/* 画面サイズが767pxまではここを読み込む*/
  /* 見出し */
  .ttl.vertical {
    width: 80px;
  }
}
@media screen and (min-width: 1024px) {/* 1024px以上 PC向け*/
  /* #navigation-sp {display:none;} */
  /* #navigation-sp-con {display:none;} */
}
@media screen and (max-width: 1220px) {/* 画面サイズが1220pxまではここを読み込む*/
  /* #navigation {display:none;} */
  /* #anime_top {display: none;} */
  /* .header_contact {display: none;} */
  nav p.headline a{
    font-size: 1.5rem;
  }  
  nav p.headline a span{
    font-size: 1rem;
  }
  .nav-list-ja, .nav-list-ja.kana {
    height: 2.8rem;
  }
  
  nav ul.nav-list li.nav-list-item a {
    font-size: 1.6rem;
  }
  nav ul.nav-list li.nav-list-item a span{
    font-size: 1.2rem;
  }
  /* .service_small .service_cont h3 {
    font-size: 2.4rem;
  } */
}
@media only screen and (max-width: 768px) {/* 画面サイズが768pxまではここを読み込む*/
  .wpcf7 .template02 div.form__row {
    display: block;
  }
  .wpcf7 .template02 p.form__label {
    width: 100%;
    padding: 1.5em 1em 0;
  }
  .wpcf7 .template02 p.form__body {
    width: 100%;
    padding: 1em 1em 1.5em;
  }
}
@media screen and (max-width: 400px) {/* 400px以下 スマホ向け*/
  /* .text-box {
    width: 320px;
  } */
  .fade-in-bottom {
    margin: 200px auto;
    padding: 0;
 }
 .fade-in-bottom img {
  width: 250px;
}

	#_abalink {
	    padding: 5%;
	}
  .indent {
    display: inline;
  }
  .campany-info .message .indent {
    display: inline-block;
  }
  .message_text .name p{
    width: 200px;
  }
  #access {
    background-size: 150px, 100px;
  }
  .tel-area{
    display: inline-block;
    width: 230px;
    margin: 0 auto;
  }

}
/*----------------------カスタム投稿（info）------------------------*/
/*-----------一覧-------------*/
.post-type-archive-news h2 span.en{
  font-size:0;
}
.post-type-archive-news h2 span.en:before{
  font-size: 2.0rem;
  content: "News";
}
.post-type-archive-news h2 span.ja{
  font-size:0;
}
.post-type-archive-news h2 span.ja:before{
  font-size: 4.8rem;
  content: "お知らせ";
}
span.color-accent{
  display: none;
}

/*-----------詳細-------------*/
.single-news h2 span.en{
  font-size:0;
}
.single-news h2 span.en:before{
  font-size: 2.0rem;
  content: "News";
}
.single-news h2 span.ja{
  font-size:0;
}
.single-news h2 span.ja:before{
  font-size: 4.8rem;
  content: "お知らせ";
}



/* #site-content{
  width: 80%;
} */

/*----------------- サービス詳細ページ------------------ */
/* .ourservice {
  background-image: url(/img/aba_back.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
} */
#service_detail {
  margin-bottom: 100px;
  background: none;
  padding: 0;
}
.ourservice:before {
  content: "";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100vh;
  background: url(../../../../img/info_back.jpg) center no-repeat;
  background-size: cover;
}
.ourservice #navigation {
  position: fixed;
}

#service_detail .ttl.vertical {
  position: static;
  max-height: 300px;
  height: 50%;
}
#service_detail .ttl.vertical .en,
#service_detail .ttl.vertical .ja {
  color: #fff;
}
.service_box {
  border: 1px solid rgba(255,250,244,0.96);
  width: 100%;
  margin: 20% auto 0 auto;
  background: rgba(255,250,244,0.96);
  padding: 0 5% 5% 5%;
  box-sizing: border-box;
}
.service_box #service1,
.service_box #service2,
.service_box #service3,
.service_box #service4,
.service_box #service5,
.service_box #service6 {
  margin: -15% auto 50px auto;
  width: 40%;
  min-width: 300px;
  height: auto;
}
.service_box .service_txt {
  padding: 15px 0 20px 0;
}
.service_desc1,
.service_desc2 {
  display: flex;
  padding: 10px 0;
}
.service_desc2 {
  flex-flow: row-reverse;
}
.service_desc1 img,
.service_desc2 img {
  flex: 1;
  display: block;
  width: 300px;
  height: calc(300px * 0.75);
  /* border: 1px solid; */
  margin: 0 auto;
  object-fit: contain;
}
.service_desc1 .txt {
  flex: 1;
  padding: 0 0 0 20px;
}
.service_desc2 .txt {
  flex: 1;
  padding: 0 20px 0 0;
}

@media screen and (max-width:959px) {
  #service_detail .ttl.vertical {
    margin: 100px auto 0 auto;
  }
  .service_box {
    padding: 0 5% 50px 5%;
  }
  .service_desc1,
  .service_desc2 {
    display: block;
    padding: 30px 0 0 0;
  }
  .service_desc1 img,
  .service_desc2 img{
    width: 100%;
  }
  .service_desc1 .txt{
    padding: 0;
  }
}
/* 560px以下 スマホ向け*/
@media screen and (max-width: 560px) {
  .service_box #service1,
  .service_box #service2,
  .service_box #service3,
  .service_box #service4,
  .service_box #service5,
  .service_box #service6 {
    margin: -25% auto 50px auto;
    width: 100%;
    min-width: 100%;
  }
}