@charset "utf-8";

/* メイン */
* {
  background: #373737;
  color: #FFF;
  background-color: transparent;
  margin: 0;
}

body {
  background: #373737 url("../image/bg-logo.png") no-repeat 100% 10% fixed;
  font-family: YuGothic,'Yu Gothic','メイリオ', Meiryo,'ＭＳ ゴシック','ヒラギノ角ゴシック','Hiragino Sans',sans-serif;

}

@media (max-width: 600px){
body {
  background: #373737 none;
}
}

.alpha a:hover img {
  opacity: 0.5;
  filter: alpha(opacity=50);
  -ms-filter: "alpha(opacity=50)";
}

.wrapper, .wrapper-etc, .wrapper-contact {
  max-width: 1000px;
  margin: 0 auto;
}
.wrapper-etc {
  margin-top: 400px;
}
.wrapper-contact {
  margin-top: 200px;
}

header {
  position: absolute;
  top: 40px;
  min-width: 100%;
  background: rgba(255,255,255,0.75);
  box-shadow: 0px 6px 2px rgba(0,0,0,0.2);
  z-index: 1000;
}
.container {
  clear: both;
  display: flex;
}

@media (max-width: 768px){
.container {
  flex-direction: column;
}
.main {
  width: 100%;
}
.wrapper-etc {
  margin-top: 400px;
}
}

@media (max-width: 400px){
.wrapper-etc {
  margin-top: 330px;
}
}

.main {
  width: 100%;
}
footer {
  text-align: center;
  overflow-y: hidden;
  margin-bottom: 30px;
}
footer p {
  font-size: 1.2em;
  margin: 40px 0 20px;
  line-height: 1.5;
}
@media (max-width:768px) {
footer {
  font-size: 0.9em;
}
}

@media screen and (min-width: 600px) {
.br-sp {
  display:none;
}
}

h2 {
  font-size: 2.6em;
  font-weight: bold;
  text-align: center;
}

p {
  margin-top: 3em;
  font-size: 1.3em;
  line-height: 2;
  font-feature-settings : "palt";
}

@media (max-width: 999px){
h2 {
  font-size: 2em;
  line-height: 1.2;
}
p {
  font-size: 1em;
  margin: 2em 1em 0;
}
}

.ceo {
  text-align: right;
}

.comdata {
  width: 75%;
  font-size: 1.2em;
  line-height: 1.7;
  margin: 6em auto 4em;
  font-feature-settings : "palt";
}


.kojin {
  margin-top: -1em;
  margin-bottom: 2em;
}
.kojin li {
  padding-left: 1em;
  text-indent: -.65em;
 }
.kojin li:before {
  content: '•'; /* ←ここにリストマーカーにしたい文字列を設定 */
  margin: 0 .25em 0 0;
}

.comdata p {
  font-size: 1em;
  margin: 0 0 1.25em 0;
}

.data01 {
  float:left;
}
.data02 {
  display: block;
  margin-left: 110px;
}

.img-solo {
  margin: 5em 0;
  text-align: center;
}
.img-solo img {
  width: 60%;
  height: 60%;
}
@media (max-width: 999px){
.comdata {
  width: 90%;
  font-size: 1em;
}
.data01 {
  float:left;
}
.data02 {
  display: block;
  margin-left: 110px;
}
}

@media (max-width: 600px){
.img-solo img {
  width: 90%;
  height: 90%;
}
}

h3 {
  font-feature-settings : "palt";
  font-size: 2em;
  font-weight: bold;
  text-align: center;
  line-height: 1.5;
  margin-top: 2em;
}

.koumoku {
  font-size: 1.2em;
  line-height: 1.3;
  margin: 2em 10%;
}
.koumoku ul li{ 	
  display: inline;
 }
.koumoku li {
  list-style-type: disc;
  margin-right: .3em;
}
.koumoku ul,.koumoku li:before {
  content: '•'; /* ←ここにリストマーカーにしたい文字列を設定 */
  margin: 0 .25em;
}

h4 {
  
}

/* スライドショー */

.swiper-container {
  margin-top: -180px;
  width: 100%;
  height: 100%;
}
.swiper-slide {
  padding-top: 180px; /* 画像位置の調整用 */
  text-align: center;
  color: #fff;
  font-size: 30px;
}
.swiper-slide img {
  width: 100%;
  object-fit: cover;
}

.top-copy img {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60%;
}
@media (max-width:767px) {
.swiper-container {
  margin-top: -100px;
  width: 100%;
  height: 100%;
}
}

/* メニュー */

nav {
  position: relative;
  max-width: 1000px;
  overflow: hidden;
  margin: 0 0 0 40%;
}

@media (min-width:768px) {
.logo-sp {
  display:none;
}
}

nav a {
  float: left;
  background-color: transparent;
  color: #575757;
  text-align: center;
  padding: 44px 24px;
  text-decoration: none;
  font-size: 14px;
  display: block;
  transition: .5s;
}
nav a:hover {
  transition: .6s;
  background: #C5C5C5;
  color: #000;
}

.logo {
  width: 1000px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  margin: auto;
}

nav .icon {
  color: #fff;
  display: none;
  font-size: 2em;
  padding: 14px 16px;
  text-align: right;
  cursor: pointer;
}
nav input {
  visibility: hidden;
}
nav input[type="checkbox"]:checked + label a{
  display: block;
}

@media (max-width:999px) {
nav {
  max-width: 100%;
  overflow: hidden;
  margin-left: 28%;
}
nav a {
  padding: 44px 18px;
}
.logo {
  width:100%;
}
}


@media (max-width:767px) {
nav {
  max-width: 1000px;
  overflow: hidden;
  margin: 0 auto;
}
.logo-sp {
  background: rgba(255,255,255,0.5);
  text-align: center;
}
.logo-sp img {
  background-color: transparent;
  width: 65%;
  margin: 10px 0;
}
.logo {
  display: none;
}
nav {
  background-color: #C5C5C5;
  margin-top: -60px;
  max-width: 100%;
  }
nav a {
  display: none;
  float: none;
  }
nav .icon {
  display: block;
  }
.swiper-container img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.top-copy img {
  margin-bottom: -200px;
  object-fit: contain;
}
}

.top_item_box, .etc_item_box {
    position: relative;
    z-index: 2;
  display: table;
  width: 100%;
  margin-top:-6px;
}
.top_item, .etc_item {
  position: relative;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  z-index: 1;
}
.top_item p, .etc_item p {
  position: absolute;
  font-size: 1.6em;
  font-weight: bold;
  width:100%;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:0;
  padding:0;
}
.top_item img, .etc_item img {
	width:100%;
	height: auto;
	margin: 0;
	padding: 0;
}

@media (max-width:767px) {
.top_item_box, .etc_item_box {
    display: block;
    width: 100%;
	margin-top: -6px;
}
.top_item, .etc_item {
    display: block;
    text-align: center;
    vertical-align: middle;
	line-height: 0;
  z-index: 1001;
}
.top_item_box img {
    display: table;
    width: 100%;
	height: 140px;
}

}

/* トップ以外のスライドショー */
/* sliderのアニメーションを指定 */
/* アニメーションの開始位置を指定 */
@keyframes slider{
  0%{
    top:0px;
    left:0px;
  }
/* アニメーションの終了位置を指定 */
/* 画像10枚分のwidthをスライドさせ、開始の画像が4枚表示された時にリピート開始 */
  100%{
    top:0px;
    left:-2500px;
  }
}
.sliderBox{
/* スライダーの枠を設定する */
/* 幅を画像4枚分のwidthに指定することでループする際にコマ切れをなくす(変なところでループする) */
  width:1000px;
/* 表示したい画像の高さ */
  height:165px;

/* ボックスからはみ出た画像は表示されない */
  overflow:hidden;
  position:absolute;
  margin-top: 150px;

/* 中央寄せ */
  left: 50%;
  margin-left: -500px;
}

.sliderBox ul{
/* 画像13枚分の長 さ*/
  width: 3500px;
  height: 165px;
  list-style-type: none;
/* ボックスを親に設定した位置にするため(要素の位置を動かすためにpositionを設定＝スライドさせるため) */
  position: absolute;
  animation-name: slider;
/* 再生秒数を指定(スライドする速さに影響) */
  animation-duration: 50s;
/* 無限ループ再生 */
  animation-iteration-count: infinite;
/* 速度を均一にする */
  animation-timing-function: linear;
}

/* float:leftで並んだ13枚の画像幅は250px*13=3500px */
.sliderBox ul li{
  float: left;
}
@media (max-width: 1024px){
html{
  overflow-x : hidden;
  -webkit-overflow-scrolling: touch;
}
body {
  overflow-x : hidden;
  -webkit-overflow-scrolling: touch;
}
}
@media (max-width: 768px){
.sliderBox{
  max-width: 100%;
  left: 0;
  margin-left: 0;
  margin-top: 22%;
}
}
@media (max-width: 600px){
.sliderBox{
  margin-top: 38%;
}
}
@media (max-width: 375px){
.sliderBox{
  width:375px;
  left: 0;
  margin-left: 0;
}
}
@media (max-width: 320px){
.sliderBox{
  width:320px;
  left: 0;
  margin-left: 0;
}
}

/* Googleマップ レスポンシブ */

.ggmap {
position: relative;
padding-bottom: 18%;
padding-top: 300px;
height: 0;
overflow: hidden;
}
 
.ggmap iframe,
.ggmap object,
.ggmap embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
@media (max-width: 600px){
.ggmap {
padding-bottom: 40%;
}
}

/* メールフォーム */
#formWrap {
	margin:0 auto;
	color:#555;
	line-height:120%;
	max-width: 768px;
}
table.formTable {
	width:100%;
	margin:0 auto;
	border-collapse:collapse;
}
#formWrap option {
  color: #373737;
}
table.formTable td,table.formTable th{
	padding:10px;
}
table.formTable th {
	width:30%;
	font-weight:normal;
	text-align:left;
	vertical-align: middle;
}

#formWrap input {
  border:0;
  padding:10px;
  font-size:1.3em;
  color: #373737;
  border: solid 1px #ccc;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  background: #FFF;
}
#formWrap select {
  font-size:1.3em;
  background: #FFF;
  color: #373737;
  padding-bottom: .3em;
}
#formWrap textarea {
  font-size:1.3em;
  background: #FFF;
  color: #373737;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  background-color: #FFF;
}
#formWrap input[type="submit"], #formWrap input[type="reset"], #formWrap input[type="button"] {
  cursor: pointer;
}
.button {
  text-align: center;
  margin-top:3em;
}
#formWrap input:hover[type="submit"], #formWrap input:hover[type="reset"], #formWrap input:hover[type="button"] {
   /* マウスが上に載ったとき */
   background-color: #CCC;
}

/*　簡易版レスポンシブ用CSS（必要最低限のみとしています。ブレークポイントも含め自由に設定下さい）　*/
@media screen and (max-width:600px) {
#formWrap {
  width:95%;
  margin:0 auto;
}
table.formTable th, table.formTable td {
  width:auto;
  display:block;
}
table.formTable th {
  margin-top:5px;
  border-bottom:0;
}
input[type="text"], textarea {
  width:80%;
  padding:5px;
  font-size:110%;
  display:block;
}
input[type="submit"], input[type="reset"], input[type="button"] {
  display:block;
  width:100%;
  height:60px;
  margin-top: 1em;
}
}