@charset "UTF-8";

/*デバッグ用罫線*/
div,ul,li {border: 0px solid #f00;}

/*=====================リンク ホバー処理=====================*/
a:hover img {opacity: 0.7;filter: alpha(opacity=70);-ms-filter: “alpha(opacity=70)”;}
a{text-decoration: underline;}
a:hover{text-decoration: none;}

/*=====================罫線=====================*/
hr {border:0; border-bottom: 1px solid #444;margin-top: 10px;margin-bottom: 15px;}
.bg_black hr {border:0; border-bottom: 1px solid #fff;margin-top: 10px;margin-bottom: 15px;}
#footer hr {border:0; border-bottom: 1px solid #fff;margin-top: 10px;margin-bottom: 15px;}
hr.dot{border-bottom-style: dashed;}

/*=====================基本タグ指定=====================*/
p,h1,h2,h3,th,td,ul,ui {font-family: "Noto Serif JP", serif;font-optical-sizing: auto;font-style: normal;}
h1,h2,h3 {color: #000;}
p,th,td,ul,ui {color: #555;}
h1,h2,h3 {font-weight: 400; margin-bottom: 16px;}
p {font-weight: 200; margin-bottom: 20px;}
th,td {font-weight: 200;}
iframe {margin-bottom: 30px;}

/*=====================テーブル設定=====================*/
table,tr,th,td{border: 0px solid #f00;}
table {width: 70%; margin: auto;}
tr {border: 1px dotted #444; border-width: 1px 0 1px 0;}
th {width: 36%; text-align: left; padding: 32px 16px;}
td {width: 64%; text-align: left; padding: 32px 0;}
@media(max-width:800px) {table {width: 100%;}}

/*=====================フォーム設定=====================*/

input[type="text"],textarea[type="text"] {width:100%; border: 1px solid #aaa; background-color: #fff;}
input[type="submit"] {padding: 16px; margin: 50px; width:33%; border: 0px solid #aaa; transition: 0.3s ease-in-out;background: #eee;color: #313131;}
input[type="submit"]:hover { color: #FFF; background-color: #313131;}

input[type="submit"]:active {transition: 0.1s;transform: translateY(4px);}

/*=====================フォントサイズ=====================*/
.fs_XS {font-size: 0.6vw;line-height: 0.9vw;}
.fs_S {font-size: 1.0vw;line-height: 1.2vw;}
.fs_M {font-size: 1.5vw;line-height: 1.8vw;}
.fs_L {font-size: 2.7vw;line-height: 3.1vw;}
.fs_XL {font-size: 2.0vw;line-height: 2.4vw;}
@media(max-width:1500px) {
.fs_XS {font-size: 1.0vw;line-height: 1.5vw;}
.fs_S {font-size: 1.3vw;line-height: 1.9vw;}
.fs_M {font-size: 1.8vw;line-height: 2.3vw;}
.fs_L {font-size: 3.5vw;line-height: 4.5vw;}
.fs_XL {font-size: 3.5vw;line-height: 4.5vw;}
}
@media(max-width:800px) {
.fs_XS {font-size: 3.5vw;line-height: 4.5vw;}
.fs_S {font-size: 4.0vw;line-height: 5.5vw;}
.fs_M {font-size: 6.5vw;line-height: 8.0vw;}
.fs_L {font-size: 8.0vw;line-height: 9.5vw;}
.fs_XL {font-size: 10.0vw;line-height: 12.0vw;}
}

/*=====================汎用クラス設定=====================*/
.center {text-align: center;}
.center2 {text-align: center;}
@media(max-width:800px) {
.center2 {text-align: left;}
}

.center_v {margin: auto 0;}
.center_all {margin: auto;}
.bg_black {background-color: black;}
.bg_l-gray {background-color: #e4e4e4;}
.txt_white {color: white;}
.txt_left {text-align: left;}
.title {width:100%; display:flex;flex-wrap:nowrap;}
.spacer {padding: 30px;}
.new { background-color: #B00; color: white; font-size: 13px; padding: 0 6px;margin-right: 8px;}
.flex { display:flex;flex-wrap:nowrap;}
.v_hr { border: 0 solid #444; width:0; height:100px; margin:40px auto; border-left-width: 1px;}

/*=====================ID設定=====================*/
#wrapper {}
#header {height: 50px;background-color: white;}
#header .left{float: left;}
#header .right{float: right;}
@media(min-width:1200px) {#header .wrap{width: 1200px; margin: auto;}}
#header ul {display: flex;list-style-type: none;}
#header li {padding-right: 4px;}

/*=====================ヘッダー固定=====================*/
#header {position: sticky;top: 0;z-index: 1;}

#notice {padding: 16px 32px;background-color: #F1F2F3;}
#notice ul {margin-left: 80px;}

#footer {display: flex;flex-wrap: wrap;background-color: gray; margin-top: 80px;}
#footer ul {display: flex;padding-bottom: 20px;list-style-type: none;}
#footer li {margin: auto;}
#footer #credit {color: white;text-align: center;margin: auto;padding-top: 50px;}
@media(min-width:800px) {}
@media(min-width:1200px) {#slider {width: 1200px;padding: 0;margin: 0 auto;}}

/*=====================基本レイアウト=====================*/
.col0 {}

.col1 {padding: 15px;}
.col1 img {margin-bottom: 20px;}
@media(min-width:800px) {
.col1 {padding: 50px 12%;}
.col1 img {margin-bottom: 40px;}}
@media(min-width:1500px) {
.col1 {width: 1200px;padding: 50px 0;margin: auto;}
.col1 img {margin-bottom: 40px;}}

.col2 {padding: 15px;}
.col2 img {margin-bottom: 20px;}
.col2 .column.left {margin-bottom: 50px;}
.col2 .column.right {}
@media(min-width:800px) {
.col2 {display: flex;flex-wrap: wrap;padding: 50px 12%;}
.col2 img {margin-bottom: 20px;}
.col2 .column.left {width: 48%;margin-right: 2%;margin-bottom: 0;}
.col2 .column.right {width: 48%;margin-left: 2%;}}
@media(min-width:1500px) {
.col2 {width: 1200px;display: flex;flex-wrap: wrap;padding: 50px 0;margin: auto;}
.col2 img {margin-bottom: 20px;}
.col2 .column.left {width: 48%;margin-right: 2%;margin-bottom: 0;}
.col2 .column.right {width: 48%;margin-left: 2%;}}

.col3 {padding: 15px;}
.col3 img {margin-bottom: 20px;}
.col3 .column.left {width: 100%;margin-bottom: 50px;}
.col3 .column.mid {width: 100%;margin-bottom: 50px;}
.col3 .column.right {width: 100%;}
@media(min-width:800px) {
.col3 {display: flex;flex-wrap: wrap;padding: 50px 12%;}
.col3 img {margin-bottom: 20px;}
.col3 .column.left {width: 32%;margin-right: 2%;margin-bottom: 0;}
.col3 .column.mid {width: 32%;margin-right: 2%;margin-bottom: 0;}
.col3 .column.right {width: 32%;}}
@media(min-width:1500px) {
.col3 {width: 1200px;display: flex;flex-wrap: wrap;padding: 50px 0;margin: auto;}
.col3 img {margin-bottom: 20px;}
.col3 .column.left {width: 32%;margin-right: 2%;margin-bottom: 0;}
.col3 .column.mid {width: 32%;margin-right: 2%;margin-bottom: 0;}
.col3 .column.right {width: 32%;}}

.col5 {width: 1200px;display: flex;flex-wrap: wrap;padding: 50px 0;margin: auto;}
.col5 img {margin-bottom: 20px;}
.col5 .column {width: 17%;margin-right: 3%;}
.col5 .column.last {width: 17%;margin-right: 0;}
@media(max-width:1500px) {
.col5 {width: 100%;display: flex;flex-wrap: wrap;padding: 50px 12%;}
.col5 img {margin-bottom: 20px;}
.col5 .column {width: 17%;margin-right: 3%;}
.col5 .column.last {width: 17%;margin-right: 0;}}
@media(max-width:800px) {
.col5 {width: 100%;padding: 15px;}
.col5 .column {width: 45%;margin-right: 5%;margin-bottom: 15px;}
.col5 .column.last {width: 45%;margin: 0;margin-bottom: 0;}}

.mt0 {margin-top: 0 !important; padding-top: 0 !important;}
.mb0 {margin-bottom: 0 !important; padding-bottom: 0; !important}