﻿@charset "utf-8";
@import url('https://fonts.googleapis.com/earlyaccess/sawarabimincho.css');
@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);
/* CSS Document */

/* rest.css*/
article,aside,details,figcaption,figure,footer,header,hgroup,img,menu,nav,section{display:block}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}img{margin:0 auto;padding:0;max-width: 100%;}/* rest.css*/

/*----------------------------------------------------------------------------------------------
    button:hover
----------------------------------------------------------------------------------------------*/ 
 @-webkit-keyframes hvr-wobble-vertical{16.65%{-webkit-transform:translateY(8px);transform:translateY(8px)}33.3%{-webkit-transform:translateY(-6px);transform:translateY(-6px)}49.95%{-webkit-transform:translateY(4px);transform:translateY(4px)}66.6%{-webkit-transform:translateY(-2px);transform:translateY(-2px)}83.25%{-webkit-transform:translateY(1px);transform:translateY(1px)}100%{-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes hvr-wobble-vertical{16.65%{-webkit-transform:translateY(8px);transform:translateY(8px)}33.3%{-webkit-transform:translateY(-6px);transform:translateY(-6px)}49.95%{-webkit-transform:translateY(4px);transform:translateY(4px)}66.6%{-webkit-transform:translateY(-2px);transform:translateY(-2px)}83.25%{-webkit-transform:translateY(1px);transform:translateY(1px)}100%{-webkit-transform:translateY(0);transform:translateY(0)}}.hvr-wobble-vertical{display:inline-block;vertical-align:middle;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0);-webkit-backface-visibility:hidden;backface-visibility:hidden;-moz-osx-font-smoothing:grayscale}.hvr-wobble-vertical:active,.hvr-wobble-vertical:focus,.hvr-wobble-vertical:hover{-webkit-animation-name:hvr-wobble-vertical;animation-name:hvr-wobble-vertical;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-animation-iteration-count:1;animation-iteration-count:1}

/*----------------------------------------------------------------------------------------------
Basic Style 
----------------------------------------------------------------------------------------------*/ 
html{ font-size:62.5%;overflow: hidden;}
body{width:100%;font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;font-size:2.2rem;line-height:1.7;font-feature-settings : "palt";}
#body__wrap{width:100%; margin: 0 auto; background:#FFF;}
#scroll {position: absolute;top: 0;left: 0;right: 0;bottom: 0;overflow-y: scroll;-webkit-overflow-scrolling: touch}
.side_photo{float: right; padding: 0 0 0 20px;}
.side_photo2{float: left; padding: 0 20px 0 0;}
.youtube{ width:830px; height:450px; margin:10px auto;}
.youtube iframe{ width:830px; height:450px;}
.clearfix:after{ content: "."; display: block; height: 0; clear: both; visibility:hidden; }
h1 {font-weight: normal!important; font-family: "ゴシックMB101 H"; font-feature-settings: "palt" 1;}
ul.check4 { margin: 1.5em 0; }
ul.check4 li { background: url(../img/base/check4.png) 0 0.7em no-repeat; padding: 0.7em 0 0.7em 1.5em; font-size: 2.5rem; font-weight: bold; border-bottom: 1px dashed #aaa; line-height: 1.4; }
ul.check4 li p { font-size: 1.8rem; font-weight: normal; padding-top: 0.3em; }
.notice { color: #777; font-size: 70%; }
.br-pc { display:none; }
.img__margin { margin: 0 auto 1em;}
.pc_img{display: block;}
.sp_img{display: none;}

/*----------------------------------------------------------------------------------------------
.sub-head.letter
----------------------------------------------------------------------------------------------*/ 
.sub-head{ width:960px; margin:0 auto 25px; padding:50px 0 10px;}
.sub-head h1{font-size: 4.5rem; font-weight: bold!important; line-height: 1.3; color: #c71800;  font-family: Lato, "Noto Sans JP", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; text-align: center;}
.letter{width:960px;margin:0 auto; padding:0;}
/* 通常ヘッドライン */
#header__img{width:100%;margin:0 auto;	background:url(../img/base/bg_headline.png) center bottom repeat-x;}
#header__img img{ width:100%; }
#header__img .mv{width:1059px;margin:auto;}
a.linkStyle01 {position: relative;display: inline-block;padding: 0.2em 1.5em;border: 1px solid #CCC;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;color: #666;text-decoration: none;background-color: #eee;}
a.linkStyle01:hover, a.linkStyle01:focus {border: 1px solid #009943;color: #FFF;text-decoration: none;-moz-box-shadow: 0px 1px 8px #aaa;-webkit-box-shadow: 0px 1px 8px #aaa;box-shadow: 0px 1px 8px #aaa;background-color: #009943;}
a.linkStyle01:active {-moz-box-shadow: none;-webkit-box-shadow: none;box-shadow: none;}
.float_r,.text_r{float:right;}
.float_l{float:left;}
/*----------------------------------------------------------------------------------------------
    Styles for .font_style
----------------------------------------------------------------------------------------------*/ 
.u {text-decoration:underline;}
.b {font-weight:bold;}
.r,.red { color:#F00;}
.rub {font-weight: bold;background-image: url(../img/base/base_border.gif);background-position: bottom;background-repeat: repeat-x;}
.small{font-size: 80%;}
.p30{font-size:130%;}
.p50{font-size:150%;}

/*----------------------------------------------------------------------------------------------
    Styles for .countdown
----------------------------------------------------------------------------------------------*/ 
#countdown__background{width:100%;height:70px; margin:-1px auto 0; background:#000;}
.countdown__txt{width:90%;margin:0 auto;font-size:4rem;font-weight:bold;color:#f3ff6b;text-align:center;padding:7px 0 0;}
.countdown__txt p{ color:#FFF; display:inline; font-size:2.4rem;}
.countdown__wrap {width:100%;height:85px;margin:0 auto;padding:0;}
.cunt_pc {background: #000;}
.cunt_sp{display:none;}

/*----------------------------------------------------------------------------------------------
    Styles for #header
----------------------------------------------------------------------------------------------*/ 
header{width:100%;margin:0 auto; padding:0;background: url(../img/tm_opt_header_bg.png);background-size: 100%;}
.header__bottom {width: 0;height: 0;border-top: 30px solid #ba0000;border-right: 80px solid transparent;border-bottom: 30px solid transparent;border-left: 80px solid transparent;    margin: 0 auto;}

.main-visual_sp {display: none;}

/*----------------------------------------------------------------------------------------------
.section__area00
----------------------------------------------------------------------------------------------*/ 
.section__area00 { padding: 0 0 50px; }
.section__area00_gray{ width: 100%; margin: 0; padding: 0 0 50px; background: #eeeeee;}
.section__area00_gold{ width: 100%; padding: 0 0 50px; background: url(../img/bg_gold.jpg);}

/*----------------------------------------------------------------------------------------------
    Styles for .profile
----------------------------------------------------------------------------------------------*/ 
#profile{width:100%;margin:0 auto; background: url( ../img/img03_bg.jpg);background-size: cover;/*background-attachment: fixed;background-repeat: no-repeat;background-position: center center;*/}
.profile__box{width: 960px;margin: 0 auto;background: url(../img/img01.png)no-repeat center bottom;height: 545px;}

/* present ----------------------------------------------- */
.present__box { width:960px; margin:2em auto ; background:#FFF;border-radius: 15px;box-shadow: 4px 2px 16px rgba(0, 0, 0, 0.3); padding: 2rem 0 3rem; }
.present__box .section__area00_img img { max-width: 100%; padding: 0 2em; box-sizing: border-box; }
.present__box p { padding: 1em 2em; }
.ribbon_box{display:block;position:relative;width:300px;padding:10px 0;}
.ribbon10{display:inline-block;position:relative;box-sizing:border-box;width:calc(100% + 20px);color:#FFF;background:#6e3600;margin:0 0 0 -20px;padding:5px 0;}
.ribbon10 h3{vertical-align:middle;border-top:dashed 1px #fff4b4;border-bottom:dashed 1px #fff4b4;font-size:3rem;line-height:46px;margin:0;padding:0 30px;font-family: Lato, "Noto Sans JP", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; font-weight: bold;}
.ribbon10:after{position:absolute;content:'';z-index:1;top:0;right:0;width:0;height:0;border-color:transparent #fff transparent transparent;border-style:solid;border-width:30px 15px 30px 0;}
.ribbon10:before{position:absolute;content:'';top:100%;left:0;border:none;border-bottom:solid 15px transparent;border-right:solid 20px #311800;}

/* before after ----------------------------------------------- */
.ba__box {width: 960px; margin:2em auto; background: #e0f1ff; border-radius: 15px; padding: 2em; box-sizing: border-box; }

/* kiyaku ------------------------------------------------ */
.kiyaku__box { box-sizing: border-box; background: #fffddd; width: 960px; margin: 0 auto 2em; padding: 1em; font-size: 90%; border: 1px solid #ffc332; }
.kiyaku__box h3 { padding: 0.5em 0 1em; }

/* service ----------------------------------------------- */
.service__list { width: 860px; margin: 0 auto; font-size: 80%; line-height: 1.2; background: #fff; }
.service__list th, .service__list td { vertical-align: middle; padding: 1em; border: 1px solid #ccc; }
.service__list th { background: #ddd; }
.service__list_A, .service__list_C { width: 25%; }
.service__list .txt__center { text-align: center; }

/*----------------------------------------------------------------------------------------------
    Styles for .voice
----------------------------------------------------------------------------------------------*/ 
#voice{width:100%;margin:0px auto;}
#voice__wrap{ width:960px; margin:0 auto ; background:#FFF;border-radius: 15px;box-shadow: 4px 2px 16px rgba(0, 0, 0, 0.3); }
.voice__wrap_box{width:100%;margin:0 auto 20px;}
.voice__wrap_box_photo{ width:20%;padding: 30px 0px 30px 25px;float: left;}
.voice__wrap_box_txt{ width:73%; float: right;padding: 40px 40px 0 0px;}
.voice__wrap_box_txt h2{ font-size: 3rem; font-weight: bold; line-height: 1.3;}
.voice__wrap_box_txt h3{ font-size: 1.8rem; padding: 10px 0; }
.voice__wrap_box_txt h4{ font-size: 1.4rem; text-align: right; color: #A3A3A3; padding: 15px 0 0;}
.voice__wrap_box_txt02{ width:67%; float: right;padding: 40px 52px 0 0px;}
.voice__wrap_box_txt02 h2{ font-size: 3.3rem; font-weight: bold; line-height: 1.3; color: #FF4F00}
.voice__wrap_box_txt02 h3{ font-size: 1.8rem; padding: 10px 0; }
.voice__wrap_box_txt02 h4{ font-size: 1.4rem; text-align: right; color: #A3A3A3; padding: 15px 0 0;}
.voice__wrap_box hr{ width:90%; margin:15px auto 20px; border-top: 1px dashed #8c8b8b;border-bottom: 1px dashed #fff; clear:both; clear:both;}

/*----------------------------------------------------------------------------------------------
#voice_ver2
----------------------------------------------------------------------------------------------*/ 
#voice_ver2{width:100%;margin:50px auto 0; padding: 0 0 30px; background: #eeeeee;}
#voice_ver2__wrap{ width:960px; margin:0 auto ; background:#FFF;border-radius: 15px;box-shadow: 4px 2px 16px rgba(0, 0, 0, 0.3); }
.voice_ver2__wrap_box_pt01{width:100%;margin:0 auto 30px;background: url(../img/hirota_contents_b_08.png) no-repeat left bottom;}
.voice_ver2__wrap_box_pt02{width:100%;margin:0 auto 30px;background: url(../img/hirota_contents_b_09.png) no-repeat left bottom;}
.voice_ver2__wrap_box_pt03{width:100%;margin:0 auto 30px;background: url(../img/hirota_contents_b_10.png) no-repeat left bottom;}
.voice_ver2__wrap_box_pt04{width:100%;margin:0 auto 30px;background: url(../img/hirota_contents_b_11.png) no-repeat left bottom;}
.voice_ver2__wrap_box_pt05{width:100%;margin:0 auto 30px;background: url(../img/hirota_contents_b_12.png) no-repeat left bottom;}
.voice_ver2__wrap_box_txt{ width:50%; float: right;padding: 40px 40px 0 0px;}
.voice_ver2__wrap_box_txt h2{ font-size: 3.3rem; font-weight: bold; line-height: 1.3;}
.voice_ver2__wrap_box_txt h3{ font-size: 1.8rem; padding: 10px 0; }
.voice_ver2__wrap_box_txt h4{ font-size: 1.4rem; text-align: right; color: #A3A3A3; padding: 15px 0 40px;}
.voice_ver2__wrap_box_txt h5{ font-size: 2.3rem; margin: 0 0 10px; font-weight: bold; color: #c38a05; padding: 0 0 0 15px; border-left: 5px solid #c38a05; line-height: 1.3;}
.voice_ver2__wrap_box_txt img {margin:0;}
.voice_ver2__wrap_box_txt_list{width: 100%; margin: 20px auto 25px;}
.voice_ver2__wrap_box_txt_list li{padding: 0 10px 0 0;display: inline-block;}
.voice_ver2__wrap_box_txt_list li p{ font-size: 1.3rem; text-align: left; padding: 5px 0 0; line-height: 1.3;}

.voice2__wrap { width:960px; margin:2em auto ; padding: 2em; background:#FFF;border-radius: 15px;box-shadow: 4px 2px 16px rgba(0, 0, 0, 0.3);border: 4px double #d4b688;box-sizing: border-box;}
.voice3__wrap {width: 960px;margin: 2em auto;padding: 2em;background: #FFF;/* border-radius: 15px; */box-shadow: 5px 5px 1px rgba(165, 165, 165, 0.3);border: 1px solid #c1c1c1;box-sizing: border-box;}
.voice2__img{float:left;width: 20%;}
.voice2__img img{max-width: 100%;}
.voice2__text{ background: #381f05;padding: .3em .5em;box-sizing: border-box;opacity: 0.9;position: relative;top: -1px;}
.voice2__text p{color:#fff;font-size: 1.5rem;text-align: center;}
.voice2__box {margin: 0;width: 76%;float: right;}
.voice2__box p {font-size: 3.5rem;color: #643016;font-weight: bold;/* font-family: Georgia,游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif; */ line-height: 1.3;}
.voice2__box h1{text-align: right;font-size: 1em;color:#8d8d8d;margin: 0;}
.voice2__box h2 {font-size: 1.2em;margin: 1em 0 .5em;color: #746b66;font-family: Georgia,游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif;font-weight: bold;line-height: 1.4;}
text{background: #181818;padding: .3em .5em;box-sizing: border-box;opacity: 0.9;position: relative;top: -1px;}
.voice3__text p{color:#fff;font-size: 1.5rem;text-align: center;}
.voice2__wrap hr{border-top: 1px dashed #d4b688;}

/*----------------------------------------------------------------------------------------------
#top_form
----------------------------------------------------------------------------------------------*/ 
#top_form{ display: none; width: 100%; margin: 0 auto;top: 0px;left: 0px;  z-index:1000; position: fixed;background: -moz-radial-gradient(#ec0000, #ac0000);background: -webkit-radial-gradient(#ec0000, #ac0000);background: radial-gradient(#ec0000, #ac0000);}
#top_form_wrap{ width:960px; margin: 5px auto;}
#top_form_wrap_left{ width: 64%; margin:4px auto 5px; float: left;}
#top_form_wrap_left_txt input{ width:100%; box-sizing:border-box; margin:5px 0 10px; padding: 13px 10px 13px 70px; border:4px solid #FFF;font-size:1.6rem;border-radius: 4px;background: url(../img/base/hissu.png) 0.5em 0.4em no-repeat #fff;}
#top_form_wrap_left_txt input:hover{border:4px solid #F00; background-color:#FFC;}
#top_form_wrap_right{ width: 34.5%; float: right; margin:9px auto 0; padding: 0;}
#top_form_wrap_right input{ width:100%;}
#top_form_wrap_right input:hover{ opacity: 0.8;}

/*----------------------------------------------------------------------------------------------
#header_form
----------------------------------------------------------------------------------------------*/ 
#header_form {width: 100%;margin: 0 auto 0;background: -moz-radial-gradient(#ec0000, #ac0000);background: -webkit-radial-gradient(#ec0000, #ac0000);background: radial-gradient(#ec0000, #ac0000);}
#header_form_wrap{ width:960px; margin: 0 auto;}
#header_form_wrap_left{ width: 66%; margin:18px auto; float: left;}
#header_form_wrap_left p{ font-weight:bold; margin:0 0 0 5px; font-size:1.6rem; color: #FFF; }
#header_form_wrap_left p img{ display:inline; margin:0 6px -5px 0;}
#header_form_wrap_left_txt input{ width:100%; box-sizing:border-box; margin:13px 0 10px; padding:16px 10px 16px 70px; border:4px solid #FFF;font-size:1.6rem;border-radius: 4px;background: url(../img/base/hissu.png) 0.5em 0.5em no-repeat #fff;}
#header_form_wrap_left_txt input:hover{border:4px solid #F00; background-color:#FFC;}
#header_form_wrap_right{ width: 32%; float: right; margin:25px auto; padding: 0;}
#header_form_wrap_right input{ width:100%;}
#header_form_wrap_right input:hover{ opacity: 0.8;}
#header_form_wrap_right p{font-size: 80%;}

/*----------------------------------------------------------------------------------------------
    Styles for #mailform__second
----------------------------------------------------------------------------------------------*/
.mailform__second{ width:100%; margin:0 auto; padding: 0 0 10px; background: -moz-radial-gradient(#ec0000, #ac0000);background: -webkit-radial-gradient(#ec0000, #ac0000);background: radial-gradient(#ec0000, #ac0000);}
.mailform__second_img{padding:16px 0 0; text-align: center;}
.mailform__bottom{ width: 142px; height: 23px; margin: 0 auto; background:url(../img/hirota_opt_header_b_04.png) center top;}
.mailform__bottom02{ width: 142px; height: 23px; margin: 0 auto; background:url(../img/hirota_opt_header_b_05.png) center top;}
.mailform__second_wrap{ width:960px; margin:0 auto 20px;}
.mailform__second_wrap_left{ width: 66%; margin:27px auto 5px; float: left;}
.mailform__second_wrap_left p{ font-weight:bold; margin:0 0 0 5px; font-size:2.2rem; }
.mailform__second_wrap_left p img{ display:inline; margin:0 6px -5px 0;}
.mailform__second_wrap_left_txt input{width:100%; box-sizing:border-box; margin:5px 0 10px; padding:13px 10px 13px 70px; border:4px solid #FFF;font-size:1.6rem;border-radius: 4px;background: url(../img/base/hissu.png) 0.5em 0.4em no-repeat #fff;}
.mailform__second_wrap_left_txt input:hover{border:4px solid #F00; background-color:#FFC;}
.mailform__second_wrap_right{ width: 32%; float: right; margin:20px auto 0; padding: 0;}
.mailform__second_wrap_right input{ width:100%;}
.mailform__second_wrap_right input:hover{ opacity: 0.8;}
.mailform__second_wrap_right {font-size: 80%;}

/*----------------------------------------------------------------------------------------------
フォーム注釈
----------------------------------------------------------------------------------------------*/
.form__must{width:10%; box-sizing:border-box; background:#fff; font-weight:bold; float:left; margin:5px 0 10px; padding:13px 0 0 10px; border:4px solid #333; border-right:none; height:70px;}
.form__must p{background:#f00; color:#fff; padding:5px;text-align: center; font-size:1.5rem!important;}

/*----------------------------------------------------------------------------------------------
    Styles for#close__img
----------------------------------------------------------------------------------------------*/ 
.close__img{ width:100%; position: relative;}
.close__img_text{ width:100%; height:100%; position:absolute; background-color: rgba(0, 0, 0, 0.8); z-index:999;}
.close__img_text h1 { width:90%; margin:90px auto 0; font-size:5rem; line-height:1.3; color:#FFF; text-align:center; font-weight:bold; text-shadow: 5px 5px 3px #333,-5px 5px 3px #333,5px -5px 3px #333,-5px -5px 3px #333;}

/*----------------------------------------------------------------------------------------------
    Styles for #footer__attention
----------------------------------------------------------------------------------------------*/ 
#footer__attention{ width:100%;margin: 1em auto 0; }
#footer__attention p{ width:960px; margin: 0 auto; padding: 20px 0 ; font-size:1.4rem; color: #353535;}

/*----------------------------------------------------------------------------------------------
    Styles for footer
----------------------------------------------------------------------------------------------*/ 
footer {width:100%; height:auto;margin:0 auto 0; background-color: #ecf0ee;}
#footer__inner {width: 900px;margin:0 auto;padding: 30px 0 80px; font-size:1.1rem;}
#footer__inner_logo {width: 248px; float:left; padding:10px 0 0 20px;}
#footer__inner_right {width:600px; float:right;}
#footer__inner li {float: left;margin-right: 15px;list-style-type: none;padding-right: 10px;}
#footer__inner p {text-align: left;clear: both;padding-top: 5px; color:#666;}

#slide {background: url(../img/slide.png);	background-position: 0px 0px;height: 410px;width: 100%;position: relative;animation: SlideAnime 50s linear infinite;-webkit-animation: SlideAnime 50s linear infinite;}
@-webkit-keyframes SlideAnime {0%    { background-position:0px 0px;  }100%  { background-position:-3585px 0px;  }}

/*----------------------------------------------------------------------------------------------
fukidashi
----------------------------------------------------------------------------------------------*/ 
.fukidashi { position: relative; z-index: auto; }
.fukidashi img { width: 100%; height: 100%; }
.fukidashi .box {position: absolute;width: 650px;height: auto;left: 15%;border-radius: 10px 10px 10px 10px;background-color: #ff0;display: none;}
.fukidashi .box:after {position: absolute;content: "";width: 0;height: 0;top: -32px;left: 32px;border: 16px solid transparent;border-bottom: 16px solid #ff0;}
.fukidashi .text { font-size: 1.1rem; top: 8px; left: 4px; color: #000; padding:10px; }
.fukidashi:hover .box { z-index: 2; display: block; }
.fukidashi .box2 {position: absolute;width: 300px;height: auto;left: 15%;border-radius: 10px 10px 10px 10px;background-color: #ff0;display: none;}
.fukidashi .box2:after {position: absolute;content: "";width: 0;height: 0;top: -32px; left: 32px;border: 16px solid transparent;border-bottom: 16px solid #ff0;}
.fukidashi:hover .box2 { z-index: 2; display: block; }

.cf:before,.cf:after {content: " ";display: table;}
.cf:after {clear: both;}
.cf {*zoom: 1;}

.box01 {width: 960px;margin: 2em auto;padding: 2em;background: #FFF;/* border-radius: 15px; */box-shadow: 5px 5px 1px rgba(165, 165, 165, 0.3);border: 4px double #00a3f8;box-sizing: border-box;}
.box01 hr{margin: 1em 0;border-top: 1px dashed #00a1d1;;}
.box01 h1 {color: #00a3f8;font-family: Georgia,游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif;font-size: 5rem;font-weight: bold;margin: 0 0 .5em;line-height: 1;}


/*///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
   【 max-width: 640px 】
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ 
@media screen and (max-width: 640px) {
/*----------------------------------------------------------------------------------------------
    Basic Style 
----------------------------------------------------------------------------------------------*/ 
html{ font-size:62.5%;}
body{width:100%;font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;font-size:4.5vw;line-height:1.7; background:url(../img/base/base_background.jpg);}
#body__wrap{width:100%; float:none;background:#FFF; border:none;}
img{ max-width:100%;}
.youtube{width: 90%; height: auto; margin:15px auto 0; }
.youtube iframe{width: 100%; height: 200px;}	
.side_photo{float:right; width: 100%; padding: 0 0 1em 1em;}
.side_photo2{float:left; width: 35%; padding: 0 1em 1em 0;}
.br-sp { display:none; }
.br-pc { display:block; }
ul.check4 { margin: 1.5em 0 0; }
ul.check4 li { background: url(../img/base/check4.png) 0 0.3em no-repeat; padding: 0.5em 0 0.5em 1.5em; font-size: 1.8rem; font-weight: bold; border-bottom: 1px dashed #aaa; line-height: 1.3; letter-spacing: 1px;}
.pc_img{display: none;}
.sp_img{display: block;}	
/*----------------------------------------------------------------------------------------------
    Styles for .countdown
----------------------------------------------------------------------------------------------*/ 
#countdown__background{width:100%;height:auto; margin:-1px auto 0; background:#000;}
.countdown__txt{width:90%;margin:0 auto;font-size:1.8rem;font-weight:bold;color:#f3ff6b;text-align:center;padding:7px 0 0;}
.countdown__txt p{ color:#FFF; display:inline; font-size:1.8rem;}
.countdown__wrap {width:100%;height:auto;margin:0 auto;padding:0;}
.cunt_pc{display:none;}
.cunt_sp{display:block; margin-bottom: -20px;background:#000;}

/*----------------------------------------------------------------------------------------------
letter.sub-head
----------------------------------------------------------------------------------------------*/ 
.sub-head{ width:90%; margin:0 auto 15px; padding:25px 0 10px;}
.sub-head h1{font-size: 5vw; font-weight: bold; line-height: 1.3; font-weight: bold;color: #c71800;}
.letter{width:90%;margin:0 auto; padding:0;}
/* チーマケ公式のヘッター移植 */
	#header{padding-top: .2em; }
	#header .float_l,#header .float_r{ float:none; }
	#header .header {width:98%;}
	#header .header h1 {display:none}
	#header .header p{padding:0;}
	a.linkStyle01 {display:none;}
/*----------------------------------------------------------------------------------------------
    Styles for #header
----------------------------------------------------------------------------------------------*/ 
header{width:100%;margin:0 auto; padding:0;background:url(../img/hirota_opt_header_b_00.png) center bottom;}
#header__img{width:100%;background:#fff5df;}
#header__img .mv{ width:98%; margin:auto; }

.main-visual {display: none;}
.main-visual_sp {display: block; margin: 0 0 -8px;}	
/*----------------------------------------------------------------------------------------------
.section__area00
----------------------------------------------------------------------------------------------*/ 
.section__area00_gray{ width: 100%; margin: 0 ;padding: 0 0 2em; background: #eee;}
.section__area00_img img {width:90%; margin: 0 auto;}

	/* before after ----------------------------------------------- */
	.ba__box {width: 90%; margin:2em auto; background: #e0f1ff; border-radius: 15px; padding: 2em; box-sizing: border-box; }
	
	/* kiyaku ------------------------------------------------ */
	.kiyaku__box { width: 95%; }
	/* service ----------------------------------------------- */
	.service__list { width: 95%; }
	.service__list th, .service__list td { padding: 0.5em; }
	.service__list th { background: #f5f5f5; }
	.service__list td.large { font-size: 120%; }
	.service__list_A, .service__list_C { width: 25%; }
	.service__list .txt__center { text-align: center; }
	
	/* present ----------------------------------------------- */
	.present__box { width: 90%; }
	.present__box .section__area00_img img { padding: 0; }
	.present__box p { padding: 1em; }
	.ribbon_box { max-width: 100%; }
	.ribbon10 h3 { font-size: 5vw; line-height: 40px; }
	.ribbon10:after { border-width: 26px 15px 26px 0; }
	
/*----------------------------------------------------------------------------------------------
    Styles for .profile
----------------------------------------------------------------------------------------------*/ 
#profile{width:100%;margin:0 auto; background: url( ../img/img03_bg.png) center top no-repeat #fafafa; background-size: 100%;}
.profile__box{ width: 90%; margin: 0 auto;}

/*----------------------------------------------------------------------------------------------
    Styles for .voice
----------------------------------------------------------------------------------------------*/ 
#voice{width:100%;margin:0px auto;}
#voice__wrap{ width:90%; margin:0 auto ; background:#FFF;border-radius: 15px;box-shadow: 4px 2px 16px rgba(0, 0, 0, 0.3); }
.voice__wrap_box{width:100%;margin:0 auto 20px;}
.voice__wrap_box_photo{ width:23%;padding: 22px 0px 40px 19px;float: left;}
.voice__wrap_box_txt{ width:63%; float: right;padding: 15px 20px 0 0px;}
.voice__wrap_box_txt h2{ font-size: 1.9rem; font-weight: bold; line-height: 1.3;}
.voice__wrap_box_txt h3{ font-size: 1.2rem; padding: 10px 0; }
.voice__wrap_box_txt h4{ font-size: 1.4rem; text-align: right; color: #A3A3A3; padding: 15px 0 0;}
.voice__wrap_box_txt02{ width:67%; float: right;padding: 40px 52px 0 0px;}
.voice__wrap_box_txt02 h2{ font-size: 3.3rem; font-weight: bold; line-height: 1.3; color: #FF4F00}
.voice__wrap_box_txt02 h3{ font-size: 1.8rem; padding: 10px 0; }
.voice__wrap_box_txt02 h4{ font-size: 1.4rem; text-align: right; color: #A3A3A3; padding: 15px 0 0;}
.voice__wrap_box hr{ width:90%; margin:15px auto 20px; border-top: 1px dashed #8c8b8b;border-bottom: 1px dashed #fff; clear:both; clear:both;}

.voice2__wrap,.voice3__wrap{width: 100%;padding : 1.5em 1em;box-sizing: border-box;margin: 1em auto;}
.voice2__img { float: left;width: 30%;}
.voice2__box { margin: 0 auto;width: 68%;float: right;}
.voice2__text,.voice3__text {width: 100%;margin: 0 auto;}	
.voice2__box p {font-size: 2rem; letter-spacing: .5px;}
.voice2__box h1{ font-size: .5em;}	
.voice2__box h2 {font-size: 1em;}
.voice2__text p,.voice3__text p{color:#fff;font-size: 2.5vw;text-align: center;}
.voice2__img img{max-width: 100%;display: block;}
	
/*----------------------------------------------------------------------------------------------
#voice_ver2
----------------------------------------------------------------------------------------------*/ 
#voice_ver2{width:100%;margin:35px auto 0; padding: 0 0 6px; background: #eeeeee;}
#voice_ver2__wrap{ width:90%; margin:0 auto ; background:#FFF;border-radius: 15px;box-shadow: 4px 2px 16px rgba(0, 0, 0, 0.3); }
.voice_ver2__wrap_box_pt01{width:100%;margin:0 auto 30px;background: url(../img/hirota_contents_b_08s.png) no-repeat 4% 24%; background-size: 43%;}
.voice_ver2__wrap_box_pt02{width:100%;margin:0 auto 30px;background: url(../img/hirota_contents_b_09s.png) no-repeat 4% 25%; background-size: 40%;}
.voice_ver2__wrap_box_pt03{width:100%;margin:0 auto 30px;background: url(../img/hirota_contents_b_10s.png) no-repeat 4% 21%; background-size: 43%;}
.voice_ver2__wrap_box_pt04{width:100%;margin:0 auto 30px;background: url(../img/hirota_contents_b_11s.png) no-repeat 14% 28%; background-size: 30%;}
.voice_ver2__wrap_box_pt05{width:100%;margin:0 auto 30px;background: url(../img/hirota_contents_b_12s.png) no-repeat 4% 24%; background-size: 43%;}
.voice_ver2__wrap_box_txt{ width:90%; margin: 0 auto; float: none;padding: 18px 0 0 0px;}
.voice_ver2__wrap_box_txt h2{ width: 55%; float: right; font-size: 2.2rem; font-weight: bold; line-height: 1.3;}
.voice_ver2__wrap_box_txt h3{ width: 55%; float: right; font-size: 1.2rem; padding: 10px 0 25px; }
.voice_ver2__wrap_box_txt h4{ font-size: 1.4rem; text-align: right; color: #A3A3A3; padding: 15px 0 40px;}
.voice_ver2__wrap_box_txt h5{ font-size: 1.6rem; margin: 0 0 10px; font-weight: bold; color:#c38a05; padding: 0 0 0 15px; border-left: 5px solid #c38a05; line-height: 1.3;}
.voice_ver2__wrap_box_txt img {margin:0;}
.voice_ver2__wrap_box_txt_list{width: 100%; margin: 20px auto 25px; clear: both;}
.voice_ver2__wrap_box_txt_list li{ width: 45%; padding: 0 10px 0 0;display: inline-block;}
.voice_ver2__wrap_box_txt_list li p{ font-size: 1.3rem; text-align: left; padding: 5px 0 0; line-height: 1.3;}

/*----------------------------------------------------------------------------------------------
#top_form
----------------------------------------------------------------------------------------------*/ 
#top_form{ display: none; width: 100%; margin: 0 auto;top: 0px;left: 0px;  z-index:1000; position: fixed;/*background:url(../img/hirota_header_back.png);*/}
#top_form_wrap{ width:95%; margin: 1px auto;}
#top_form_wrap_left{ width: 65%; margin:3px auto 0px; float: left;}
#top_form_wrap_left_txt input{ width:100%; box-sizing:border-box; margin:6px 0 10px; padding:9px 4px 9px 40px; border:none;font-size:1rem;border-radius: 4px; background-size: 10%; background-position: .5em;}
#top_form_wrap_left_txt input:hover{border:4px solid #F00; background-color:#FFC;}
#top_form_wrap_right{ width: 33%; float: right; margin:3px auto 0; padding: 0;}
.square_btn02{width: 100%;box-sizing: border-box;display: inline-block;padding: 0.8em 1em;text-align: center;font-size: 1.3rem; font-weight: bold;line-height: 1.3;text-decoration: none;background: #ff6600;/*ボタン色*/color: #FFF;border-radius: 4px; -webkit-appearance: none;}
.square_btn02:hover{opacity: 0.8;}

/*----------------------------------------------------------------------------------------------
#header_form
----------------------------------------------------------------------------------------------*/ 
#header_form {width: 100%;margin: 0 auto 0;}
#header_form_wrap{ width:95%; margin: 0 auto;}
#header_form_wrap_left{ width: 100%; margin:0 auto; float: none;}
#header_form_wrap_left p{ font-weight:bold; margin:0 0 0 5px; font-size:1.6rem; color: #FFF; }
#header_form_wrap_left p img{ display:inline; margin:0 6px -5px 0;}
#header_form_wrap_left_txt input{ width:100%; box-sizing:border-box; margin:12px 0 0px; padding:11px 10px 11px 55px; border:none;font-size:1.4rem;border-radius: 4px;background-size: 10%;}
#header_form_wrap_left_txt input:hover{border:4px solid #F00; background-color:#FFC;}
#header_form_wrap_right{ width: 100%; float: none; margin:8px auto; padding: 0;}
#header_form_wrap_right input{ width:100%;}
#header_form_wrap_right input:hover{ opacity: 0.8;}
	
.fukidashi .box2:after {
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    top: -32px;
    right: 32px;
    border: 16px solid transparent;
    border-bottom: 16px solid #ff0;
    left: auto;
}
.fukidashi .box2 {
    position: absolute;
    width: 300px;
    height: auto;
    right: 15%;
    border-radius: 10px 10px 10px 10px;
    background-color: #ff0;
    display: none;
    left: auto;
}


/*----------------------------------------------------------------------------------------------
    Styles for #mailform__second
----------------------------------------------------------------------------------------------*/
.mailform__second{ width:100%; margin:0 auto; padding: 0 0 1px;/*background:url(../img/hirota_header_back.png);*/}
.mailform__second_img{ width: 90%; margin: 0 auto; padding:9px 0 0;}
.mailform__second_wrap{ width:90%; margin:0 auto 10px;}
.mailform__second_wrap_left{ width: 100%; margin:12px auto 0; float: none;}
.mailform__second_wrap_left p{ font-weight:bold; margin:0 0 0 5px; font-size:2.2rem; }
.mailform__second_wrap_left p img{ display:inline; margin:0 6px -5px 0;}
.mailform__second_wrap_left_txt input{width:100%; box-sizing:border-box; margin:5px 0 10px; padding:13px 10px 13px 50px; border:none;font-size:1.3rem;border-radius: 4px;background-size: 10%; background-position: .5em;}
.mailform__second_wrap_left_txt input:hover{border:4px solid #F00; background-color:#FFC;}
.mailform__second_wrap_right{ width: 100%; float: none; margin:0 auto 0; padding: 0;}
.square_btn{width: 100%;box-sizing: border-box;display: inline-block;padding:0.6em 1.5em;text-align: center;font-size: 2.1rem; font-weight: bold;line-height: 1.3;text-decoration: none;background: #ff6600;/*ボタン色*/color: #FFF;border-radius: 4px;-webkit-appearance: none;}
.square_btn:hover{opacity: 0.8;}
	
/*----------------------------------------------------------------------------------------------
フォーム注釈
----------------------------------------------------------------------------------------------*/
.form__must{width:10%; box-sizing:border-box; background:#fff; font-weight:bold; float:left; margin:5px 0 10px; padding:13px 0 0 10px; border:4px solid #333; border-right:none; height:70px;}
.form__must p{background:#f00; color:#fff; padding:5px;text-align: center; font-size:1.5rem!important;}

/*----------------------------------------------------------------------------------------------
    Styles for#close__img
----------------------------------------------------------------------------------------------*/ 
.close__img{ width:100%; position: relative;}
.close__img_text{ width:100%; height:100%; position:absolute; background-color: rgba(0, 0, 0, 0.8); z-index:999;}
.close__img_text h1 { width:90%; margin:90px auto 0; font-size:5rem; line-height:1.3; color:#FFF; text-align:center; font-weight:bold; text-shadow: 5px 5px 3px #333,-5px 5px 3px #333,5px -5px 3px #333,-5px -5px 3px #333;}

/*----------------------------------------------------------------------------------------------
    Styles for #footer__attention
----------------------------------------------------------------------------------------------*/ 
#footer__attention{ width:100%; background-color: #ecf0ee;}
#footer__attention p{ width:90%; margin: 0 auto; padding: 20px 0 ; font-size:1.4rem; color: #353535;}

/*----------------------------------------------------------------------------------------------
    Styles for footer
----------------------------------------------------------------------------------------------*/ 
footer {width:100%; height:auto;margin:0 auto 0; background-color: #ecf0ee;}
#footer__inner {width: 90%;margin:0 auto;padding: 0 0 30px; font-size:1.1rem;}
#footer__inner_logo {width: 60%; float:none; padding:10px 0 14px 0;}
#footer__inner_right {width:100%; float:none ;}
#footer__inner li {float: left;margin-right: 15px;list-style-type: none;padding-right: 10px;}
#footer__inner p {text-align: left;clear: both;padding-top: 5px; color:#666;}
	
#slide { height: 200px; background-size: cover; -webkit-animation: SlideAnime 90s linear infinite; animation: SlideAnime 90s linear infinite; }

.box01{width: 100%;padding : 1.5em 1em;box-sizing: border-box;margin: 1em auto;}
.box01 h1{font-size: 8vw;}	
}
