@charset "UTF-8";

/* ##############################
499PX以下
(スマホ/タブレット)
############################## */
@media screen and (max-width: 499px) {

/*区切りのロゴマーク*/
.logomark img {
width: 250px;
}

#top-head, .inner {
width: 100%;
padding: 0;
}

#top-head {
height: 0px; /* 通常の黒帯.7を無効化 */
top: 0;
position: fixed;
margin-top: 0;
}

/* Fixed reset */
#top-head.fixed {
padding-top: 0;
background: transparent;
}

#mobile-head {
background: #ffffff;
width: 100%;
height: 56px;
z-index: 999;
position: relative;
}

#top-head .logo img {
float: left;
width: 150px;
height: auto;
margin-left: 10px;
margin-top: 7px;
}

#top-head.fixed .logo, #top-head .logo {
position: absolute;
color: #333333;
}

#global-nav {
position: absolute;
/* 開いてないときは画面外に配置 */
top: -500px;
background: rgba(0,0,0,0.7);
width: 100%;
text-align: center;
padding: 0;
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
transition: .5s ease-in-out;
}

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

#global-nav ul li {
float: none;
position: static;
}

#global-nav ul li:after  {
display: none; /* ←これでホバーのアニメーション消去 */
}

#top-head #global-nav ul li a,
#top-head.fixed #global-nav ul li a {
width: 100%;
display: block;
color: #ffffff;
padding: 20px 0;
border-bottom: solid 1px #666666;
}

#top-head #global-nav ul li a:hover,
#top-head.fixed #global-nav ul li a:hover {
width: 100%;
display: block;
color: #999999;
padding: 20px 0;
border-bottom: solid 1px #666666;
}

#top-head #global-nav ul .btn-style a,
#top-head.fixed #global-nav ul .btn-style a {
display: none; /* ←スライド内のお問合せ非表示 */
}

#nav-toggle {
display: block;
}

/* #nav-toggle 切り替えアニメーション */
.open #nav-toggle span:nth-child(1) {
top: 11px;
-webkit-transform: rotate(315deg);
-moz-transform: rotate(315deg);
transform: rotate(315deg);
}

.open #nav-toggle span:nth-child(2) {
width: 0;
left: 50%;
}

.open #nav-toggle span:nth-child(3) {
top: 11px;
-webkit-transform: rotate(-315deg);
-moz-transform: rotate(-315deg);
transform: rotate(-315deg);
}

/* #global-nav スライドアニメーション */
.open #global-nav {
/* #global-nav top + #mobile-head height */
-moz-transform: translateY(556px);
-webkit-transform: translateY(556px);
transform: translateY(556px);
}

/* #main-visual */
#main-visual {
background-image: url("../img/main-visual-s.jpg?date=20171128")
}

#main-visual {
padding: 250px 15px 150px 15px;
}

.discription_r .lady2 {
float: left;
width: 100%;
vertical-align: bottom;
margin-bottom: 30px;
}
.discription_r .lady1 {
display: none;
}

/* Supervision */
#supervision .supervision-inner { padding: 20px 0px; }
#supervision .supervision-inner .kanshu { font-size: 18px; }
#supervision .supervision-inner .kanshu-name { font-size: 20px; }
#supervision .supervision-inner .daihyou { font-size: 19px; margin-bottom: 15px; }

/*submit*/
.waku-submit p {
font-size: 16px;
line-height: 180%;
}

/* point10 */
.point10 {
padding: 30px 10px;
}

.figure {
width: calc(50% - 10px); /* ←これ - 20pxの調整 */
margin: 5px;
}

figcaption {
font-size: 14px;
margin: 0px 7px 7px 7px;
}

/* nagare */
.nagare {
padding: 30px 20px;
}

.midashi img, .midashi2 img {
margin-right: 5px;
width: 30px;
height: auto;
}

.midashi, .midashi2 {
padding: 10px 10px;
}

.midashi h2, .midashi2 h2 {
font-size: 20px;
}

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

.arrow img {
width: 100px;
height: auto;
}

/* touroku */
.touroku {
padding: 30px 20px;
}

.midashi3 img {
margin-right: 5px;
width: 30px;
height: auto;
}

.midashi3 {
padding: 10px 10px;
}

.midashi3 h2 {
font-size: 20px;
}

.tool-1, .tool-2, .tool-3 {
width: calc(33.3333% - 10px); /* ←これ - 20pxの調整 */
margin: 5px;
border: solid 0px #cc9933;
}

.waku-no p {
font-size: 16px;
line-height: 180%;
}

/* faq */
.faq {
padding: 30px 20px;
}

.question h2 {
font-size: 20px;
}

.question h2 .gold {
font-size: 32px;
}

.answer p {
font-size: 16px;
}

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

.answer {
margin-bottom: 40px;
}

ol {
padding-left: 80px;
}

.answer li {
font-size: 16px;
}

/* contact */
.contact {
padding: 30px 20px;
}

/* メールフォームのth-td設定 */
table.mailform th,
table.mailform td {
width: 100%;
display: block;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

table.mailform th {
font-size: 18px;
}

.msg, .msg2  {
font-size: 16px;
}

/*footer*/
.footer {
margin-bottom: 80px;
}

/* logomark_bottom */
.logomark_bottom img {
width: 350px;
height: auto;
}

.footer-inner p {
font-size: 12px;
}

/* pagetop-btn */
.page-top a {
font-size: 12px;
bottom: 95px;
right: 10px;
}

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

/* フローティング・コンタクトメニュー（タブレット用非表示）  */
#FloatingMenu2 {
display: none;
}

#FloatingMenu2 img {
display: none;
}

}

/* ##############################
500以上　900PX以下
(スマホ/タブレット)
############################## */
@media screen and (min-width: 500px) and (max-width: 900px) {

/*区切りのロゴマーク*/
.logomark img {
width: 250px;
}

#top-head, .inner {
width: 100%;
padding: 0;
}

#top-head {
height: 0px; /* 通常の黒帯.7を無効化 */
top: 0;
position: fixed;
margin-top: 0;
}

/* Fixed reset */
#top-head.fixed {
padding-top: 0;
background: transparent;
}

#mobile-head {
background: #ffffff;
width: 100%;
height: 56px;
z-index: 999;
position: relative;
}

#top-head .logo img {
float: left;
width: 150px;
height: auto;
margin-left: 10px;
margin-top: 7px;
}

#top-head.fixed .logo, #top-head .logo {
position: absolute;
color: #333333;
}

#global-nav {
position: absolute;
/* 開いてないときは画面外に配置 */
top: -500px;
background: rgba(0,0,0,0.7);
width: 100%;
text-align: center;
padding: 0;
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
transition: .5s ease-in-out;
}

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

#global-nav ul li {
float: none;
position: static;
}

#global-nav ul li:after  {
display: none; /* ←これでホバーのアニメーション消去 */
}

#top-head #global-nav ul li a,
#top-head.fixed #global-nav ul li a {
width: 100%;
display: block;
color: #ffffff;
padding: 20px 0;
border-bottom: solid 1px #666666;
}

#top-head #global-nav ul li a:hover,
#top-head.fixed #global-nav ul li a:hover {
width: 100%;
display: block;
color: #999999;
padding: 20px 0;
border-bottom: solid 1px #666666;
}

#top-head #global-nav ul .btn-style a,
#top-head.fixed #global-nav ul .btn-style a {
display: none; /* ←スライド内のお問合せ非表示 */
}

#nav-toggle {
display: block;
}

/* #nav-toggle 切り替えアニメーション */
.open #nav-toggle span:nth-child(1) {
top: 11px;
-webkit-transform: rotate(315deg);
-moz-transform: rotate(315deg);
transform: rotate(315deg);
}

.open #nav-toggle span:nth-child(2) {
width: 0;
left: 50%;
}

.open #nav-toggle span:nth-child(3) {
top: 11px;
-webkit-transform: rotate(-315deg);
-moz-transform: rotate(-315deg);
transform: rotate(-315deg);
}

/* #global-nav スライドアニメーション */
.open #global-nav {
/* #global-nav top + #mobile-head height */
-moz-transform: translateY(556px);
-webkit-transform: translateY(556px);
transform: translateY(556px);
}

/* #main-visual */
#main-visual {
background-image: url("../img/main-visual-s.jpg?date=20171128")
}

#main-visual {
padding: 250px 15px 150px 15px;
}

.discription_r .lady2 {
float: left;
width: 100%;
vertical-align: bottom;
margin-bottom: 30px;
}
.discription_r .lady1 {
display: none;
}


/* Supervision */
#supervision .supervision-inner { padding: 30px 0px; }
#supervision .supervision-inner .kanshu { font-size: 24px; }
#supervision .supervision-inner .kanshu-name { font-size: 26px; }
#supervision .supervision-inner .daihyou { font-size: 22px; margin-bottom: 15px; }


/*submit*/
.waku-submit p {
font-size: 16px;
line-height: 180%;
}

/* point10 */
.point10 {
padding: 30px 10px;
}

.figure {
width: calc(50% - 10px); /* ←これ - 20pxの調整 */
margin: 5px;
}

figcaption {
font-size: 14px;
margin: 0px 7px 7px 7px;
}

/* nagare */
.nagare {
padding: 30px 20px;
}

.midashi img, .midashi2 img {
margin-right: 5px;
width: 30px;
height: auto;
}

.midashi, .midashi2 {
padding: 10px 10px;
}

.midashi h2, .midashi2 h2 {
font-size: 20px;
}

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

.arrow img {
width: 100px;
height: auto;
}

/* touroku */
.touroku {
padding: 30px 20px;
}

.midashi3 img {
margin-right: 5px;
width: 30px;
height: auto;
}

.midashi3 {
padding: 10px 10px;
}

.midashi3 h2 {
font-size: 20px;
}

.tool-1, .tool-2, .tool-3 {
width: calc(33.3333% - 10px); /* ←これ - 20pxの調整 */
margin: 5px;
border: solid 0px #cc9933;
}

.waku-no p {
font-size: 16px;
line-height: 180%;
}

/* faq */
.faq {
padding: 30px 20px;
}

.question h2 {
font-size: 20px;
}

.question h2 .gold {
font-size: 32px;
}

.answer p {
font-size: 16px;
}

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

.answer {
margin-bottom: 40px;
}

ol {
padding-left: 80px;
}

.answer li {
font-size: 16px;
}

/* contact */
.contact {
padding: 30px 20px;
}

/* メールフォームのth-td設定 */
table.mailform th,
table.mailform td {
width: 100%;
display: block;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

table.mailform th {
font-size: 18px;
}

.msg, .msg2  {
font-size: 16px;
}

/*footer*/
.footer {
margin-bottom: 100px;
}

/* logomark_bottom */
.logomark_bottom img {
width: 350px;
height: auto;
}

.footer-inner p {
font-size: 12px;
}

/* pagetop-btn */
.page-top a {
bottom: 125px;
right: 15px;
}

/* フローティング・コンタクトメニュー（スマホ用非表示）  */
#FloatingMenu {
display: none;
}

#FloatingMenu img {
display: none;
}

}

/* ##############################
901PX以上
############################## */
@media screen and (min-width: 901px) {

/* Toggle Button左のcontact（非表示）*/
.btn-style0 {
display: none;
}

.discription_r .lady1 {
float: left;
width: 55%;
vertical-align: bottom;
}
.discription_r .lady2 {
display: none;
}

/* フローティング・コンタクトメニュー（非表示）  */
#FloatingMenu, #FloatingMenu2 {
display: none;
}

#FloatingMenu img, #FloatingMenu2 img {
display: none;
}


}

/* ##############################
1140PX以上
############################## */
@media screen and (min-width: 1140px) {

.nagare-inner, .touroku-inner, .faq-inner, .contact-inner, .footer-inner, .main-inner {
width: 1100px;
margin-left: auto;
margin-right: auto;
}

.contactform-inner {
width: 800px;
margin-left: auto;
margin-right: auto;
}


}