@charset "utf-8";

/*===============================================
common
===============================================*/

.sp_only { display:none;}
.pc_only { display:block;}

.full_width { width:100%; height:auto;}
strong,.bold { font-weight:bold!important;}

img { width:100%; height:auto; }
a img:hover { opacity:0.8;} 

a.line { text-decoration:underline; color:#20637b;}

body {  font-family:"Noto Sans JP", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;  color:#ccc;}
	
/*layout*/
.inr { width:1000px; margin:0 auto;}
.sec { padding:60px 0;}
.box { padding:30px 20px; box-sizing:border-box; }
.sec_l { float:left;}
.sec_r { float:right;}
.txt_r { text-align:right;}
.txt_l { text-align:left;}
.indent { padding-left:1em; text-indent:-1em;}
.red { color:#F30;}
.center { text-align:center;}

.box_round { border:2px #036cb6 solid; border-radius:5px; box-sizing:border-box; background:rgb(0,0,0,0.3);}

section { margin:0; padding:0;}

.brown {color:#754c23!important;}


.contents { padding-top:50px;}
.contents.page  { padding-top:120px;}

body { background:url(../images/main_bg_pc.jpg) no-repeat top center fixed;  background-size:cover; }

body { background:#000;}

/*===============================================
.ttl
===============================================*/

.ttl { font-size:20px; font-weight:bold; color:#fff; text-align:center; margin-bottom:30px;}
.url {}

.ttl01 { font-weight:bold; font-size:3rem; color:#036cb6;}
.ttl01_p { font-size:1rem; line-height:1; color:#496578;}

.ttl02 { font-size:1.8rem; font-weight:bold; color:#1c2e3e; }
.ttl03 { font-size:2.1rem; font-weight:bold; color:#fff; margin-bottom:20px; background:#0b5c90; padding:4px 0; }
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#1e5799+0,2989d8+50,207cca+51,7db9e8+100;Blue+Gloss+Default */
.ttl03 { background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(-45deg,  #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

/*===============================================
movie
===============================================*/

.movie { width:800px; height:100%;}

/*===============================================
header
===============================================*/

header { width:100%;  position:fixed; top:0; z-index:100; background:url(../images/main_bg_pc.jpg) no-repeat center center; background-size:cover; }
header h1 { width:130px; margin:0 auto; padding:0; line-height:1;}

/*===============================================
nav
===============================================*/

header .sp_btn { position:absolute; right:0; top:24px; display:none;}

header nav ul { width:100%; font-size:0;}
header nav li { display:inline-block; width:33.33%; font-size:15px; padding-bottom:20px;  color:#2156c7;}
header nav li a {  display:block; text-align:center; color:#fff!important; font-weight:bold;}


.menu-trigger { display:block;}
.menu-trigger span { display: inline-block; transition: all .4s; box-sizing: border-box;}
.menu-trigger { position: relative; width: 40px; height: 29px;}

.menu-trigger span { position: absolute;left: 0;width: 100%;height: 4px; background-color: #036cb6; border-radius: 4px;}
.menu-trigger span:nth-of-type(1) { top: 0;}
.menu-trigger span:nth-of-type(2) { top: 12px;}
.menu-trigger span:nth-of-type(3) { bottom: 0;}
.menu-trigger.active span:nth-of-type(1) { -webkit-transform: translateY(11px) rotate(-45deg);transform: translateY(11px) rotate(-45deg);}
.menu-trigger.active span:nth-of-type(2) { opacity: 0;}
.menu-trigger.active span:nth-of-type(3) { -webkit-transform: translateY(-15px) rotate(45deg); transform: translateY(-15px) rotate(45deg);}


/*===============================================
.sec_movie
===============================================*/


.sec_movie { position:relative; font-size:0; margin:0; padding:0;}

.sec_movie #sound_btn { position:absolute; width:20px; bottom:20px; right:30px; z-index:2; cursor:pointer;}
.sec_movie #sound_play_btn { position:absolute; width:14px; bottom:20px; right:80px; z-index:2; cursor:pointer;}

.sec_movie video { width:100%;}
.tp-dottedoverlay {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAG0lEQVQYV2NkYGD4z8DAwMgABXAGNgGwSgwVAFbmAgXQdISfAAAAAElFTkSuQmCC");
  background-blend-mode: overlay;
  background-position: 0px ;
  background-size: auto, cover;
  width: 100%;
  height: 100%;
  position: absolute;
  top:0px;
  left:0px;
  z-index: 1;
}

footer { color:#999; font-size:10px; text-align:center; padding:40px 0 20px 0;}

/*===============================================
news
===============================================*/

.news_sec a { color: #fff;}
.news_sec dl { display: table; width: 100%; border-bottom: 1px solid #999;}
.news_sec dt { display: table-cell; width: 20%; text-align: center; vertical-align: middle; font-size: 12px; padding: 10px 0;}
.news_sec dd { display: table-cell; width: 80%; padding:10px 10px; box-sizing: border-box; vertical-align: middle; }
.news_sec dd p { border-bottom: 1px #555 dashed; position: relative; padding-left: 12px; text-align: left;}
.news_sec dd p:before { content: ""; background:url("../images/icon/allow_right.png") no-repeat left center; height: 10px; width: 5px; position: absolute; background-size: contain; top: 6px; left: 0px; } 
.news_sec dd p:last-child { border-bottom:none;}

/*===============================================
seminar_sec
===============================================*/

/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#feffff+0,eaf3f7+8,b8deed+100 */
#seminar .sec .box,.gradetion_box { 
background: #feffff; /* Old browsers */
background: -moz-linear-gradient(-45deg,  #feffff 0%, #eaf3f7 8%, #b8deed 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg,  #feffff 0%,#eaf3f7 8%,#b8deed 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg,  #feffff 0%,#eaf3f7 8%,#b8deed 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feffff', endColorstr='#b8deed',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.gradetion_box002 { 
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ebe9f9+0,c1bfea+100 */
background: #ebe9f9; /* Old browsers */
background: -moz-linear-gradient(-45deg,  #ebe9f9 0%, #c1bfea 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg,  #ebe9f9 0%,#c1bfea 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg,  #ebe9f9 0%,#c1bfea 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebe9f9', endColorstr='#c1bfea',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.seminar_sec dl { border-bottom:1px #333 dashed; padding-bottom:20px; margin-bottom:20px; color:#000;} 
.seminar_sec dt { font-weight:bold; font-size:2rem; margin-bottom:5px;}
.seminar_sec dd { font-size:1.5rem; line-height:2;}
.seminar_sec dd a { text-decoration:underline; word-break:break-all; color:#0b5c90;}

.seminar_sec p { color:#039;}

.seminar_sec dl:last-child { margin-bottom:0;}


/*===============================================
goods
===============================================*/

ul.goods { font-size:0; margin-bottom:30px; text-align:center; display:flex; flex-wrap:wrap;  justify-content: space-between;}
ul.goods li { background:#fff; display:inline-block; width:49%; margin-bottom:20px;  font-size:14px; padding:20px 30px; box-sizing:border-box; text-align:center; vertical-align:top; color:#000;}
ul.goods li:nth-child(2n) { margin-right:0;}

ul.goods h3 { font-weight:bold; font-size:120%; margin:10px 0;} 
ul.goods .price { font-weight:bold; color:#F00;}
ul.goods .price b {  font-size:135%;}

ul.goods li .goods_img { width:70%; margin:0 auto;}

#Shopping .use_info { background:#fff; color:#000;}

/*
.btn-select {
  width: 90%;
  margin: 10px auto;
  position: relative;
background: #0bd5e8;
background: -moz-linear-gradient(top,  #0bd5e8 0%, #1e79db 100%); 
background: -webkit-linear-gradient(top,  #0bd5e8 0%,#1e79db 100%); 
background: linear-gradient(to bottom,  #0bd5e8 0%,#1e79db 100%);
box-sizing:border-box;
  border-radius: 6px;
  cursor: pointer;
}

.label {
  color: #fff;
  position: absolute;
  width: 100%;
  z-index: 1;
  top:20%;
}

.select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  display: block;
  cursor: pointer;
  width: 100%;
  border: none;
  padding: 10px;
  opacity: 0;
  position: relative;
  z-index: 2;
  font-size:15px;
  font-weight:bold;
}

.select::-ms-expand {
  display: none; 
}

.select:focus {
  z-index: -1;
  opacity: 1;
}
*/

.cp_ipselect {
	overflow: hidden;
	width: 90%;
	margin: 2em auto;
	text-align: center;
}
.cp_ipselect select {
	width: 100%;
	padding-right: 1em;
	cursor: pointer;
	text-indent: 0.01px;
	text-overflow: ellipsis;
	border: none;
	outline: none;
	background: transparent;
	background-image: none;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
	
}
.cp_ipselect select::-ms-expand {
    display: none;
}
.cp_ipselect.cp_sl01 {
	position: relative;
	border-radius: 2px;
	background: #0bd5e8; /* Old browsers */
background: -moz-linear-gradient(top,  #0bd5e8 0%, #1e79db 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #0bd5e8 0%,#1e79db 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #0bd5e8 0%,#1e79db 100%); 
}
.cp_ipselect.cp_sl01::before {
	position: absolute;
	top: 40%;
	right: 0.9em;
	width: 0;
	height: 0;
	padding: 0;
	content: '';
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 6px solid #fff;
	pointer-events: none;
	
}
.cp_ipselect.cp_sl01 select {
	padding: 14px 10% 14px 10%;
	color: #fff;
	font-weight:bold;
	font-size:16px;
}

#Shopping .table_style { width:100%;}
#Shopping .table_style dl { width:100%;}
#Shopping .table_style dt,#Shopping .table_style dd { border-bottom:1px #CCCCCC solid; padding:15px 0;}
#Shopping .table_style dt { width:30%; background:#fafafa;}
#Shopping .table_style dd { padding:15px 20px; text-align:left; box-sizing:border-box;}
#Shopping .table_style .required { display:block; font-size:10px; margin:0 auto; }
#Shopping .table_style .required span { background:#F00; color:#fff; display:inline-block; line-height:1; padding:1px 5px; border-radius:2px;}
#Shopping .table_style dd input[type="text"] { background:#f1f1f1; padding:10px;}
#Shopping .table_style dd select { font-size:14px; padding:5px; width:30%;}
.w80 { width:80%;}
.w40 { width:40%;}
.w100 { width:100%;}
.price_txt { font-size:2rem; font-weight:bold; color:#089bef; padding:0 0 0 8px;}
#Shopping .table_style .error { display:block; color:red;}

/*
.buy_items li { width:30%; margin-right:5%;}
.buy_items li:nth-child(3n) { margin-right:0%;}
*/

.buy_items li { width:100%; margin:5px 0; padding:5px 0; border-bottom:1px #CCCCCC dashed;}
.buy_items li:last-child { border-bottom:none; margin-bottom:0; padding-bottom:0;}
.buy_items li .goods_img { width:20%; float:left; margin-right:20px;}
.buy_items li .txt { }
.buy_items li .price { font-size:1.5rem; font-weight:bold;  padding:0 0 0 8px;}

.sec_gallery ul { display:flex; flex-wrap:wrap;  justify-content: space-between;}
.sec_gallery ul li { width:32%;}

.red { color:#903;}


@media screen and (max-width: 768px) {
	
.sp_only { display:block;}
.pc_only { display:none;}

.contents.page  { padding-top:30px;}

/*===============================================
header
===============================================*/

header { position:fixed; top:0; z-index:100; }
header h1 { width:100px; margin:0 auto;}

/*===============================================
.sec_movie
===============================================*/

.sec_movie { padding-top:0px; overflow:hidden;}
.sec_movie #sound_btn { pright:10px;}
/*.sec_movie #sound_btn { display:none;}*/

/*===============================================
movie
===============================================*/

.movie { width:100%; height:100%;}

/*===============================================
.ttl
===============================================*/

.ttl { font-size:18px; font-weight:bold; }
.url { font-size:12px;}

/*layout*/
.inr { width:98%; margin:0 auto; padding:0 1%; box-sizing:border-box;}

/*===============================================
nav
===============================================*/

header .sp_btn { position:absolute; right:3%; top:20px; display:block;}
header nav { display:none;}
header nav li { display:inline-block; width:100%; font-size:15px; border-bottom:1px dotted #fff; margin-bottom:10px; padding-top:10px;}
header nav li:last-child { border:none;}

html,body { width:100%; overflow-x: visible;}


.sec_gallery ul li { width:48%;}

/*===============================================
.seminar_sec
===============================================*/
.seminar_sec dt { font-size:1.8rem;}
.seminar_sec dd { font-size:1.2rem;}


/*===============================================
goods
===============================================*/

#Shopping .box { padding:20px 2%; box-sizing:border-box;}

ul.goods li h3 { font-size:88%;}
ul.goods li { width:49%; padding:19px 7px; margin-bottom:10px;  }

ul.goods .price { font-weight:bold; color:#F00; font-size:95%;}
ul.goods .price b {  font-size:115%;}

select.time_select { width:80%!important;}
select.time_select option { width:80%!important;}

#Shopping .table_style dt { width:18%; background:#fafafa; font-size:11px;}
#Shopping .table_style dd { font-size:90%;}

.w80 { width:100%;}
.w40 { width:100%;}
.w100 { width:100%;}

.indent { text-align:left;}
.indent li { text-indent:-1em; padding-left:1em;}

/*===============================================
news
===============================================*/

.news_sec dl { display: table; width: 100%; border-bottom: 1px solid #999;}
.news_sec dt { display:block; width: 100%;  margin-bottom: 5px;}
.news_sec dd { display:block; width: 100%; padding:0 10px 10px 10px; box-sizing: border-box;}
    
}


.message { font-size: 0.9em;  background: #04308a; color: #fff; text-align: center; padding: 5px 10px 6px 10px;}
      .img { width: 240px;; margin: 0 auto;}
     
       #qa .sec001 h3 { text-align: center; font-weight: bold; font-size: 1.8rem; margin: 10px 0; color:#fff;}
       #qa .sec001 .box_round { background: #fff;}
       #qa .sec001 .box_round dt,#qa .sec001 .box_round dd { display: flex;}
       #qa .sec001 .box_round dt p, .sec001 .box_round dd p { width: calc(100% - 40px); text-align: left; color: #000;}
       #qa .sec001 .box_round .icon { width: 30px; height: 30px; border-radius: 50%; margin-right: 8px; line-height: 28px; font-size: 1.6rem; font-weight: bold; color:#fff; text-align: center; }
       #qa .sec001 .box_round dt .icon { background: #0755be;}
       #qa .sec001 .box_round dd .icon { background: #9f2e59;}
       #qa .sec001 .box_round dt {  margin-bottom: 15px;}
       #qa .sec001 .box_round dt p { color:#0755be; font-weight: bold; font-size: 1.7rem;}
       #qa .sec001 .box_round a { text-decoration: underline!important; color: #0755be;}
    @media screen and (max-width: 768px) {
        .img { width: 40%; margin: 0 auto;}
        }
     .message { font-size: 0.8em;}