@charset "UTF-8";

body {
font-family: Helvetica, Arial, '游ゴシック', 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, sans-serif;
margin: 0px;
background-color: #000000;
background-repeat: repeat-x;
background-position: top center;
}

.wf-sawarabimincho {
font-family: "Sawarabi Mincho";
}

/*区切りのロゴマーク*/
.logomark {
text-align: center;
background: #333333;
padding: 10px 0px;
}

.logomark img {
width: 450px;
height: auto;
vertical-align: bottom;
}

/*innerボックスの左右の設定
.nagare-inner .footer-inner {
padding-left: 20px;
padding-right: 20px;
}*/

/*##############################
header-navi
##############################*/
.inner {
width: 100%;
margin: 0 auto;
}

.inner:after {
content: "";
clear: both;
display: block;
}

/* header */
#top-head {
top: -100px;
position: absolute;
width: 100%;
margin: 100px auto 0;
padding: 0;
line-height: 1;
z-index: 999;
}

#top-head a, #top-head {
color: #ffffff;
text-decoration: none;
}

#top-head {
height: 80px;
background: rgba(0,0,0,0.8);
}

#top-head .inner {
position: relative;
}

#top-head .logo img {
float: left;
width: 200px;
height: auto;
margin-left: 15px;
margin-top: 12px;
}

#global-nav ul {
list-style: none;
position: absolute;
right: 20px;
bottom: 20px;
font-size: 14px;
}

#global-nav ul li {
float: left;
position: relative; /* Btn Hoverアンダーバー独立 */
}

#global-nav ul li a {
padding: 10px 20px;
}


/* Btn Hover */
#global-nav ul li:after {
position: absolute;
content: "";
display: block;
width: 100%;
height: 4px;
bottom: -10px;
transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
}
#global-nav ul li:hover:after {
background: #ffffff;
bottom: -30px;
}

#global-nav ul li:last-child:after {
height: 0px; /* お問い合わせのみアンダーバー無効 */
}

.btn-style a {
background: #cc9933;
border-radius: 20px;
color: #ffffff;
font-size: 16px;
margin-left: 20px;
}

.btn-style a i {
font-size: 18px;
margin-right: 5px;
}

.btn-style a:hover {
opacity: 0.7;
}


/* Fixed */
#top-head.fixed {
margin-top: 0;
top: 0;
position: fixed;
height: 80px;
background: rgba(255,255,255,0.9);
transition: top 0.65s ease-in;
-webkit-transition: top 0.65s ease-in;
-moz-transition: top 0.65s ease-in;
}

#top-head.fixed .logo {
color: #000000;
}

#top-head.fixed #global-nav ul li a {
color: #000000;
padding: 10px 20px;
}

#top-head.fixed #global-nav ul .btn-style a {
background: #cc9933;
color: #ffffff;
font-size: 16px;
margin-left: 20px;
}

/* Fixed Btn Hover */
#top-head.fixed #global-nav ul li:hover:after {
background: #cc9933;
bottom: -33px;
}

/* Toggle Button */
#nav-toggle {
display: none;
position: absolute;
right: 12px;
top: 14px;
width: 34px;
height: 36px;
cursor: pointer;
z-index: 101;
}

#nav-toggle div {
position: relative;
}

#nav-toggle span {
display: block;
position: absolute;
height: 4px;
width: 100%;
background: #000000;
left: 0;
-webkit-transition: .35s ease-in-out;
-moz-transition: .35s ease-in-out;
transition: .35s ease-in-out;
}

#nav-toggle span:nth-child(1) {
top: 0;
}
#nav-toggle span:nth-child(2) {
top: 11px;
}
#nav-toggle span:nth-child(3) {
top: 22px;
}

/* Toggle Button左のcontact（モバイル表示）*/
.btn-style0 {
float: right;
width: 220px; /*←右端からの位置*/
height: auto;
margin-top: 18px;
}

.btn-style0 a {
background: #cc9933;
border-radius: 20px;
color: #ffffff;
font-size: 16px;
padding: 7px 10px;
margin-left: 20px;
}

.btn-style0 a i {
font-size: 18px;
margin-right: 5px;
}

.btn-style0 a:hover {
opacity: 0.7;
}

/*##############################
main-visualのダミーグラデ

#main-visual {
background: #1d76a6;
background: -webkit-linear-gradient(-45deg, #0062B8, #850047);
background:    -moz-linear-gradient(-45deg, #0062B8, #850047);
background:     -ms-linear-gradient(-45deg, #0062B8, #850047);
background:      -o-linear-gradient(-45deg, #0062B8, #850047);
background:         linear-gradient(-45deg, #0062B8, #850047);
height: 2000px;
}

##############################*/

/*##############################
main-visual
##############################*/

#main-visual {
text-align: center;
}

#main-visual {
background-image: url("../img/main-visual.jpg?date=20171128");
background-repeat: no-repeat;
background-position: top center;
background-size: cover;
padding: 330px 20px 200px 20px;
}

section img {
max-width: 100%;
height: auto;
margin: 30px 0px;
vertical-align: bottom;
border: solid 1px rgba(255, 255, 255, 0.5);
box-sizing: border-box;
box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.2);
}

/*##############################
Supervision
##############################*/
#supervision { background: #efdfcc; text-align: center; }

#supervision .supervision-inner { padding: 40px 0px; }

#supervision .supervision-inner .kanshu { font-size: 28px; }

#supervision .supervision-inner .kanshu-name { font-size: 32px; }

#supervision .supervision-inner .daihyou { font-size: 25px; margin-bottom: 20px; }

.kanshu { position: relative; display: inline-block; margin-bottom: 1em; }

.kanshu:before { content: ''; position: absolute; bottom: -15px; display: inline-block; width: 60px; height: 5px; left: 50%; -moz-transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); background-color: #ad956f; border-radius: 2px; }

/* WEBSITE LINK */
.website { text-align: center; }

/* hover btn BASE */
.website-btn a { display: inline-block; width: 280px; height: 54px; font-size: 20px; text-align: center; text-decoration: none; line-height: 54px; outline: none; }

.website-btn a::before, .website-btn a::after { position: absolute; z-index: -1; display: block; content: ''; }

.website-btn a, .website-btn a::before, .website-btn a::after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all .3s; -o-transition: all .3s; transition: all .3s; }

.website-btn a i { margin-right: 5px; }

/* hover btn ADD */
.website-btn a { position: relative; z-index: 2; background-color: #efdfcc; border: 2px solid #000000; color: #000000; line-height: 50px; overflow: hidden; }

.website-btn a:hover { color: #ffffff; }

.website-btn a::after { top: 0; left: 0; width: 100%; height: 100%; -webkit-transform: scale(0.5); -ms-transform: scale(0.5); transform: scale(0.5); }

.website-btn a:hover::after { background: #000000; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); }


/*##############################
prologue
##############################*/

.prologue {
background-color: #fdf1e3;
padding-bottom: 50px;
}

.discription_r:after {
content: "";
display: block;
clear: both;
}

.prologue h1 {
font-size: 32px;
margin: 50px 30px 20px 20px;
}

.prologue h1 .gold {
font-size: 40px;
color: #cc9933;
}

.prologue h2 {
font-size: 25px;
margin: 40px 20px 20px 20px;
}

.prologue p {
line-height: 180%;
margin: 0 20px;
}

/*##############################
point10
##############################*/
.point10-title {
text-align: center;
background: #000000;
color: #ffffff;
padding: 10px 20px;
}

.point10 {
display: flex;
flex-wrap: wrap;
}

.point10 {
background: #f0f0f0;
padding: 80px 20px;
}

.figure {
width: calc(20% - 20px); /* ←これ - 20pxの調整 */
margin: 10px;
background-color: #ffffff;
border: solid 0px #cc9933;
box-shadow: 0 0 12px #cccccc;
box-sizing: border-box; /* ←これないと変にカラム落ち */
}

.figure img {
width: 100%;
height: auto;
border: none;
}

.figure h1 {
font-size: 20px;
font-weight: bold;
color: #999999;
text-align: center;
margin: 10px;
}

figcaption {
font-size: 16px;
line-height: 180%;
color: #000000;
margin: 0px 10px 10px 10px;
}

/*##############################
nagare
##############################*/
.nagare-title {
text-align: center;
background: #000000;
color: #ffffff;
padding: 10px 20px;
}

.nagare {
background: #fbf8f5;
padding: 80px 20px;
}

.midashi:after, .midashi2:after {
content: "";
display: block;
clear: both;
}

.midashi img, .midashi2 img {
float: left;
margin-right: 10px;
width: 43px;
height: auto;
}

.midashi {
background: #cc9966;
padding: 10px 20px;
margin-bottom: 20px;
}

.midashi h2, .midashi2 h2 {
font-size: 28px;
color: #ffffff;
}

.waku {
background: #f0f0f0;
border: solid 1px #cccccc;
padding: 10px 20px;
margin-bottom: 20px;
}

.waku2 {
background: #f5e1e1;
border: solid 1px #cccccc;
padding: 10px 20px;
margin-bottom: 20px;
}

.waku p, .waku2 p {
font-size: 20px;
line-height: 200%;
}

.waku p i {
margin-right: 3px;
}

.waku p span {
font-size: 14px;
}

.arrow {
text-align: center;
margin-bottom: 20px;
}

.midashi2 {
background: #dfb994;
padding: 10px 20px;
margin-bottom: 20px;
}

/*##############################
touroku
##############################*/
.touroku-title {
text-align: center;
background: #000000;
color: #ffffff;
padding: 10px 20px;
}

.touroku {
background: #ffffff;
padding: 80px 20px;
}

.midashi3:after {
content: "";
display: block;
clear: both;
}

.midashi3 img {
float: left;
margin-right: 10px;
width: 43px;
height: auto;
}

.midashi3 {
background: #dddddd;
padding: 10px 20px;
margin-bottom: 20px;
}

.midashi3 h2 {
font-size: 28px;
color: #000000;
}

/*tool flexbox*/
.contact-3 {
display: flex;
flex-wrap: wrap;
margin-bottom: 20px;
}

.tool-1, .tool-2, .tool-3 {
width: calc(33.3333% - 20px); /* ←これ - 20pxの調整 */
margin: 10px;
border: solid 0px #cc9933;
box-shadow: 0 0 5px #cccccc;
box-sizing: border-box; /* ←これないと変にカラム落ち */
}

.tool-1 img, .tool-2 img, .tool-3 img {
width: 100%;
height: auto;
vertical-align: bottom;
border: none;
}

.tool-1 a:hover, .tool-2 a:hover, .tool-3 a:hover {
opacity: 0.8;
}

.waku-no {
border: solid 0px #cccccc;
padding: 0px 0px;
margin-bottom: 20px;
}

.waku-no p {
font-size: 20px;
line-height: 200%;
}


/*##############################
faq
##############################*/
.faq-title {
text-align: center;
background: #000000;
color: #ffffff;
padding: 10px 20px;
}

.faq {
background: #f0f0f0;
padding: 80px 20px;
}

.question {
margin-bottom: 20px;
}

.question h2 {
font-size: 28px;
line-height: 150%;
border-bottom: solid 1px #cccccc;
padding-bottom: 5px;
padding-left: 3.2em;
text-indent: -3.2em;
}

.question h2 .gold {
font-size: 40px;
color: #cc9933;
}

.answer {
margin-bottom: 80px;
}

.answer p {
font-size: 20px;
margin-bottom: 7px;
line-height: 150%;
padding-left: 2.8em;
text-indent: -2.8em;
}

.answer p .red {
font-size: 28px;
color: #cc6666;
}

ol {
padding-left: 100px;
}

.answer li {
font-size: 20px;
margin-bottom: 7px;
}

/*##############################
contact
##############################*/
.contact-title {
text-align: center;
background: #cc9933;
color: #ffffff;
padding: 10px 20px;
}

.contact {
background: #fbf8f5;
padding: 80px 20px;
}

/* お問い合わせメールフォームのテーブル */
table.mailform {
width: 100%;
margin: 0 auto;
border-collapse: separate;
border-spacing: 0px 15px;
}

table.mailform th,
table.mailform td {
padding: 10px;
}

table.mailform th {
width: 35%;
background: #cc9966;
vertical-align: middle;
text-align: left;
color: #000000;
font-size: 20px;
}

table.mailform td {
width: 70%;
background: #ffffff;
}

.msg {
border: 0;
padding: 7px;
font-size: 18px;
color: #333333;
border: solid 1px #cccccc;
width: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

.msg2 {
border:0;
padding:7px;
font-size:18px;
color:#000000;
border:solid 1px #cccccc;
width: 30%;
margin-right: 2%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

/* 必須項目文字 */
.hissu {
background-color: #000000;
padding: 3px 7px;
margin: 0px 10px;
color: #ffffff;
font-size: 14px;
font-weight: bold;
text-decoration: none;
border-radius: 5px;
}

/* フォーム内フォント指定 */
select, input, textarea {
font-family: '游ゴシック', 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo;
}

/* 送信ボタン */
input#submit_button {
width: 100%;
cursor: pointer;
background: linear-gradient(#f7f7f7, #dddddd);
color: #666666;
font-size: 25px;
font-weight: bold;
padding: 5px 0px;
border-radius: 5px;
border: 1px solid #aaaaaa;
text-decoration: none;
text-align: center;
margin-bottom: 20px;
display: block;
}

input#submit_button:hover {
opacity: 0.7;
}

/* 点滅 */
.blinking {
  -webkit-animation: blink 1.0s ease-in-out infinite alternate;
  -moz-animation: blink 1.0s ease-in-out infinite alternate;
  animation: blink 1.0s ease-in-out infinite alternate; }

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

@-moz-keyframes blink {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes blink {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

.blinking .red {
  color: #cc0000;
}

.again {
margin: 20px auto;
padding: 5px 15px;
color: #ffffff;
font-weight: bold;
background-color: #cc0000;
font-size: 20px;
line-height: 150%;
}

/*##############################
footer
##############################*/
/* logomark_bottom */
.logomark_bottom {
background-color: #333333;
text-align: center;
padding: 10px 0px;
}

.logomark_bottom img {
width: 600px;
height: auto;
vertical-align: bottom;
}

/* copyright */
.footer {
background-color: #cc9933;
border-bottom: solid 15px #000000;

padding-top: 5px;
padding-bottom: 5px;
}

.footer-inner p {
margin: 0;
color: #000000;
font-size: 14px;
text-align: center;
}

/* フローティング・コンタクトメニュー */
#FloatingMenu, #FloatingMenu2 {
width: 100%;
height: auto;
background-color: #000000;
position: fixed;
left: 0px;
bottom: 0px;
z-index: 9999;
text-align: center;
}

#FloatingMenu ul, #FloatingMenu2 ul {
list-style: none;
}

#FloatingMenu ul:after, #FloatingMenu2 ul:after {
content: "";
display: block;
clear: both;
}

#FloatingMenu li, #FloatingMenu2 li {
float: left;
width: 33.3333%;
border-bottom: 0px;
}

#FloatingMenu li a, #FloatingMenu2 li a {
padding: 0px; /* ボタン画像上右下左 */
}

#FloatingMenu li a:hover, #FloatingMenu2 li a:hover {
background-color: transparent;
}

#FloatingMenu img, #FloatingMenu2 img {
width: 100%;
height: auto;
border: none;
display: block;
}

/*##############################
pagetop-btn
##############################*/
.page-top {
text-align: center;
}

.page-top a {
position: fixed;
bottom: 15px;
right: 15px;
padding: 10px;
font-size: 14px;
color: #ffffff;
text-decoration: none;
background: #cc9933;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
/*-ms-filter: "alpha(opacity=80)";
-moz-opacity: 0.8;
-khtml-opacity: 0.8;
opacity: 0.8; */
z-index: 9995;
}

.page-top i {
font-size: 50px;
margin-bottom: 5px;
}

.page-top a:hover {
opacity: 0.8;
}