@charset "UTF-8";

body {
	color: #333;
	font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","游ゴシック",YuGothic,"メイリオ",Meiryo,Verdana,sans-serif;
	font-size: 2.0em;
	line-height: 2;
	text-align: left;
	color: #555;
	-webkit-text-size-adjust: 100%;
}

#container {
	overflow: hidden;
	margin: auto;
	width: 640px;
}

.ttl01 {
	height: 238px;
	background: url(../img/ttl01_bg.gif) left top repeat-x;
}
.ttl02 {
	height: 200px;
	background: url(../img/title_bg.png) left top repeat-x;
}

.txtbold {
	color: #34409b;
	font-weight: bold;
}


/* menu
------------------------------------------------------------------------------------*/
#menu{
  width: 100%;
	z-index: 1;
	background: #191970;
}
#menu ul{
	position: relative;
	width: 1000px;
	margin: 0 auto;
	color: #fff;
	font-size: 80%;
}
#menu ul li{ float: left; padding: 5px 10px;}
#menu ul li.order {
	color: #fff;
	font-size: 100%;
	position: absolute;
	right: 0;
	font-weight: bold;
	padding: 0;
}
#menu ul li.order a {
	background: #c62547 url(../img/arrow_01.gif) no-repeat scroll 10px center;
	display: inline-block;
	padding: 5px 10px 5px 30px;
	color: #fff;
}
#menu ul li.order a:hover{
	background: #dcad05 url(../img/arrow_01.gif) no-repeat scroll 10px center;
}

/* HEADER
------------------------------------------------------------------------------------*/
header{
	margin: 0px auto 27px auto;
	width: 100%;
	height: 145px;
	border-bottom: solid 1px #8ba1ef;
}
#iframe_wrap{
	margin: auto;
	width: 640px;
}
#head_iframe{
	width: 640px;
	height: 145px;
}

/* CONTENTS
------------------------------------------------------------------------------------*/
.contents {
	width: 640px;
	margin: 0 auto;
	background: #fff;
}

.contentsbox {
	width: 1000px;
	margin: 0 auto;
	background: #fff;
	padding: 0 0 0 0;
}

/* section 余白共通 */
/* section 余白共通 */
.text_area { padding: 0px 20px; }
.text_area2 { padding: 0px 0px 20px 20px; line-height:40px;}
.bg_area {
	padding: 0px 20px;
}
.text_area p,
.bg_area p { margin-bottom: 40px;}
.text_area p:last-child,
.bg_area p:last-child { margin-bottom: 0;}


/* イメージ */
.img_05 { background: url(../img/img_05.png) no-repeat top 60px right 0;}

/* 無料動画 */
.free_movie {
	background: url(../img/movie_bg.png) no-repeat top center;
	text-align: center;
	margin: 0px 0px 50px 0px;
	width: 640px;
	height: 320px;
}
.free_movie iframe {
    margin: 25px 75px;
}



/* 前書き */
.bgg_area {
	border: 10px solid #f5f5f5;
	margin: 50px 0 ;
	background:   url(../img/img02.png) no-repeat right center , url(../img/bg_01.gif);
/*	background:url(../img/bg_01.gif) ;*/
	padding: 40px;
}
.bgg_area p { margin-bottom: 30px;}
.bgg_area p:last-child { margin-bottom: 0;}


/* コメント */
.comment {
	border: 1px dashed #dedede;
	background: #f5f1ee;
	padding: 30px 30px 30px 300px;
	min-height: 150px;
	max-width: 900px;
	position: relative;
	margin: 50px 0;
}
.comment img {
	position: absolute;
	top: -30px;
	left: -50px;
}
.comment2 {
	border: 1px dashed #dedede;
	background: #f5f1ee;
	padding: 30px 300px 30px 30px;
	max-width: 900px;
	position: relative;
	margin: 50px 0;
}
.comment2 img {
	position: absolute;
	top: -30px;
	right: -50px;
}

/* プロフィール */
.profile {
	overflow: hidden;
	border: 3px solid #8ba1ef;
	margin: 0px 0px 50px 0px;
	font-size: 75%;
	background: #fff;
}
.profile img {
	width: 100%;
}
.profile .inner .photo_01,
.profile .inner .photo_02 {
	width: 100%;
}
.profile .inner { padding: 15px;}
.profile .inner .photo {
	display: table;
	margin: 0px 0px 10px 0px;
	width: 100%;
}
.profile .inner .photo img{
	display: table-cell;
	max-width: 198px;
}
.profile .inner .photo #photo_right{
	display: table-cell;
	vertical-align: middle;
}
.profile .inner .fr { float: left; width: 55%;}
.profile .inner .disc { list-style-type: disc; padding: 0px 10px 10px 15px;}
.profile .inner dl dt { width: 5.5em; float: left;}
.profile .inner dl dd { display: block;}

/* ブレッド */
ul.bled { border: 10px solid #008b8b;}
ul.bled li { border-bottom: 5px solid #008b8b; padding: 20px 20px 20px 100px; line-height: 1.6;}
ul.bled li:last-child { border-bottom: 0;}
ul.bled li .mincho { color: #51423d;}
ul.bled li.bled1 { background: url(../img/bled1.png) no-repeat left center;}
ul.bled li.bled2 { background: url(../img/bled2.png) no-repeat left center;}
ul.bled li.bled3 { background: url(../img/bled3.png) no-repeat left center;}
ul.bled li.bled4 { background: url(../img/bled4.png) no-repeat left center;}
ul.bled li.bled5 { background: url(../img/bled5.png) no-repeat left center;}
ul.bled li.bled6 { background: url(../img/bled6.png) no-repeat left center;}
ul.bled li.bled7 { background: url(../img/bled7.png) no-repeat left center;}
ul.bled li.bled8 { background: url(../img/bled8.png) no-repeat left center;}
ul.bled li.bled9 { background: url(../img/bled9.png) no-repeat left center;}

/* ボタンアニメーション */
#btn{
	margin: 50px 0 70px;
	text-align: center;
	height: 140px;
}
#btn a img{
	height: 140px;
	width: 770px;
	margin: 0;
}


/* present */
.present {
	background: url(../img/present.png) no-repeat top left;
	padding: 570px 50px 50px 50px;
	margin-top: 50px;
}




/* FOOTER
------------------------------------------------------------------------------------*/
footer {
	border-top: #e7e7e7 solid 10px;
	padding: 10px 0;
	background: #fff;
}

footer .inner{
	width: 1000px;
	margin: 0 auto;	
}

/*toggle
-----------------------------------------*/
.view_toggle_btn{
	cursor: pointer;
	padding: 4px 8px;
	margin: 0px 0px 20px 0px;
	border: solid 1px #8ba1ef;
	color: #8ba1ef;
	text-align: center;
}
.view_toggle_trg{
	display: none;
}

/*ボタンアニメーション
-----------------------------------------*/
/* ボタンをバウンドさせる */
.is-bounce {
  animation: bounce 4s infinite;
  -moz-animation: bounce 4s infinite;
  -webkit-animation: bounce 4s infinite;
  -webkit-animation-delay: 4s;
  animation-delay: 4s;
}
@-webkit-keyframes bounce {
  0%, 4%, 10%, 18%, 100% {-webkit-transform: translateY(0);}
  5% {-webkit-transform: translateY(-6px);}
  12% {-webkit-transform: translateY(-4px);}
}
@keyframes bounce {
  20%, 24%, 30%, 34%, 100% {-webkit-transform: translateY(0);transform: translateY(0);}
  25% {-webkit-transform: translateY(-10px);transform: translateY(-10px);}
  32% {-webkit-transform: translateY(-4px);transform: translateY(-4px);}
}
/* アニメーションを遅延させる */
.is-bounce + .is-bounce {
  -webkit-animation-delay: .5s;
  animation-delay: .5s;
}
 
/*電話ボタン
-----------------------------------------*/ 
#sp{
	display: none;
}
@media screen and (min-width:0px) and (max-width:640px){
	#sp{
		display: block;
	}
}


/*pagetop
-----------------------------------------*/
#page-top {
	position: fixed;
	bottom: 20px;
	right: 20px;
	font-size: 10px;
	z-index: 1;
}
#page-top a {
	background: #666;
	text-decoration: none;
	color: #fff;
	width: 100px;
	padding: 25px 0;
	text-align: center;
	display: block;
	border-radius: 5px;
}
#page-top a:hover {
	text-decoration: none;
	background: #999;
}


/*タブデザイン
-----------------------------------------*/ 
.tab-wrap {
  display: flex;
  flex-wrap: wrap;
  margin:20px 0;
}
.tab-wrap:after {
  content: '';
  width: 100%;
  height: 3px;
  background: #003c8a;
  display: block;
  order: -1;
}
.tab-switch:checked+.tab-label {
    background: #325A8C;
    margin-top: -0.5rem;
    transition: margin .3s;
    align-items: center;
    display: flex;
    justify-content: center;
}
.tab-label{
    border-radius: 0;
    position: relative;
}
.tab-label:after {
    position: absolute;
    top: 0;
    right: 0;
    content: '';
    width: 0;
    border-width: 0 16px 16px 0;
    border-style: solid;
    border-color: #fff #fff #ddd #ddd;
    box-shadow: -1px 1px 2px rgba(0, 0, 0, .1);
}
.tab-label {
  color: White;
  background: LightGray;
  font-weight: bold;
  white-space: nowrap;
  text-align: center;
  padding: 10px .5em;
  order: -1;
  position: relative;
  z-index: 1;
  cursor: pointer;
  border-radius: 5px 5px 0 0;
  flex: 1;
}
.tab-label:not(:last-of-type) {
  margin-right: 5px;
}
.tab-content {
  width: 100%;
  height: 0;
  overflow: hidden;
  opacity: 0;
  border: solid 1px #003c8a; 
}
.tab-switch:checked+.tab-label {
  background: #6288c5;
}
.tab-switch:checked+.tab-label+.tab-content {
  height: auto;
  overflow: auto;
  opacity: 1;
  transition: .5s opacity;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}
.tab-switch {
  display: none;
}
.trouble-list {
 width: 100%;
 text-align: center;
 border-collapse: collapse;
 border-spacing: 0;
}
.trouble-list tr:nth-child(2n+1) {
 background: #e5ebf3;
}
.trouble-list th {
 font-size: 85%;
 text-align: center;
 padding: 10px;
 background: #003c8a;
 border-right: solid 1px #ffffff;
 color: #ffffff;
}
.trouble-list th:last-child {
 border-right: none;
}
.trouble-list td {
 font-size: 85%;
 padding: 10px;
 border-right: solid 1px #003c8a; 
}
.trouble-list td:last-child {
 border-right: none;
}