@charset "utf-8";
/* ------------------------------------------------------------ index */

#fv { background: url(../images/shop/fv.jpg) center top no-repeat; background-size: cover; }

h3 { padding: 0 0 45px;}
h3 span { font-size: 16px; color: #c8ae7a; vertical-align: bottom; line-height: 100%;}
h3 img { padding: 0 10px 0 0;}

h3.font { font-size: 30px; color: #c7b08a; }
p.text2 { font-size: 16px; line-height: 40px;}

p.btn_01 { padding: 30px 0 0; text-align: left;}
p.btn_01 a { text-align: center; height: 40px; line-height: 40px;}

#concept { background: url(../images/about/pic_00.jpg) right top no-repeat #000; }
#concept .box { padding: 90px 0 65px; width: 470px; text-align: left;}
#concept h3 { padding: 0 0 30px;}
#concept p { color: #fff; }

#message { background: url(../images/common/bg_01.gif) center center;} 
#message p,
#flow p { font-size: 14px; line-height: 30px; }
#message .box { float: right; width: 480px; padding: 100px 0 60px;}
#message .photo { float: left;}
#message p.btn { text-align: right;}
#flow { background: url(../images/about/bg_02.jpg) right top no-repeat #eeeeee; padding: 110px 0 60px;}
#flow .box { width: 470px;}

/* ------------------------------------------------------------ concept */

#fv.fv3 { background: url(../images/flow/fv.jpg) center top no-repeat; background-size: cover;}

.concept_detail { text-align: center; padding: 70px 0 100px;}
.concept_detail.top { background: url(../images/concept/pic_01.jpg) center bottom no-repeat; padding: 70px 0 255px; }
.concept_detail p { padding: 0 0 70px;}
.concept_detail .movie { width: 735px; margin: 0 auto; padding: 0 0 70px;}
.concept_detail .movie .youtube { position: relative; padding-bottom: 53%; overflow: hidden; }
.concept_detail .movie .youtube iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.concept_detail .movie p { text-align: left; font-size: 14px; padding: 0;}
.concept_detail p.btn { text-align: center; padding: 0;}

/* ------------------------------------------------------------ flow */

#fv.fv2 { background: url(../images/concept/fv.jpg) center top no-repeat; background-size: cover;}

#flow_top { text-align: center; padding: 100px 0 85px;}
#flow_top .list { background: url(../images/common/bg_01.gif); padding: 55px 0 80px; margin: 30px 0 0;}
#flow_top .list ol li { list-style-type: none; background: #fff; margin: 0 0 35px; text-align: left;}
#flow_top .list ol li img.photo { float: left;}
#flow_top .list ol li div { float: left; width: 436px; padding: 40px 33px 45px;}
#flow_top .list ol li div h4 { font-size: 28px; color: #c7b08a; padding: 0 0 25px;}
#flow_top .list ol li div h4 span { vertical-align: bottom; line-height: 100%; padding: 0 0 0 10px; }
#flow_top .list ol li div h4 small { font-size: 20px; vertical-align: bottom; }
#flow_top .list ol li div h4.care img { float: left;}
#flow_top .list ol li div h4.care span { float: left; width: 330px;}
#flow_top p.btn { text-align: center;}

/* ------------------------------------------------------------ message */

#fv.fv4 { background: url(../images/message/fv.jpg) center top no-repeat; background-size: cover;}

#message_top { text-align: center; padding: 100px 0 90px;}
#message_top .profile_detail { background: url(../images/common/bg_01.gif); margin: 100px 0 0 0;}
#message_top .profile_detail img { float: left; width: 50%; height: auto; }
#message_top .profile_detail div { float: left; width: 40%; padding: 40px 5% 40px 4%; text-align: left;} 
#message_top .profile_detail div p { font-size: 16px;}
#message_top .profile_detail div h4 { font-size: 30px; padding: 10px 0 20px;}
#message_top .profile_detail div h4 span { display: block; font-size: 14px; line-height: 130%;}
#message_top .profile_detail div dl { font-size: 14px;}
#message_top .profile_detail div dl dt { float: left; width: 100px; padding: 0 15px 5px 0;}
#message_top .profile_detail div dl dd { float: left; width: 70%; padding: 0 0 5px;}
#message_top p.btn { text-align: center;}

#message_top #taniguchi { margin: 0 0 100px; }
#message_top #taniguchi img { float: right; width: 50%; height: auto; }
#message_top #taniguchi div { float: right; width: 40%; padding: 40px 5% 40px 4%; text-align: left;} 


/* ------------------------------------------------------------ mobile */
@media only screen and (max-width:640px){

/* ------------------------------------------------------------ index */

h3 { padding: 20px 0; text-align: center;}
h3 img { height: 20px; width: auto;}
h3 span { font-size: 14px; display: block; padding: 10px 0 0;}

h3.font { font-size: 20px; font-weight: bold;}
p.text2 { font-size: 14px; line-height: 24px; text-align: left;}

p.btn_01 { padding: 15px 0 0; text-align: center;}
img.image { width: 100%; height: auto;}

#concept { background: none;}
#concept .box { padding: 20px 0 30px; width: 100%;}
#concept h3 { padding: 20px 0;}
#concept p { color: #222; }

#message { text-align: center; padding: 20px 0 0;}

#message .box { float: none; width: 100%; padding: 0 0 30px; }
#message .photo { float: none; width: 60%; height: auto;}
#message p.btn { text-align: center;}
#flow { background: #eeeeee; padding: 30px 0;}
#message p,
#flow p { font-size: 14px; line-height: 20px; letter-spacing: 2px; text-align: left;}
#flow .box { width: 100%;}
#flow p.btn { text-align: center;}




/* ------------------------------------------------------------ concept */

.concept_detail { padding: 35px 0 50px;}
.concept_detail.top { background-size: contain; padding: 15px 0 20%; }
.concept_detail p { padding: 0 0 30px; text-align: left; }
.concept_detail .movie { width: 100%; padding: 0 0 35px;}
.concept_detail .movie p { font-size: 12px;}

/* ------------------------------------------------------------ flow */

#flow_top { text-align: center; padding: 30px 0 40px;}
#flow_top .list { padding: 25px 0 30px;}
#flow_top .list ol li { margin: 0 0 25px;}
#flow_top .list ol li img.photo { float: none; width: 100%; height: auto;}
#flow_top .list ol li div { float: none; width: 94%; padding: 20px 3% 25px;}
#flow_top .list ol li div h4 { padding: 0 0 15px;}
#flow_top .list ol li div h4 img { width: 12%; height: auto;}
#flow_top .list ol li div h4 span { font-size: 16px;}
#flow_top .list ol li div h4 small { font-size: 12px;}
#flow_top .list ol li div h4.care span { width: 85%; line-height: 130%; padding: 0 0 0 3%; letter-spacing: 0;}
#flow_top p.btn_01 { padding: 30px 0 0;}

/* ------------------------------------------------------------ message */

#message_top { padding: 30px 0 40px;}
#message_top .profile_detail { margin: 50px 0;}
#message_top .profile_detail img { float: none; width: 100%; height: auto; }
#message_top .profile_detail div { float: none; width: 94%; padding: 25px 3% 30px;} 
#message_top .profile_detail div p { font-size: 14px;}
#message_top .profile_detail div h4 { font-size: 15px;}
#message_top .profile_detail div h4 span { font-size: 12px;}
#message_top .profile_detail div dl { font-size: 13px;}
#message_top .profile_detail div dl dt { width: 27%; padding: 0 3% 5px 0;}
#message_top .profile_detail div dl dd { width: 70%; padding: 0 0 5px;}

#message_top #taniguchi img { float: none; width: 100%; height: auto; }
#message_top #taniguchi div { float: none; width: 94%; padding: 25px 3% 30px;} 


}