@charset "UTF-8";
/* CSS Document */

.pc{
	display:none !important;
}

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

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

#topimg img {
    animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation: fadeIn 2s ease 0s 1 normal;
}

*{
	margin:0;
	padding:0;
}

{
	white-space: nowrap;
	font: 0/0 a;
	text-shadow: none;
	color: transparent;
}

img{
	border:0;
	border-style:none;
	max-width: 100%;
	height: auto;
}

a img {
	border:0;
   border-style:none;
}

h1,h2,h3,p{
	margin:0px;
	padding:0px;
	list-style:none;
}

body{
	display: block;
	font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
	font-weight: 200;
	width: 100%;
	word-break:break-all !important;
}


/* レイアウト */
#wrapper{
	display:block;
	width:100%;
	margin:0;
	float:left;
	clear:both;
}

header{
	display: block;
	position: relative;
	z-index: 2;
	width: 100%;
	background-color: #0066cc;
	float: left;
	clear: both;
}

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

section{
	display:block;
	width:100%;
	height: auto;
	margin:0 auto;
	padding:0;
	float:left;
	clear:both;
}

#overview{
	width: 100%;
	background-color: #0066cc;
}

main{
	display: block;
	width: 100%;
	margin: 0 auto;
	padding: 0;
	float: left;
	clear: both;
}

footer{
	width: 100%;
	height:auto;
	background-color: #f5f5f5;
	padding: 15px 0 70px 0;
	margin:0;
	float:left;
	clear:both;
}

/* header */
.copyright{
	display:block;
	width:100%;
	color: #000;
	text-align:center;
	font-size:65%;
	line-height: 150%;
	margin:0  0 0 0 !important;
	float: left;
	clear: both;
}

#topimg{
	display: block;
	width: 100%;
	height: auto;
	margin: 0 0 40px 0;
	float:left;
	clear: both;
}
#topimg img{
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
}


.totop a{
	display: block;
	width: 60px;
	height: 40px;
	position: fixed;
	bottom:120px;
	right: 10px !important;
	background-color: #fff;
	border-radius: 8px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	z-index: 10000 !important;
	transition-duration: 0.6s;
}
.totop img{
	display: block;
	width: 40px;
	height: auto;
	margin: 10px;
}
.totop a:hover{
	background-color: #f5f5f5;
	transition-duration: 0.2s;
}

#lead {
	display: block;
	width: 100%;
	margin-bottom: 50px;
	float: left;
	clear: both;
}

#lead p{
	display: block;
	width: 90%;
	text-align: center;
	color: #000;
	font-size: 100%;
	line-height: 140%;
	font-weight: 400;
	margin: 0 5%;
	float: left;
	clear: both;
}
#lead p strong{
	display: block;
	width: 100%;
	text-align: center;
	color: #0066cc;
	font-size: 140%;
	line-height: 120%;
	font-weight: 800;
	margin: 0 0 20px 0;
	float: left;
	clear: both;
}

section h2{
	display: block;
	width: 100%;
	text-align: center;
	color: #0066cc;
	font-size: 140%;
	line-height: 120%;
	font-weight: 800;
	margin: 10px 0 20px 0;
	float: left;
	clear: both;
}
#overview h2{
	color: #fff;
}

#business {
	display: block;
	width: 100%;
	border-top: solid 1px #000;
	float: left;
	clear: both;
}

#business ul{
	display: block;
	width: 90%;
	font-size: 80%;
	letter-spacing: 1px;
	list-style: none !important;
	margin: 0 5% 50px 5%;
	float: left;
	clear: both;
}
#business li{
	display: block;
	width: 100%;
	text-align: left;
	padding: 14px 0 10px 0;
	border-bottom: dashed 1px #999;
	clear: both;
}

#overview{
	font-size: 80%;
	color: #fff !important;
}
#overview dl{
	display: block;
	width: 90%;
	margin: 0 5% 50px 5%;
	border-bottom: dashed 1px #ccc;
	float: left;
	clear: both;
}
#overview dl dt{
	display: table-cell;
	width: 32%;
	padding: 14px 0 10px 0;
	border-top: dashed 1px #ccc;
	float: left;
}
#overview dl dd{
	display: table-cell;
	width: 68%;
	padding: 14px 0 10px 0;
	border-top: dashed 1px #ccc;
	float: left;
}

#access iframe{
	display: block;
	width: 90%;
	margin: 0 5% 100px 5%;
	float: left;
	clear: both;
}
.tri{
	display: block;
	margin: -1px auto 0 auto;
}

.sp_logo{
	display: block;
	position: relative;
	width: 80%;
	margin: 15px 10% -10px 10% !important;
	z-index: 100;
	float: none;
	clear: both;
}

#tel a{
	display: block;
	position: fixed;
	width: 100%;
	list-style: none !important;
	padding: 0 !important;
	bottom:0;
	background-color: #0066cc;
	filter: drop-shadow(0 5px 20px rgba(0,0,0,0.55));
}
#tel img{
	display: block;
	width: 70%;
	height: auto;
	margin: 15px 15%;
	padding: 0;
}

.c-carousel {
  position: relative;
  width: 420px;
  margin: 0 auto;
}
.c-carousel__activator-main {
  position: absolute;
  z-index: -1;
  opacity: 0;
}
.c-carousel__main {
  overflow: hidden;
  position: relative;
}
.c-carousel__main-track {
  display: flex;
  white-space: nowrap;
  transition: transform 0.3s ease-out;
}
.c-carousel__main-item {
  flex-shrink: 0;
  width: 100%;
}
.c-carousel__main-image {
  display: block;
  width: 100%;
}

.c-carousel__main-control-item {
  display: none;
}
.c-carousel__btn-prev-main, .c-carousel__btn-next-main {
  position: absolute;
  top: 50%;
  right: 16px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  transform: translateY(-50%);
  background-color: #000;
  border-radius: 50%;
  transition: opacity 0.3s;
  cursor: pointer;
}
.c-carousel__btn-prev-main {
  right: auto;
  left: 16px;
}

/* カルーセルの外枠 */
.carousel {
  width: 100%;
  height: 100%;
  display: flex;    /* 子要素を横に並べる */
  overflow: hidden; /* はみ出た部分は表示しない */
  margin: 0 auto;   /* 水平方向中央寄せ */
}
/* カルーセル内の画像 */
.carousel img {
  margin: 0;
  padding: 0;
  display: block; /* imgタグの改行のすき間を消すため */
}
/* スクロールアニメーションのキーフレーム */
@keyframes scroll {
  /* 初期位置は1個目の画像が左端 */
  0% { margin-left: 0; }      
  /* 1個分左の位置に進めて2個目の画像を左端にする */
  20% { margin-left: -100%; }
  /* 少しの間上と同じ位置 */  
  25% { margin-left: -100%; }
  /* 2個分左の位置に進めて3個目の画像を左端にする */
  45% { margin-left: -200%; }
  /* 少しの間上と同じ位置 */  
  50% { margin-left: -200%; }
  /* 以降は上と同様に繰り返し */
  70% { margin-left: -300%; }
  75% { margin-left: -300%; }
  95% { margin-left: -400%; }
  100% { margin-left: -400%; }
}
/* カルーセルの子要素にスクロールアニメーションを設定 */
.carousel > :first-child {
  animation-name: scroll;    /* キーフレーム名 */
  animation-duration: 60s;  /* 再生時間全体は20秒 */
  animation-delay: 0s;      /* 読込直後から遅延無しで開始 */
  animation-iteration-count: infinite;  /* 無限に繰り返す */
}