@charset "utf-8";

/*
	HTML5 Reset :: style.css
	----------------------------------------------------------
	We have learned much from/been inspired by/taken code where offered from:
	
	Eric Meyer					:: http://ericmeyer.com
	HTML5 Doctor				:: http://html5doctor.com
	and the HTML5 Boilerplate	:: http://html5boilerplate.com
	
-------------------------------------------------------------------------------*/

/* Let's default this puppy out
-------------------------------------------------------------------------------*/

html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	vertical-align: baseline;
}									

article, aside, figure, figcaption, footer, header, hgroup, nav, section {display: block;}

/* force a vertical scrollbar to prevent a jumpy page */
html {overflow-y: scroll;}

/* we use a lot of ULs that aren't bulleted. 
	don't forget to restore the bullets within content. */
ul {list-style: none;}

blockquote, q {quotes: none;}

blockquote:before, 
blockquote:after, 
q:before, 
q:after {content: ''; content: none;}

a {margin: 0; padding: 0; vertical-align: baseline; background: transparent;}

del {text-decoration: line-through;}

abbr[title], dfn[title] {border-bottom: 1px dotted #000; cursor: help;}

/* tables still need cellspacing="0" in the markup */
table {border-collapse: collapse; border-spacing: 0;}
th {font-weight: bold; vertical-align: middle; text-align:left;}
td {font-weight: normal; vertical-align: top;}

hr {display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0;}

input, select {vertical-align: middle;}

pre {
	white-space: pre; /* CSS2 */
	white-space: pre-wrap; /* CSS 2.1 */
	white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
	word-wrap: break-word; /* IE */
}

input[type="radio"] {vertical-align: text-bottom;}
input[type="checkbox"] {vertical-align: middle; *vertical-align: baseline;}
.ie6 input {vertical-align: text-bottom;}

select, input, textarea {font: 99% sans-serif;}

table {font-size: inherit; font: 100%;}
 
/* Accessible focus treatment
	people.opera.com/patrickl/experiments/keyboard/test */
a:hover, a:active, input:focus, select:focus, option:focus, textarea:focus {outline: none;}

strong, th {font-weight: bold;}

td, td {vertical-align: top;} 
img {vertical-align: top;} 

/* Make sure sup and sub don't screw with your line-heights
	gist.github.com/413930 */
sub, sup {font-size: 75%; line-height: 0; position: relative;}
sup {top: -0.5em;}
sub {bottom: -0.25em;}

/* standardize any monospaced elements */
pre, code, kbd, samp {font-family: monospace, sans-serif;}

/* hand cursor on clickable elements */
.clickable,
label, 
input[type=button], 
input[type=submit], 
button {cursor: pointer;}

/* Webkit browsers add a 2px margin outside the chrome of form elements */
button, input, select, textarea {margin: 0;}

/* make buttons play nice in IE */
button {width: auto; overflow: visible;}
 
/* scale images in IE7 more attractively */
.ie7 img {-ms-interpolation-mode: bicubic;}

/* prevent BG image flicker upon hover */
.ie6 html {filter: expression(document.execCommand("BackgroundImageCache", false, true));}

/* let's clear some floats */
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }  
.clearfix:after { clear: both; }  
.clearfix { zoom: 1; }  



/* Ok, this is where the fun starts.
-------------------------------------------------------------------------------*/

/* new Linux- and Windows-friendly sans-serif font stack: http://mky.be/fontstack */
body {font: 13px Helmet, Freesans, sans-serif;}

/* using local fonts? make sure to read up on Paul Irish's 
	Bulletproof @font-face syntax: http://mky.be/font-face/bulletproof/ */

/* we like off-black for text */
body, select, input, textarea {color: #333;}

a {color: #554639;text-decoration:underline;}
a:hover {color: #00468C;text-decoration:none;}

ins {background-color: #333; color: #FFF; text-decoration: none;}
mark {background-color: #333; color: #FFF; font-style: italic; font-weight: bold;}

/* -------------------------------
   BASE
------------------------------- */

/* margin */
.mt-60 {margin-top:-60px!important;}
.mt-50 {margin-top:-50px!important;}
.mt-40 {margin-top:-40px!important;}
.mt-30 {margin-top:-30px!important;}
.mt-20 {margin-top:-20px!important;}
.mt-10 {margin-top:-10px!important;}
.mt0 {margin-top:0!important;}
.mt5 {margin-top:5px!important;}
.mt10 {margin-top:10px!important;}
.mt15 {margin-top:15px!important;}
.mt20 {margin-top:20px!important;}
.mt25 {margin-top:25px!important;}
.mt30 {margin-top:30px!important;}
.mt40 {margin-top:40px!important;}
.mt50 {margin-top:50px!important;}
.mt60 {margin-top:60px!important;}
.mt70 {margin-top:70px!important;}

/* float */
.left { float:left;}
.right { float:right;}
.fNone { float:none!important;}
.clear { clear:both; }

/* align */
.tLeft { text-align:left!important;}
.tCenter { text-align:center!important;}
.tRight { text-align:right!important;}
.vTop { vertical-align:top!important;}
.vMiddle { vertical-align:middle!important;}
.vBottom { vertical-align:bottom!important;}

.nowrap { white-space:nowrap; }

/* color */
.blue { color:#144398;}
.red { color:#A30035;}
.green { color:#AEC533;}
.pink { color:#EA609E;}

/* text */
.normal { font-weight:normal; }
.bold { font-weight:bold; }
.f10 { font-size:10px!important;}
.f11 { font-size:11px!important;}
.f12 { font-size:12px!important;}
.f13 { font-size:13px!important;}
.f15 { font-size:15px!important;}
.f16 { font-size:16px!important;}
.f18 { font-size:18px!important;}
.lh10 { line-height:1!important;}
.lh12 { line-height:1.2!important;}
.lh15 { line-height:1.5!important;}
.lh18 { line-height:1.8!important;}
.lh20 { line-height:2!important;}
.gothic { font-family:'Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro','Hiragino Kaku Gothic Pro','Meiryo UI','メイリオ',Meiryo,'游ゴシック','Yu Gothic',Arial,Verdana,Helvetica,Roboto,sans-serif;}
.serif { font-family:'ヒラギノ明朝 ProN W3','Hiragino Mincho ProN','ヒラギノ明朝 Pro','Hiragino Mincho Pro','游明朝','Yu Mincho',HG明朝B,'ＭＳ Ｐ明朝','ＭＳ 明朝',Georgia,'Times New Roman',serif;}

/* color */
.block { display:block!important;}
.inline { display:inline!important;}
.inlineBlock { display:inline-block!important;}

/* link */
a {color: #333;text-decoration:underline;}
a:hover {color: #333;text-decoration:none;}

/* transition */
.transition05 {
	-moz-transition-duration:0.5s;
	-o-transition-duration:0.5s;
	-ms-transition-duration:0.5s;
	transition-duration:0.5s;
}


/* -------------------------------
   common
------------------------------- */

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
html {
	background:#FFF;
}
body {
	font-size:14px;
	line-height:1.5;
	background:#FFF;
	font-family:'Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro','Hiragino Kaku Gothic Pro','Meiryo UI','メイリオ',Meiryo,'游ゴシック','Yu Gothic',Arial,Verdana,Helvetica,Roboto,sans-serif;
}

.btn{
	font-family:'ヒラギノ明朝 ProN W3','Hiragino Mincho ProN','ヒラギノ明朝 Pro','Hiragino Mincho Pro','游明朝','Yu Mincho',HG明朝B,'ＭＳ Ｐ明朝','ＭＳ 明朝',Georgia,'Times New Roman',serif;
	text-align:center;
	font-weight:bold;
}

.btn a{
	padding:10px 30px;
	display:inline-block;
	background-color:#715B78;
	color:#FFF;
	text-decoration:none;
	border-radius:10px;
	position:relative;
}

.btn a:after{
    display: inline-block;
	margin-left:5px;
    width: 8px;
    height: 8px; 
    border-top: 1px solid #FFF;
    border-right: 1px solid #FFF;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transition: all 0.4s cubic-bezier(.17,.67,.54,.93);
    -webkit-transition: all 0.4s cubic-bezier(.17,.67,.54,.93);
    content: "";
}


/* -------------------------------
   header
------------------------------- */



/* -------------------------------
   footer
------------------------------- */



/* -------------------------------
   side
------------------------------- */



/* -------------------------------
   contents
------------------------------- */



/* -------------------------------
   home
------------------------------- */

#mainVisual{
	background-color:#F1EFEB;
	font-family:'ヒラギノ明朝 ProN W3','Hiragino Mincho ProN','ヒラギノ明朝 Pro','Hiragino Mincho Pro','游明朝','Yu Mincho',HG明朝B,'ＭＳ Ｐ明朝','ＭＳ 明朝',Georgia,'Times New Roman',serif;
	text-align:center;
}

#mainVisual h1{
	font-weight:normal;
}

#mainVisual dt{
	border-top:solid 1px #222222;
	border-bottom:solid 1px #222222;
}

.otherZadankai{
	margin-top:20px;
}

.otherZadankai li{
	font-family:'ヒラギノ明朝 ProN W3','Hiragino Mincho ProN','ヒラギノ明朝 Pro','Hiragino Mincho Pro','游明朝','Yu Mincho',HG明朝B,'ＭＳ Ｐ明朝','ＭＳ 明朝',Georgia,'Times New Roman',serif;
	display: inline-block;
	margin-right:20px;
}

.otherZadankai li:before{
	content:"＞";
	margin-right:5px;
}

.otherZadankai li a{
	text-decoration: underline;
}

.otherZadankai li a:hover{
	text-decoration: none;
}

#opening h2{
	text-align:center;
	font-weight:normal;
	border-top:solid 1px #222222;
	border-bottom:solid 1px #222222;
}

#opening > p{
	font-family:'ヒラギノ明朝 ProN W3','Hiragino Mincho ProN','ヒラギノ明朝 Pro','Hiragino Mincho Pro','游明朝','Yu Mincho',HG明朝B,'ＭＳ Ｐ明朝','ＭＳ 明朝',Georgia,'Times New Roman',serif;
}

#opening div.index{
	border-top:solid 1px #CCCCCC;
	text-align:center;
}

#opening div.index h3{
	text-align:center;
	font-family:'ヒラギノ明朝 ProN W3','Hiragino Mincho ProN','ヒラギノ明朝 Pro','Hiragino Mincho Pro','游明朝','Yu Mincho',HG明朝B,'ＭＳ Ｐ明朝','ＭＳ 明朝',Georgia,'Times New Roman',serif;
	display:block;
	background-color:#FFF;
	width:140px;
}

#opening div.index ul li{
	text-align: center;
}

#opening div.index ul li a{
	text-decoration:none;
	display:block;
	padding:2px 0;
}

#opening dl.index{
	border-top:solid 1px #CCCCCC;
	text-align:center;
}

#opening dl.index dt{
	text-align:center;
	font-family:'ヒラギノ明朝 ProN W3','Hiragino Mincho ProN','ヒラギノ明朝 Pro','Hiragino Mincho Pro','游明朝','Yu Mincho',HG明朝B,'ＭＳ Ｐ明朝','ＭＳ 明朝',Georgia,'Times New Roman',serif;
	display:block;
	background-color:#FFF;
	width:140px;
}

#opening dl.index dd{
	font-family:'ヒラギノ明朝 ProN W3','Hiragino Mincho ProN','ヒラギノ明朝 Pro','Hiragino Mincho Pro','游明朝','Yu Mincho',HG明朝B,'ＭＳ Ｐ明朝','ＭＳ 明朝',Georgia,'Times New Roman',serif;
}

#opening dl.index dd a{
	text-decoration:none;
	display:block;
	padding:2px 0;
}


#opening .introduce{
	background-color:#F1EFEB;
}

#opening .introduce h3{
	text-align:center;
	font-family:'ヒラギノ明朝 ProN W3','Hiragino Mincho ProN','ヒラギノ明朝 Pro','Hiragino Mincho Pro','游明朝','Yu Mincho',HG明朝B,'ＭＳ Ｐ明朝','ＭＳ 明朝',Georgia,'Times New Roman',serif;
	background-color:#81755C;
	color:#FFF;
	font-weight:normal;
	padding:10px;
	margin-bottom:20px;
}

#opening .introduce p{
	text-align:center;
}

#opening .introduce ul li{
	font-size:14px;
	display:inline-block;
	vertical-align:top;
	text-align:center;
}

#opening .introduce ul li figure{
	background-color:#FFF;
	margin-bottom:10px;
}

#opening .introduce ul li dt{
	font-weight:bold;
	margin-bottom:5px;
}

.secHead .txt p:not(:last-child){
	margin-bottom:20px;
}

.sec .secTit{
	text-align:center;
	font-weight:normal;
	background-color:#CBD0D5;
}

.sec .subTit{
	background:url(../images/h3_top.png) repeat-x left top, url(../images/h3_bottom.png) repeat-x left bottom;
	text-align:center;
	font-weight:normal;
	color:#5E4B5A;
}

.use h3{
	text-align: center;
	background: #81755C;
	padding:10px;
	color:#ffffff;
}

.talk li .comment{
	border-radius:20px;
	background-color:#F7F7F7;
	padding:25px 30px;
	position:relative;
}

.talk li .comment:after{
	content:"";
	position:absolute;
	top:100%;
	left:100px;
	border-left:solid 17px #F7F7F7;
	border-bottom:solid 17px transparent;
}

.talk li .person img{
	vertical-align:baseline;
	margin-right:10px;
}

.talk li .person{
	font-weight:bold;
	margin-top:-20px;
	position:relative;
}

.talk li .person .multiple{
	display: inline-block;
	margin-left:20px;
	position: relative;
}

.talk li .person .multiple:before{
	content:"";
	position:absolute;
	top:20px;
	left:100px;
	border-left:solid 17px #F7F7F7;
	border-bottom:solid 17px transparent;
}

.note h3{
	text-align:center;
	font-family:'ヒラギノ明朝 ProN W3','Hiragino Mincho ProN','ヒラギノ明朝 Pro','Hiragino Mincho Pro','游明朝','Yu Mincho',HG明朝B,'ＭＳ Ｐ明朝','ＭＳ 明朝',Georgia,'Times New Roman',serif;
	color:#80765D;
	font-weight:bold;
	border:solid 1px #80765D;
	position:relative;
}

.note h3:before{
	content:"";
	border-top:solid 15px #80765D;
	border-left:solid 7px transparent;
	border-right:solid 7px transparent;
	position:absolute;
	left:50%;
	top:100%;
	margin-left:-7px;
}

.note h3:after{
	content:"";
	border-top:solid 13px #FFF;
	border-left:solid 6px transparent;
	border-right:solid 6px transparent;
	position:absolute;
	left:50%;
	top:100%;
	margin-left:-6px;
}

.note .showDesk section{
	text-align: center;
}

.note .showDesk section h4{
	font-family:'ヒラギノ明朝 ProN W3','Hiragino Mincho ProN','ヒラギノ明朝 Pro','Hiragino Mincho Pro','游明朝','Yu Mincho',HG明朝B,'ＭＳ Ｐ明朝','ＭＳ 明朝',Georgia,'Times New Roman',serif;
}

.recommendChair .chairContent .txt{
	font-family:'ヒラギノ明朝 ProN W3','Hiragino Mincho ProN','ヒラギノ明朝 Pro','Hiragino Mincho Pro','游明朝','Yu Mincho',HG明朝B,'ＭＳ Ｐ明朝','ＭＳ 明朝',Georgia,'Times New Roman',serif;
}

.recommendChair .chairContent ul{
	display: flex;
}

.recommendChair .chairContent ul li{
	text-align: center;
	font-family:'ヒラギノ明朝 ProN W3','Hiragino Mincho ProN','ヒラギノ明朝 Pro','Hiragino Mincho Pro','游明朝','Yu Mincho',HG明朝B,'ＭＳ Ｐ明朝','ＭＳ 明朝',Georgia,'Times New Roman',serif;
}


.recommendChair .chairContent .txt{
	position: relative;
}


#peripheral .note dt{
	font-weight:bold;
	padding-top:20px;
	margin-bottom:10px;
}

#chair .talk .item{
	border:solid 1px #EEEEEE;
	border-radius:20px;
	padding:20px;
	margin:15px auto 0;
	position:relative;
}

#chair .talk .item p{
	text-align:center;
	font-size:14px;
}

#chair .talk .item .photo{
	margin-top:15px;
	margin-left:35px;
}

#chair .talk .item .photo figure{
	float:left;
	margin-right:22px;
}

#chair .talk .item .photo p{
	text-align:left;
}

#chair .talk .item .photo .name{
	font-size:16px;
	font-weight:bold;
	padding-top:15px;
	margin-bottom:10px;
}

#chair .talk .item .photo .logo img{
	width:40px;
}

#chair .talk .item .btn{
	margin-top:15px;
}

#chair .talk .item .btn a{
	width:100%;
}

#hope .note .detail .item{
	margin-bottom:15px;
	position:relative;
}

#hope .note .detail .item li{
	font-weight:bold;
	text-align:center;
}

#hope .note .detail .item li img{
	margin-bottom:10px;
}

#hope .note .detail .item:before{
	width:24px;
	height:6px;
	content:"";
	display:block;
	background-color:#86807E;
	position:absolute;
	left:50%;
	top:60px;
	margin-left:-17px;
}

#hope .note .detail .item:after{
	width:6px;
	height:24px;
	content:"";
	display:block;
	background-color:#86807E;
	position:absolute;
	left:50%;
	top:51px;
	margin-left:-8px;
}

#after{
	background-color:#F1EFEB;
	margin-top:40px;
}

#after h2{
	text-align:center;
	font-family:'ヒラギノ明朝 ProN W3','Hiragino Mincho ProN','ヒラギノ明朝 Pro','Hiragino Mincho Pro','游明朝','Yu Mincho',HG明朝B,'ＭＳ Ｐ明朝','ＭＳ 明朝',Georgia,'Times New Roman',serif;
	font-weight:normal;
}

#after .afterTop figure img:first-child{
	float:left;
}

#after .afterTop figure img:last-child{
	float:right;
}

#after .message h3{
	border-top:solid 1px #222222;
	border-bottom:solid 1px #222222;
	text-align:center;
	font-family:'ヒラギノ明朝 ProN W3','Hiragino Mincho ProN','ヒラギノ明朝 Pro','Hiragino Mincho Pro','游明朝','Yu Mincho',HG明朝B,'ＭＳ Ｐ明朝','ＭＳ 明朝',Georgia,'Times New Roman',serif;
	padding:10px;
	margin-bottom:20px;
	font-weight:normal;
}