@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);
@import url('https://fonts.googleapis.com');

/* Global */

html {
  scroll-behavior: smooth; /* これだけ……だが…… */
}

body {
  font-family: sans-serif;
  font-weight: 900;
  background-color: #fff;
  color: #222222;
  margin:0;
  padding:0;
}

@media print , screen and (min-width:1025px){
}
@media screen and (min-width: 1025px) {
  body {min-width:1024px;}
}
@media screen and (max-width: 1024px) {
  body {min-width:100%;}
}
@media screen and (max-width: 480px) {
  body {min-width:100%;}
}

article, section, div, dl, dt, dd, ul, ol, h1, h2, h3, h4, h5, h6, p {
  margin: 0;
  padding: 0;
}
img {
  max-width: 100%;
}
a{
  color: #222222ff;
}
a:hover{
  opacity: 0.7;
  text-decoration: none;
  color: #1c5ad6;
}
a:link {
}
a:visited {
  color: #222222ff;
  text-decoration: none;
}

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}

.clearfix {
  min-height: 1px;
}

* html .clearfix {
  height: 1px;
  /*\*//*/
  height: auto;
  overflow: hidden;
  /**/
}

.small{
  font-size: 80%;
}
.red{
  color:red;
}
.bold{
  font-weight: bold;
}
.indent{
  margin-left: 10px;
  text-indent: -10px;
}
.atten {
  margin:0 10px 10px 10px;
  padding:0;
  color:#F00;
}

/* Space */
.top10 {
  margin-top: 10px;
}
.top20 {
  margin-top: 20px;
}
.top30 {
  margin-top: 30px;
}
.top40 {
  margin-top: 40px;
}
.top50 {
  margin-top: 50px;
}
.topm10 {
  margin-top: -10px;
}
.topm20 {
  margin-top: -20px;
}
.topm30 {
  margin-top: -30px;
}
.topm40 {
  margin-top: -40px;
}
.topm50 {
  margin-top: -50px;
}
.last3 {
  margin-bottom: 3px;
}
.last5 {
  margin-bottom: 5px;
}
.last10 {
  margin-bottom: 10px;
}
.last15 {
  margin-bottom: 15px;
}
.last20 {
  margin-bottom: 20px;
}
.last30 {
  margin-bottom: 30px;
}
.last80 {
  margin-bottom: 80px;
}
.left5 {
  margin-left: 5px;
}
.left10 {
  margin-left: 10px;
}
.left15 {
  margin-left: 15px;
}
.left20 {
  margin-left: 20px;
}
.left30 {
  margin-left: 30px;
}
.left40 {
  margin-left: 40px;
}
.left70 {
  margin-left: 70px;
}
.indent {
  text-indent: -10px;
}
.center {
  text-align: center;
}
.right {
  text-align: right;
}
.flex{
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
}
p.error {
  margin:10px auto; 
  text-align: center;
  color: #2B693E;
  font-size:140%;
  line-height: 160%;
}




/* Adobe Fonts */

.poppins-thin {
  font-family: "Poppins", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.poppins-extralight {
  font-family: "Poppins", sans-serif;
  font-weight: 200;
  font-style: normal;
}

.poppins-light {
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.poppins-regular {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.poppins-medium {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.poppins-semibold {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.poppins-bold {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.poppins-extrabold {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-style: normal;
}

.poppins-black {
  font-family: "Poppins", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.poppins-thin-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 100;
  font-style: italic;
}

.poppins-extralight-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 200;
  font-style: italic;
}

.poppins-light-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.poppins-regular-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.poppins-medium-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: italic;
}

.poppins-semibold-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-style: italic;
}

.poppins-bold-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.poppins-extrabold-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-style: italic;
}

.poppins-black-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 900;
  font-style: italic;
}

.noto-sans-jp-100 {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
}

.noto-sans-jp-200 {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: normal;
}

.noto-sans-jp-300 {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}

.noto-sans-jp-400 {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.noto-sans-jp-500 {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

.noto-sans-jp-600 {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
}

.noto-sans-jp-700 {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}

.noto-sans-jp-800 {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 800;
  font-style: normal;
}

.noto-sans-jp-900 {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: normal;
}


/* PC */


  * {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
  }
  .pcOnly {}
  .tbOnly {display:none;}
  .mbOnly {display:none;}



.wrapper{
  margin: 0 auto;
  padding: 0;
}
@media print , screen and (min-width:1561px){
  .wrapper{
    width: 1560px; 
  }
}
@media screen and (min-width: 481px) and (max-width: 1560px) {
  .wrapper{
    width: 98%; 
    margin: 0 auto;
    padding: 0;
  }
}
@media print , screen and (max-width:480px) {
  .wrapper{
    width: 98%; 
    margin: 0 auto;
    padding: 0;
  }
}
@media print , screen and (max-width:300px) {
  .wrapper{
    width: 99%; 
    margin: 0 auto;
    padding: 0;
  }
}


@media print , screen and (min-width:1025px){
}
@media print , screen and (min-width: 1025px) and (max-width: 1440px) {
}
@media print , screen and (min-width: 969px) and (max-width: 1024px) {
}
@media print , screen and (min-width: 835px) and (max-width: 968px) {
}
@media print , screen and (min-width: 441px) and (max-width: 834px) {
}
@media print , screen and (min-width: 376px) and (max-width: 440px) {
}
@media print , screen and (min-width: 321px) and (max-width: 375px) {
}
@media print , screen and (max-width:320px) {
}


@media screen and (min-width: 900px) and (max-width: 940px) and (orientation: portrait) {
}
@media screen and (min-width: 810px) and (max-width: 899px) and (orientation: portrait) {
}
@media screen and (max-width: 809px) and (orientation: portrait) {
}
@media screen and (min-width: 520px) and (max-width: 720px) and (orientation: portrait) {
}
@media screen and (min-width: 721px) and (max-width: 809px) and (orientation: portrait) {
}


@media screen and (min-width: 1024px) and (orientation: landscape) {
}
@media screen and (min-width: 721px) and (max-width: 960px) and (orientation: landscape) {
}

/* ▼ iPad Air 横向き */
@media only screen and (min-device-width: 1178px) and (max-device-width: 1188px) and (orientation: landscape){
}

@media screen and (min-width: 810px) and (max-width: 1024px) and (orientation: landscape) {
}
@media screen and (max-width: 809px) and (orientation: portrait) {
}
@media screen and (min-width: 721px) and (max-width: 960px) and (orientation: landscape) {
}
@media screen and (min-width: 661px) and (max-width: 720px) and (orientation: landscape) {
}
@media screen and (min-width: 360px) and (max-width: 660px) and (orientation: landscape) {
}

@media screen and (min-width: 360px) and (max-width: 1024px) and (orientation: landscape){
}

@media screen and (min-width: 810px) and (max-width: 1025px) and (orientation: portrait) {
}
@media screen and (min-width: 810px) and (max-width: 1024px) and (orientation: landscape) {
}



/* header */

header {
  margin: 0;
  padding: 30px 0;
  justify-content: center;
}
header div.logo {
  float: left;
  width: 54%;
  margin: -30px auto 0;
}
header div.logo img {
  padding-left: 50px;
}
nav {
  float: left;
  width: 46%;
  margin: 0;
  padding: 0 10px;
}
nav ul {
  margin-top: 16px;
  display: flex;
  justify-content: center;
}
nav ul li {
  list-style: none;
  flex: 1;
}
nav ul li:first-child {
  margin-right: -35px !important;
}
nav ul li:nth-child(2) {
  margin-right: -35px !important;
}
nav ul li:nth-child(3) {
  margin-right: -25px !important;
}
nav ul li:nth-child(4) {
  margin-right: -15px !important;
}
nav ul li:nth-child(5) {
  padding-right: 20px;
}
nav ul li:last-child {
  padding-right: 40px;
}
nav ul li a {
  margin: 0;
  padding: 5px;
  display: block;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  letter-spacing: 0.1em;
}
nav ul li a:first-child {
  padding-top: 8px;
}
nav ul li a:hover {
  color: #1c5ad6;
}
nav ul li.sns {
  display: flex;
  justify-content: center;
}
nav ul li.sns div {
  list-style: none;
  flex: 1;
}
nav ul li.sns div:first-child {
}
nav ul li.sns div:first-child a {
}
nav ul li.sns div:first-child a:hover img {
}
nav ul li.sns div a {
}
nav ul li.sns div a:hover {
  color: #1c5ad6;
  transition: 0.2s;
}
nav ul li.sns div a img {
}
nav ul li.sns div a:hover img {
}

@media print , screen and (min-width: 1025px) and (max-width: 1201px) {
  header div.logo {width: 24%;}
  header div.logo img {padding-left: 20px;}
  nav {width: 75%;}
  nav ul {margin-top: 0px}
}
@media print , screen and (min-width: 969px) and (max-width: 1024px) {
  header div.logo {width: 24%;}
  header div.logo img {padding-left: 20px;}
  nav {width: 75%;}
  nav ul {margin-top: 0px}
}
@media print , screen and (min-width: 915px) and (max-width: 968px) {
  header div.logo {width: 24%;}
  header div.logo img {padding-left: 20px;}
  nav {width: 76%;}
  nav ul {margin-top: -10px}
}
@media print , screen and (min-width: 915px) {
  div#nav-drawer {display: none;}
}
@media print , screen and (max-width: 914px) {
  header div.logo {width: 50%;}
  header div.logo img {padding-left: 5px;}
  nav {display: none;}
  div#nav-drawer {
    display: ;
  }
}


@media screen and (min-width: 900px) and (max-width: 940px) and (orientation: portrait) {
}
@media screen and (min-width: 810px) and (max-width: 899px) and (orientation: portrait) {
}
@media screen and (max-width: 809px) and (orientation: portrait) {
}
@media screen and (min-width: 520px) and (max-width: 720px) and (orientation: portrait) {
}
@media screen and (min-width: 721px) and (max-width: 809px) and (orientation: portrait) {
}


@media screen and (min-width: 1025px) and (orientation: landscape) {
  header div.logo {width: 38%;}
  header div.logo img {padding-left: 10px;}
  nav {width: 60%; padding: 0;}
}
@media screen and (min-width: 961px) and (min-width: 1024px) and (orientation: landscape) {
  header div.logo {width: 30%;}
  header div.logo img {padding-left: 10px;}
  nav {width: 70%; padding: 0;}
}
@media screen and (max-width: 960px) and (orientation: landscape) {
  nav {display: none;}
}
@media screen and (min-width: 721px) and (max-width: 960px) and (orientation: landscape) {
}

/* ▼ iPad Air 横向き */
@media only screen and (min-device-width: 1178px) and (max-device-width: 1188px) and (orientation: landscape){
}

@media screen and (min-width: 810px) and (max-width: 1024px) and (orientation: landscape) {
}
@media screen and (max-width: 809px) and (orientation: portrait) {
}
@media screen and (min-width: 721px) and (max-width: 960px) and (orientation: landscape) {
}
@media screen and (min-width: 661px) and (max-width: 720px) and (orientation: landscape) {
}
@media screen and (min-width: 360px) and (max-width: 660px) and (orientation: landscape) {
}

@media screen and (min-width: 360px) and (max-width: 1024px) and (orientation: landscape){
}

@media screen and (min-width: 810px) and (max-width: 1025px) and (orientation: portrait) {
}
@media screen and (min-width: 810px) and (max-width: 1024px) and (orientation: landscape) {
}





/*----- #nav_drawer -----*/


#nav-drawer {
position: fixed;
top:20px;
right:20px;
float:right;
z-index: 9999;
}

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

/*アイコンのスペース*/
#nav-open {
display: inline-block;
width: 40px;
height: 40px;
background: #99160c;
border: 1px solid #fff;
border-radius: 8px;
vertical-align: middle;
}

/*ハンバーガーアイコンをCSSだけで表現*/
#nav-open span, #nav-open span:before, #nav-open span:after {
position: absolute;
height: 3px;/*線の太さ*/
width: 23px;/*長さ*/
border-radius: 3px;
background: #fff;
display: block;
content: '';
cursor: pointer;
}
#nav-open span {
  top: 11px;
  left: 9px;
}
#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: 999;/*最前面に*/
width: 90%;/*右側に隙間を作る（閉じるカバーを表示）*/
max-width: 240px;/*最大幅（調整してください）*/
height: 100%;
background: #efefef;/*背景色*/
transition: .3s ease-in-out;/*滑らかに表示*/
-webkit-transform: translateX(-105%);
transform: translateX(-105%);/*左に隠しておく*/
}

#nav-content div#menu_kv {
margin:0;
}

#nav-content div#menu_kv .logo {
margin:5px;
}

#nav-content ul {
margin:0;
}

#nav-content ul li {
list-style-type:none;
border-top:1px solid #99160c;
margin:0;
padding:0;
font-size:106%;
font-weight:normal;
font-family:'Century Gothic';
line-height:140%;
letter-spacing: 0.1em;
}
#nav-content ul li.category{
  background-color: #eee;
  padding:8px 5px;
  color: #666;
  font-size: 80%;
}

#nav-content ul li a{
  display:block;
  padding:6px 8px;
  text-decoration:none;
  color:#99160c;
  font-size: 84%;
}

#nav-content ul li a:hover {
  background-color: #ffd7d7;
}
#nav-content ul li:last-child {
  border-bottom:1px solid #99160c;
}
/*チェックが入ったらもろもろ表示*/
#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);
}
#nav-content ul li a img {
 padding-top: 5px;
 width: 12px;
}

@media screen and (max-width: 1024px) {
}
@media screen and (min-width: 900px) and (max-width: 940px) {
}
@media screen and (min-width: 810px) and (max-width: 899px) {
}
@media screen and (min-width: 721px) and (max-width: 809px) {
}
@media screen and (min-width: 520px) and (max-width: 720px) {
}
@media screen and (max-width: 519px) {
  #nav-drawer {
  top:12px;
  right:15px;
  }
  #nav-open {
  width: 42px;
  }
}





article {
  margin: 0;
  padding: 0;
  clear: both;
  width: 100%;
}

article section {
  margin: 0 auto;
  padding: 0;
}

/* .KV */

article section.KV {
  position: relative;
}
article section.KV div.photo {
  z-index: 1;
  justify-content: center;
  overflow: hidden;
  margin-inline: auto;
  max-width: 100%;
  height: 577px;
  border-radius: 10px;
  position: relative;
}
article section.KV div.photo img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  width: 100%;
  height: auto;
  display:block;
}
article section.KV div.photo h1 {
  position: absolute;
  top: 50%;
  transform: translate(44%, -53%);
  color: #fff;
  font-size: 420%;
  font-weight: bolder;
  font-family: Poppins Black, Poppins , 'Noto Sans Jp';
}
article section.KV div.photo h1 span {
  padding-left: 40px;
}
article section.KV div.under {
  z-index: 3;
  position: relative;
}
article section.KV div.under a {
  position: absolute;
  top: 24px;
  left: 51.5%;
  width: 80px;
  height: 80px;
  background-color: #1f1f1f;
  border-radius: 50%;
  transform: translate(-76%, -78%);
  padding-top: 20px;
  color: #fff;
  font-size: 150%;
  text-decoration: none;
  text-align: center;
  transition: all 0.3s ease;
}
article section.KV div.under a:hover {
  opacity: 1;
  transform: translate(-74%, -76%);
  width: 86px;
  height: 86px;
  cursor: pointer;
  background-color: #1c5ad6;
  transition: 0.2s;
  font-size: 180%;
}

@media screen and (min-width: 1401px) and (max-width: 1560px) {
  article section.KV div.photo h1 {
    transform: translate(46%, -50%);
    font-size: 380%;
  }
}
@media screen and (min-width: 1281px) and (max-width: 1400px) {
  article section.KV div.photo h1 {
    transform: translate(42%, -50%);
    font-size: 360%;
  }
}
@media screen and (min-width: 1025px) and (max-width: 1280px) {
  article section.KV div.photo h1 {
    transform: translate(33%, -50%);
    font-size: 340%;
  }
}
@media screen and (min-width: 961px) and (max-width: 1024px) {
  article section.KV div.photo h1 {
    transform: translate(30%, -50%);
    font-size: 320%;
  }
  article section.KV div.under a {
    left: 52.4%;
  }
}
@media screen and (min-width: 721px) and (max-width: 960px) {
  article section.KV div.photo {
    height: 377px;
  }
  article section.KV div.photo h1 {
    transform: translate(10%, -50%);
    font-size: 320%;
  }
  article section.KV div.under a {
    left: 53.2%;
  }
}
@media screen and (min-width: 601px) and (max-width: 720px) {
  article section.KV div.photo {
    height: 300px;
  }
  article section.KV div.photo h1 {
    transform: translate(24%, -50%);
    font-size: 240%;
  }
  article section.KV div.under a {
    left: 53.3%;
  }
}
@media screen and (min-width: 481px) and (max-width: 600px) {
  article section.KV div.photo {
    height: 280px;
  }
  article section.KV div.photo h1 {
    transform: translate(18%, -50%);
    font-size: 200%;
  }
  article section.KV div.under a {
    left: 53.3%;
  }
}
@media print , screen and (min-width: 376px) and (max-width:480px) {
  article section.KV div.photo {
    height: 260px;
  }
  article section.KV div.photo h1 {
    transform: translate(14%, -50%);
    font-size: 260%;
    text-align: center;
  }
  article section.KV div.photo h1 span {
    display: block;
    padding-left: 0px;
  }
  article section.KV div.under a {
    left: 55.3%;
  }
}
@media print , screen and (min-width: 321px) and (max-width:375px) {
  article section.KV div.photo {
    height: 260px;
  }
  article section.KV div.photo h1 {
    transform: translate(14%, -50%);
    font-size: 240%;
    text-align: center;
  }
  article section.KV div.photo h1 span {
    display: block;
    padding-left: 0px;
  }
  article section.KV div.under a {
    top: 22px;
    left: 56.3%;
  }
}
@media print , screen and (max-width: 320px) {
  article section.KV div.photo {
    height: 220px;
  }
  article section.KV div.photo h1 {
    transform: translate(14%, -50%);
    font-size: 200%;
    text-align: center;
  }
  article section.KV div.photo h1 span {
    display: block;
    padding-left: 0px;
  }
  article section.KV div.under a {
    top: 20px;
    left: 56.3%;
  }
}



/* .content_box */

article section.content_box {
  margin: 20px 0 50px;
}
article section.content_box h1 {
  width: 100%;
  margin: 10px auto;
  padding-left: 4px;
  text-align: center;
  font-size: 40px;
  letter-spacing: 0.1em;
}
article section.content_box h4 {
  margin: 14px auto 0;
  width: 26px;
  border-top: 1px solid #333;
  font-size: 140%;
  font-weight: normal;
  text-align: center;
}

@media print , screen and (min-width: 1025px) and (max-width: 1440px) {
}
@media print , screen and (min-width: 969px) and (max-width: 1024px) {
}
@media print , screen and (min-width: 835px) and (max-width: 968px) {
}
@media print , screen and (min-width: 441px) and (max-width: 834px) {
}
@media print , screen and (min-width: 376px) and (max-width: 440px) {
}
@media print , screen and (min-width: 321px) and (max-width: 375px) {
}
@media print , screen and (max-width:320px) {
}



/* #about */

article section#about {
  margin: 100px 0;
  justify-content: center;
}
article section#about p {
  font-size: 16px;
  font-family: ;
  line-height: 240%;
  text-align: center;
}
article section#about p strong {
  display: block;
  padding-bottom: 30px;
  letter-spacing: 0.1em;
}
article section#about p span {
  display: block;
}

@media print , screen and (min-width: 1025px) and (max-width: 1440px) {
}
@media print , screen and (min-width: 969px) and (max-width: 1024px) {
}
@media print , screen and (min-width: 835px) and (max-width: 968px) {
}
@media print , screen and (min-width: 441px) and (max-width: 834px) {
}
@media screen and (min-width: 520px) and (max-width: 720px) and (orientation: portrait) {
  article section#about {
    margin: 100px 0 20px;
  }
  article section#about p {
    margin: 0 10px;
    text-align: left;
    font-size: 14px;
    line-height: 180%;
  }
  article section#about p strong {
    text-align: center;
  }
  article section#about p span {
    display: inline;
  }
}
@media print , screen and (max-width: 440px) {
  article section#about {
    margin: 100px 0 20px;
  }
  article section#about p {
    margin: 0 10px;
    text-align: left;
    font-size: 14px;
    line-height: 180%;
  }
  article section#about p strong {
    text-align: center;
  }
  article section#about p span {
    display: inline;
  }
}


/* #photos */

article section#photos {
  z-index: 2;
  clear: both;
  width: 100vw;
  padding: 30px 0 60px;
  margin-bottom: 70px;
}
article section#photos ul {
  display: flex;
  justify-content: center;
  overflow: hidden;
  height: 400px;
}
article section#photos ul li {
  list-style: none;
  width: 33%;
  height: 400px;
  position: relative;
}
article section#photos ul li img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display:block;
}
article section#photos ul li:first-child img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 100%;
  height: 400px;
  display:block;
  object-fit: cover;
}

@media print , screen and (min-width: 1025px) and (max-width: 1440px) {
}
@media print , screen and (min-width: 969px) and (max-width: 1024px) {
}
@media print , screen and (min-width: 835px) and (max-width: 968px) {
}
@media print , screen and (min-width: 441px) and (max-width: 834px) {
  article section#photos ul li:first-child img {
    height: 380px;
  }
}
@media print , screen and (min-width: 376px) and (max-width: 440px) {
  article section#photos {
    padding: 20px 0 40px;
    margin-bottom: 20px;
  }
  article section#photos ul {
    height: 200px;
  }
  article section#photos ul li {
    height: 200px;
  }
  article section#photos ul li:first-child img {
    height: 210px;
  }
}
@media print , screen and (min-width: 321px) and (max-width: 375px) {
  article section#photos {
    padding: 20px 0 40px;
    margin-bottom: 20px;
  }
  article section#photos ul {
    height: 200px;
  }
  article section#photos ul li {
    height: 200px;
  }
  article section#photos ul li:first-child img {
    height: 184px;
  }
}
@media print , screen and (max-width:320px) {
  article section#photos {
    padding: 20px 0 40px;
    margin-bottom: 20px;
  }
  article section#photos ul {
    height: 200px;
  }
  article section#photos ul li {
    height: 200px;
  }
  article section#photos ul li:first-child img {
    height: 158px;
  }
}
@media screen and (min-width: 520px) and (max-width: 720px) and (orientation: portrait) {
  article section#photos {
    padding: 20px 0 30px;
  }
  article section#photos ul li:first-child img {
    height: 266px;
  }
}
@media screen and (min-width: 661px) and (max-width: 720px) and (orientation: landscape) {
  article section#photos ul li:first-child img {
    height: 330px;
  }
}
@media screen and (min-width: 520px) and (max-width: 720px) and (orientation: landscape) {
  article section#photos ul li:first-child img {
    height: 356px;
  }
}



/* #service */

article section#service {
  width: 75%;
  margin: 0 auto;
}
article section#service section {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  justify-content: center;
}
article section#service section div.item {
  text-align: left !important;
}
article section#service section div#item01 {
  flex-wrap: wrap;
  width: 557px;
  margin-right: 10px;
}
article section#service section div#item02 {
  flex-wrap: wrap;
  width: 439px;
  margin-left: 10px;
}
article section#service section div#item03 {
  flex-wrap: wrap;
  width: 635px;
}
article section#service section div#item03 div.float {
  float: left;
  margin-right: 2px;
}
article section#service section div#item03 h2 {
  clear: both;
}
article section#service section div#item04 {
  flex-wrap: wrap;
  width: 390px;
  margin-left: 10px;
}
article section#service section div.item img {
  display:block;
  object-fit: cover;
  width: 100%;
  height: 280px;
  padding-bottom: 15px;
  border-radius: 5px;
}
article section#service section div.item h2 {
  color: #222222;
  font-size: 120%;
}
article section#service section div.item p {
  margin-top: 8px;
  padding-bottom: 60px;
  font-size: 80%;
  line-height: 180%;
}
article section#service section div.item h1 {
}
article section#service section div#item03 div.float {
}
article section#service section div#item03 div.float img {
}

@media print , screen and (min-width: 1025px) and (max-width: 1440px) {
}
@media print , screen and (min-width: 969px) and (max-width: 1024px) {
  article section#service {
    width: 100%;
  }
  article section#service section div#item01 {
    width: 420px;
  }
  article section#service section div#item02 {
    width: 349px;
  }
  article section#service section div#item03 {
    flex-wrap: wrap;
    width: 605px;
  }
  article section#service section div#item03 div.float {
    width: 32%;
  }
  article section#service section div#item04 {
    width: 310px;
  }
}
@media print , screen and (min-width: 835px) and (max-width: 968px) {
  article section#service {
    width: 100%;
  }
  article section#service section div#item01 {
    width: 420px;
  }
  article section#service section div#item02 {
    width: 349px;
  }
  article section#service section div#item03 {
    flex-wrap: wrap;
    width: 605px;
  }
  article section#service section div#item03 div.float {
    width: 32%;
  }
  article section#service section div#item04 {
    width: 310px;
  }
}
@media print , screen and (min-width: 441px) and (max-width: 834px) {
  article section#service {
    width: 98%;
  }
  article section#service section div#item01 {
    width: 360px;
  }
  article section#service section div#item02 {
    width: 349px;
  }
  article section#service section div#item03 {
    flex-wrap: wrap;
    width: 505px;
  }
  article section#service section div#item03 div.float {
    width: 32%;
  }
  article section#service section div#item04 {
    width: 220px;
  }
  article section#service section div.item img {
    height: 255px;
  }
}
@media print , screen and (min-width: 376px) and (max-width: 440px) {
  article section#service {
    width: 100%;
  }
  article section#service section div#item01 {
    width: 90%;
    margin: 10px auto;
  }
  article section#service section div#item02 {
    width: 90%;
    margin: 10px auto;
  }
  article section#service section div#item03 {
    width: 90%;
    margin: 10px auto;
  }
  article section#service section div#item03 div.float {
    width: 33%;
    margin-right: 0.5px;
  }
  article section#service section div#item04 {
    width: 90%;
    margin: 10px auto;
  }
  article section#service section div.item img {
    height: 190px;
  }
  article section#service section div.item p {
    padding-bottom: 20px;
  }
}
@media print , screen and (min-width: 321px) and (max-width: 375px) {
  article section#service {
    width: 100%;
  }
  article section#service section div#item01 {
    width: 90%;
    margin: 10px auto;
  }
  article section#service section div#item02 {
    width: 90%;
    margin: 10px auto;
  }
  article section#service section div#item03 {
    width: 90%;
    margin: 10px auto;
  }
  article section#service section div#item03 div.float {
    width: 33%;
    margin-right: 0.5px;
  }
  article section#service section div#item04 {
    width: 90%;
    margin: 10px auto;
  }
  article section#service section div.item img {
    height: 180px;
  }
  article section#service section div.item p {
    padding-bottom: 20px;
  }
}
@media print , screen and (max-width:320px) {
  article section#service {
    width: 100%;
  }
  article section#service section div#item01 {
    width: 90%;
    margin: 10px auto;
  }
  article section#service section div#item02 {
    width: 90%;
    margin: 10px auto;
  }
  article section#service section div#item03 {
    width: 90%;
    margin: 10px auto;
  }
  article section#service section div#item03 div.float {
    width: 33%;
    margin-right: 0.5px;
  }
  article section#service section div#item04 {
    width: 90%;
    margin: 10px auto;
  }
  article section#service section div.item img {
    height: 140px;
  }
  article section#service section div.item p {
    padding-bottom: 20px;
  }
}


/* #news */

article section#news {
  width: 100%;
  margin: 40px auto 100px;
}
article section#news #newslist {
  width: 60%;
  margin: 0 auto;
}
article section#news #newslist dl {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
article section#news #newslist dl dt {
  float: left;
  width: 16%;
  padding-bottom: 20px;
}
article section#news #newslist dl dd {
  float: left;
  width: 82%;
  padding-bottom: 20px;
}
article section#news #newslist dl dd small {
  display: block;
  padding-top: 5px;
  font-size: 84%;
}

@media print , screen and (min-width: 1025px) and (max-width: 1440px) {
}
@media print , screen and (min-width: 969px) and (max-width: 1024px) {
  article section#news #newslist dl dt {
    width: 20%;
  }
  article section#news #newslist dl dd {
    width: 79%;
  }
}
@media print , screen and (min-width: 835px) and (max-width: 968px) {
  article section#news #newslist {
    width: 80%;
  }
  article section#news #newslist dl dt {
    width: 20%;
  }
  article section#news #newslist dl dd {
    width: 79%;
  }
}
@media screen and (min-width: 520px) and (max-width: 720px) and (orientation: portrait) {
  article section#news {
    margin: 40px auto;
  }
  article section#news #newslist {
    width: 96%;
  }
  article section#news #newslist dl {
    display: block;
    margin-top: 0px;
    font-size: 98%;
  }
  article section#news #newslist dl dt {
    width: 100%;
    padding-bottom: 8px;
  }
  article section#news #newslist dl dd {
    width: 100%;
    padding-left: 10px;
    padding-bottom: 28px;
  }
}
@media print , screen and (min-width: 441px) and (max-width: 834px) {
  article section#news #newslist {
    width: 80%;
  }
  article section#news #newslist dl dt {
    width: 18%;
  }
  article section#news #newslist dl dd {
    width: 81%;
  }
}
@media print , screen and (min-width: 376px) and (max-width: 440px) {
  article section#news {
    margin: 40px auto;
  }
  article section#news #newslist {
    width: 90%;
  }
  article section#news #newslist dl {
    display: block;
    font-size: 100%;
  }
  article section#news #newslist dl dt {
    width: 48%;
    padding-bottom: 8px;
  }
  article section#news #newslist dl dd {
    width: 100%;
    padding-left: 10px;
    padding-bottom: 38px;
  }
}
@media print , screen and (min-width: 321px) and (max-width: 375px) {
  article section#news {
    margin: 40px auto;
  }
  article section#news #newslist {
    width: 96%;
  }
  article section#news #newslist dl {
    display: block;
    margin-top: 0px;
    font-size: 98%;
  }
  article section#news #newslist dl dt {
    width: 100%;
    padding-bottom: 8px;
  }
  article section#news #newslist dl dd {
    width: 100%;
    padding-left: 10px;
    padding-bottom: 28px;
  }
}
@media print , screen and (max-width:320px) {
  article section#news {
    margin: 40px auto;
  }
  article section#news #newslist {
    width: 94%;
  }
  article section#news #newslist dl {
    display: block;
    margin-top: 0px;
    font-size: 84%;
  }
  article section#news #newslist dl dt {
    width: 100%;
    padding-bottom: 8px;
  }
  article section#news #newslist dl dd {
    width: 100%;
    padding-left: 10px;
    padding-bottom: 28px;
  }
}




/* company */

article section#company {
  flex: none;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  margin: 0px 0px 80px 0px;
  padding: 40px 60px;
  max-width: 100%;
}
article section#company section#map {
  display: flex;
  align-items: center;
  justify-content: center;
}
article section#company div#companydata {
  width: 450px;
  margin: 10px auto 0;
}
article section#company div#companydata dl {
  display: flex;
  justify-content: center;
}
article section#company div#companydata dl dt {
  float: left;
  width: 20%;
  padding-top: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid #666;
}
article section#company div#companydata dl dd {
  float: left;
  width: 80%;
  padding-top: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid #ccc;
}

@media print , screen and (min-width: 1025px) and (max-width: 1440px) {
}
@media print , screen and (min-width: 969px) and (max-width: 1024px) {
}
@media print , screen and (min-width: 835px) and (max-width: 968px) {
}
@media print , screen and (min-width: 441px) and (max-width: 834px) {
}
@media print , screen and (min-width: 376px) and (max-width: 440px) {
  article section#company {
    margin: 0px 0px 40px 0px;
    padding: 10px 10px;
  }
  article section#company div#companydata {
    width: 98%;
    font-size: 94%;
  }
}
@media print , screen and (min-width: 321px) and (max-width: 375px) {
  article section#company {
    margin: 0px 0px 40px 0px;
    padding: 10px 10px;
  }
  article section#company div#companydata {
    width: 98%;
    font-size: 90%;
  }
}
@media print , screen and (max-width:320px) {
  article section#company {
    margin: 30px 0px 40px 0px;
    padding: 10px 10px;
  }
  article section#company div#companydata {
    max-width: 100%;
    font-size: 80%;
  }
}



/* #contact */

article section#contact {
  width: 80%;
  margin: 0 auto;
  padding-top: 40px;
  background-color: #fafafaff;
}
article section#contact p {
  width: 62%;
  margin: 10px auto;
  padding: 5px;
  text-align:left;
  font-size: 90%;
  line-height: 220%;
  letter-spacing: 0.1em;
}
article section#contact .formbox {
  flex: none;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  width: 70%;
  margin: 0px auto 30px;
  padding: 40px 60px;
  max-width: 100%;
}
article section#contact .formbox form {
  max-width: 100%;
}
article section#contact .formbox form h2 {
  margin: 30px 0 10px;
  font-size: 90%;
  font-weight: normal;
  letter-spacing: 0.1em;
}
article section#contact .formbox form h2 small {
  padding-left: 10px;
  color: #ff3333;
  font-size: 78%;
}
article section#contact .formbox form input {
  border: 1px solid #eee;
}
article section#contact .formbox form input ,
article section#contact .formbox form textarea {
  width: 100%;
  padding: 10px;
  height: 50;
  border: 1px solid #eee;
  font-size: 140%;
}
article section#contact .formbox form textarea {
  font-size: 160%;
}
::placeholder {
  color: #bbb;
}
article section#contact .formbox form p {
  text-align: left;
  line-height: 160%;
  width: 100%;
}
article section#contact .formbox form p input#policy {
  width: 4%;
  margin-left: -14px;
}
article section#contact .formbox form p input label {
}
article section#contact .formbox form p a {
  display: block;
  margin-left: -6px;
  color: #666;
  font-size: 80%;
}
article section#contact .formbox form .accordion {
  margin: 5px 0 20px;
}
article section#contact .formbox form .accordion__summary {
  font-size: 90%;
  font-weight: normal;
  position: relative;
  display: block;
  cursor: pointer;
  padding: 0px 38px 0px 30px;
}
article section#contact .formbox form .accordion__summary::after {
  content: "+";
  font-size: 1.4em; /* 記号のサイズ */
  position: absolute;
  left: 10px;
  top: 45%;
  transform: translateY(-50%);
}
article section#contact .formbox form .accordion input:checked ~ .accordion__summary::after {
  content: "−";
}
.accordion input {
  display: none;
}
.accordion__detail {
  display: none;
  background: #fff;
  padding: 4px 10px;
  margin: 10px 0;
  font-size: 80%;
}
.accordion input:checked ~ .accordion__detail {
  display: block;
}
.accordion__text {
  margin: 0;
}
article section#contact .formbox form input#submit {
  display: block;
  text-align: center;
  margin-bottom: 20px;
  background-color: #222222ff;
  border-radius: 5px;
  padding: 15px;
  color: #fff;
  font-size: 90%;
  line-height: 140%;
}
article section#contact .formbox form details {
  color: #666;
  font-size: 70%;
  font-weight: normal;
}
article section#contact .formbox form details summary{
  font-size: 120%;
}
article section#contact h3 {
  text-align: center;
}
article section#contact p {
  font-weight: normal;
  text-align: center;
}
article section#contact form div.confirm {
  width: 60%;
  margin: 40px auto;
  padding-bottom: 30px;
}
article section#contact form div.confirm dl {
  clear: both;
}
article section#contact form div.confirm dl dt {
  float: left;
  width: 20%;
  text-align: right;
}
article section#contact form div.confirm dl dd {
  float: left;
  width: 75%;
  padding-left: 10px;
}
article section#contact form div.confirm h2 {
  margin:0 0 10px;
  font-size: 90%;
}
article section#contact form div.confirm div.confirm_text {
  margin-bottom: 30px;
  font-weight: normal !important;
  text-align: left;
}
article section#contact form div.confirm div.submit_btn {
  text-align: center;
}
article section#contact form div.confirm div.submit_btn input.reset_btn {
  text-align: center;
  margin-bottom: 20px;
  background-color: #efefef;
  border-radius: 5px;
  padding: 15px 50px;
  color: #333;
  font-size: 90%;
  line-height: 140%;
}
article section#contact form div.confirm div.submit_btn input.submit_btn {
  text-align: center;
  margin-bottom: 20px;
  background-color: #222222ff;
  border-radius: 5px;
  padding: 15px 50px;
  color: #fff;
  font-size: 90%;
  line-height: 140%;
}
article section#contact .back_top {
  margin: 20px auto;
  padding-bottom: 30px;
  text-align: center;
}




@media print , screen and (min-width: 1025px) and (max-width: 1440px) {
}
@media print , screen and (min-width: 969px) and (max-width: 1024px) {
}
@media print , screen and (min-width: 835px) and (max-width: 968px) {
  article section#contact form div.confirm {
    width: 80%;
  }
}
@media print , screen and (min-width: 441px) and (max-width: 834px) {
  article section#contact {
    width: 90%;
  }
  article section#contact p {
    width: 98%;
    line-height: 200%;
  }
  article section#contact .formbox {
    width: 90%;
    padding: 30px 10px;
  }
  article section#contact form div.confirm {
    width: 98%;
  }
  article section#contact form div.confirm dl dt {
    float: none;
    width: 100%;
    text-align: left;
  }
  article section#contact form div.confirm dl dd {
    float: none;
    width: 95%;
    padding-left: 10px;
  }
}
@media print , screen and (max-width: 440px) {
  article section#contact {
    width: 94%;
  }
  article section#contact p {
    width: 98%;
    line-height: 180%;
  }
  article section#contact .formbox {
    width: 90%;
    padding: 30px 10px;
  }
  article section#contact form div.confirm {
    width: 98%;
  }
  article section#contact form div.confirm dl dt {
    float: none;
    width: 100%;
    text-align: left;
  }
  article section#contact form div.confirm dl dd {
    float: none;
    width: 95%;
    padding-left: 10px;
  }
}





/* footer */

footer {
  margin: 0;
  padding:10px 0 40px;
  color: ;
  line-height:110%;
  text-align: center;
}
footer section {
  margin: 0;
  padding: 5px;
  font-size: 80%;
  letter-spacing: 0.1em;
}
footer section a {
  margin: 0;
  padding: 5px;
  font-size: 90%;
  letter-spacing: 0.1em;
  text-decoration: none;
}
footer section .accordion {
  margin: 5px 0 20px;
}
footer section .accordion__summary {
  font-size: 90%;
  font-weight: normal;
  position: relative;
  display: inline;
}
footer section .accordion__summary::after {
  display: none;
}
article section#contact .formbox form .accordion input:checked ~ .accordion__summary::after {
  content: "−";
}

@media screen and (min-width: 481px) and (max-width: 1024px) {
}

@media print , screen and (max-width:480px) {
}