@charset "utf-8";

/* ************************************************ 
*	基本設定
* ************************************************ */	
html {height: 100%; }
body {
font-family: 'Noto Sans Japanese', serif !important; font-weight: 200 !important;
font-size: 14px;
background: #ffffff;
color: #444;
line-height: 180%;
margin: 0;
min-width: 320px;
height: 100%;
}


html {
    animation: fadeIn 1s ease 0s 1 normal;
    -webkit-animation: fadeIn 1s ease 0s 1 normal;
}

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

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


.drawer-hamburger {
    position: absolute !important;
    z-index: 4;
    top: 0;
    display: block;
    box-sizing: content-box;
    width: 2rem;
    padding: 0;
    padding: 18px .75rem 30px;
    -webkit-transition: all .6s cubic-bezier(.19,1,.22,1);
    transition: all .6s cubic-bezier(.19,1,.22,1);
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    border: 0;
    outline: 0;
    background-color: transparent;
}


/* リンク */

a{
color:#252421;
text-decoration:none;
transition: 0.5s;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
-ms-transition: 0.5s;

}

a:hover{
color:#f10505;
}

a:active, a:focus {
outline: 0;
}

p {font-size: 18px; line-height: 1.6em;}

/* 画像 */

img{
border:0;
padding:0px;
margin:0px
}

img.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}

img.alignright {
padding:4px;
margin: 0 0 10px 20px;
display: inline;
}

img.alignleft {
padding: 4px;
margin: 0 20px 10px 0;
display: inline;
}


/* ボタンレイアウト */

button.button1 {
/* 文字サイズを1.4emに指定 */
font-size: 1.4em;

/* 文字の太さをboldに指定 */
font-weight: bold;

/* 縦方向に10px、* 横方向に30pxの余白を指定 */
padding: 10px 30px;

/* 背景色を濃い青色に指定 */
background-color: #28b17e;

/* 文字色を白色に指定 */
color: #fff;

/* ボーダーをなくす */
border-style: none;
}



/* フロート */

.alignright { float: right; }

.alignleft { float: left; }

.right{ float: right; }

.left{ float: left; }

.clear{ clear:both; }


/* リスト */
ol{
padding: 0 0 0 0;
list-style: decimal;
}

ul{

padding: 0 0 0 0;
list-style: disc;
}

li{
padding: 0 0;
}

li a{
text-align: center;
color:#010101;
transition: 0.5s;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
-ms-transition: 0.5s;
font-family: 'Noto Sans Japanese', serif !important; font-weight: 200 !important;

}



li a:hover{
color:#6a5c5c;
}

.current_page_item {padding-left: 20px !important; padding-right: 20px !important;}

/* For modern browsers */
.cf:before,
.cf:after {
    content:"";
    display:table;
}
 
.cf:after {
    clear:both;
}
 
/* For IE 6/7 (trigger hasLayout) */
.cf {
    zoom:1;
}

table {
width: 400px;
border-collapse: collapse;
margin: 30px auto;
}
table th{
width: 120px ;
padding: 10px;
text-align: left;
vertical-align: top;
font-weight: 200;
font-size: 14px;
}

th span {background: #1d288d; padding: 5px 10px; border-radius: 10px; margin: 0 0 0 10px; color: #fff; font-size: 11px;}
table td{
padding: 10px;
font-size: 16px;
text-align: left;
}

td h3 {margin-bottom: 5px !important;}
img {vertical-align: bottom;}
/* ************************************************ 
*	全体Wrapper
* ************************************************ */	

.wrapper {
margin: auto; 
min-width: 1100px;
padding: 30px 0px;
_width: 1100px;
height: 100%;

}

header {background: #fff; padding: 10px 20px; width: auto; text-align: left;  border-bottom: 1px solid #999;}
header a img {max-width: 200px; min-width: 120px; width: 80%;}

#global-nav {
    width: 100%;
}

.fixed {
    position: fixed;
    top: 0;
    z-index: 1;
}

.topmenu {background: #fff; padding: 10px 0px; border-bottom: 1px solid #999;}
.topmenu img {padding-left: 20px;}
.topmenu a {position: relative; right: 20px;}

.product_title {text-align: left; float: left; width: 130px; padding-top: 5px;}

.top_btn {background: #60AEC6; color: #fff; display: inline; padding: 3px 20px; border-radius: 12px; float: right; font-size: 15px; letter-spacing: 0.05em; font-weight: 600; }
.top_btn:hover {background: #2288a6; color: #fff !important; }

.mainbox {max-height: 900px; min-height: 300px; max-width: 1000px; margin: 0 auto; overflow: hidden;}

p {font-size: 14px; letter-spacing: 0.05em; line-height: 1.6em; padding: 10px 20px;}
h4 {font-weight: 200; letter-spacing: 0.05em; line-height: 1.5em; text-align: center; padding-left: 20px; padding-right: 20px; font-size: 18px; }
h2 {font-weight: 400; letter-spacing: 0.05em; margin-bottom: 30px; line-height: 1.5em; text-align: center; font-size: 28px; padding-left: 20px; padding-right: 20px;}
.topcontent {text-align: center; border-top: 1px solid #999; padding: 20px 0px;}
.topcontent img {width: 100%;}
.fontblue {color: #60AEC6; text-align: center; padding-top: 0; padding-bottom: 0;}
.linkplus {width: 60px; margin: 20px auto; text-align: center;}
.linkplus img {width: 60px !important; margin: 0 auto;}

.circle {display: inline-block; background: #60AEC6; border-radius: 500px;}

.linkred {color: #cc2121 !important;}
.linkred:hover {color: #ec6666 !important;}
.accordion ul {
	width:100%;
	padding:0;
}
.accordion li {
	position:relative;
	list-style:none;
}
.accordion li:first-child {}

.accordion > ul > li > a {
	display: block;
	text-decoration: none;
	cursor: pointer;
	padding: 0;
	position: relative;
}
.accordion > ul > li > a h5:hover {
	color: #111;
	text-decoration:none;
}

.accordion > ul > li > div {
	display: none;
	text-align:left;
	padding:0;
	color:#333;
	line-height:1.8;
}

.accordion > ul > li > p {
	text-align:left;
	padding:0 0em 20px 0em !important;
	color:#333;
	line-height:1.7;
	letter-spacing: 0.05em;
}

h3 {
	text-align:left;
  padding:0 20px 20px 20px !important;
	color:#333;
	line-height:1.7;
	letter-spacing: 0.05em;
	margin-bottom: 0 !important;
}

.accordion li .accordion_icon,
.accordion li .accordion_icon span {
	display: inline-block;
	transition: all .3s;
	box-sizing: border-box;
}
.accordion li .accordion_icon {
	position: relative;
	width: 50px;
	height: 50px;
	top: 0px;
	right: 0px;
	background: #60AEC6;
	border-radius: 200px;
}

.accordion li .accordion_icon.active {
	position: relative;
	width: 50px;
	height: 50px;
	top: 0px;
	right: 0px;
	background: #b7b7b7;
	border-radius: 200px;
}


.accordion li .accordion_icon span {
	position: absolute;
    width: 60%;
	height: 3px;
    background-color: #fff;
}
.accordion li .accordion_icon span:nth-of-type(1) {
	transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    right: 10px;
    top: 24px;
}
.accordion li .accordion_icon span:nth-of-type(2) {
	transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    right: 10px;
    top: 24px;
}
.accordion li .accordion_icon.active span:nth-of-type(1) {
	transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
}
.accordion li .accordion_icon.active span:nth-of-type(2) {
	transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
	-moz-transform: rotate(135deg);
	-ms-transform: rotate(135deg);
    -o-transform: rotate(135deg);
}

.imgcenters img {width: 100%; max-width: 640px; margin: 0 auto;}
.imgcenters {text-align: center;}


.swiper-container {
    width: 100%;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
height: 650px;
}

.swiper-container {
        width: 100%;
        padding-top: 50px;
        padding-bottom: 50px;
    }
    .swiper-slide {
        background-position: center;
        background-size: cover;
        width: 850px !important;
        height: 650px !important;
    }

.swiper-pagination-bullet {
    width: 12px !important;
    height: 12px !important;
    display: inline-block;
    border-radius: 100%;
    background: #000;
    opacity: 0.5 !important;
}

.swiper-pagination-bullet-active {
    opacity: 1 !important;
    background: #20288d !important;
}

.swiper-slide {background-size: 100% !important;}



#page-top {
    position: fixed;

    right: 10px;
}

#page-top a {
    text-decoration: none;
    width: 60px;
    text-align: center;
    display: block;
}

ul {padding: 10px 20px;}
li {font-size: 18px; padding: 5px;}


.fontred {color: #f10505 !important;  font-size: 28px; font-weight: bold;}


.font24 {font-size: 30px !important; font-weight: bold; border-bottom: 1px solid rgba(38, 36, 36, 1); padding-bottom: 10px; line-height: 1.7em; }
.font34 {font-size: 34px !important; font-weight: 200; line-height: 1.7em;  }

.tex_c {text-align: center;}
.tex_l {text-align: left;}
.tex_r { text-align: right;}
.w500 {max-width: 500px; margin: 0 auto;}
.w700 {max-width: 700px; margin: 0 auto;}
.mt0 {margin-top: 0 !important;}
.pt0 {padding-top: 0 !important;}
.mt80 {margin-top: 80px;}
.mt60 {margin-top: 60px;}
.mt50 {margin-top: 50px;}
.mb50 {margin-bottom: 50px;}
.pt10 {padding-top: 10px;}
.pt30 {padding-top: 30px;}
.pt50 {padding-top: 50px;}
.pl20 {padding-left: 20px;}
.pr20 {padding-right: 20px;}
.mb10 {margin-bottom: 10px !important;}
.mb20 {margin-bottom: 20px;}
.mb30 {margin-bottom: 30px !important;}
.mb130 {margin-bottom: 130px;}
.pb30 {padding-bottom: 30px;}
.pt60 {padding-top: 60px;}
.pb60 {padding-bottom: 60px;}

.bordert {border-top: 1px solid #000;}




.w1000 {max-width: 1100px; margin: 0 auto;}


footer {background: #fff; width: auto; padding: 30px 20px 30px 20px; margin-top: 20px; border-top: 1px solid #333; text-align: center;}
footer a {padding: 5px 5px; font-size: 12px; color: #333; text-align: center;}

address {text-align: center; font-size: 12px; color: 000; padding: 5px 20px; display: block;}

.overimg_grade:hover {
background: #f10505;
-moz-transition: .5s;
-webkit-transition: .5s;
-o-transition: .5s;
-ms-transition: .5s;
transition: .5s;
}


.overimg:hover {
filter:alpha(opacity=70);
-moz-opacity: 0.7;
opacity: 0.7;
-moz-transition: .2s;
-webkit-transition: .2s;
-o-transition: .2s;
-ms-transition: .2s;
transition: .2s;
}

.smp {display: none;}
.pc {display: block;}

/*フェード*/

.list{
	list-style-type: none;
	overflow: hidden;
}
.list li{
	
	
}

.list-mv07{
	opacity: 0;
	transform: translate(0,60px); 
	-webkit-transform: translate(0,60px); 
transition: .8s;
}
.mv07{
	opacity: 1.0;
	transform: translate(0,0); 
	-webkit-transform: translate(0,0);
transition: .8s;
}

.white1100 {max-width: 1040px; margin: 0 auto; background: #fff; padding: 30px; text-align: left;}


@media screen and (max-width: 480px){
  
  h2 {
    font-weight: 400;
    letter-spacing: 0.05em;
    margin-bottom: 30px;
    line-height: 1.5em;
    text-align: center;
    font-size: 24px;
    padding-left: 20px;
    padding-right: 20px;
}
h3 {
    text-align: left;
    padding: 0 20px 20px 20px !important;
    color: #333;
    line-height: 1.7;
    letter-spacing: 0.05em;
    margin-bottom: 0 !important;
    font-size: 16px;
}
}