@charset "utf-8";
@media screen and (min-width: 961px) {
#pageTitle{background:url(../img/about/pagetitle.jpg) no-repeat center center}
#pageTitle h1{background:url(../img/about/title.png) no-repeat center;width:290px;height:74px;text-indent:-9999em;margin:0 auto;padding:260px 0 0}
.serviceBox{margin: 20px 0 50px;}
.memberService,.nonmemberService {clear: both;overflow: hidden;display: block;}
.memberService li {
	display: block;
	float: left;
	background: #F8F6EF;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    width: 277px;
    margin-left: 19px;
    padding: 20px;
    box-sizing: border-box;
    text-align: center;
}
.nonmemberService li {
	display: block;
	float: left;
	background: #F8F6EF;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    width: 425px;
    margin-left: 20px;
    padding: 20px;
    box-sizing: border-box;
    text-align: center;
}
.memberService li:first-child,
.nonmemberService li:first-child  {margin: 0;}
.memberService li h4,
.nonmemberService li h4 {
    color: #513F33;
    font-size: 182%;
    border-bottom: 1px solid #645244;
    padding-bottom: 10px;
    margin-bottom: 10px;
}
.memberService li p,
.nonmemberService li p {margin: 0;}
#consignment{background:#F8F6EF;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;margin:0 0 100px;overflow:hidden;padding:30px 0 0;margin:50px 0 100px;background:#F0EFE9;width:590px;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px}
#consignment h3{color:#513F33;font-size:116%;border-bottom:1px solid #645244;padding:0 0 18px;margin:0 0 18px;font-weight:700;line-height:1.8em}
#consignment figure{float:left;margin:0 0 30px 30px;width:100px}
#consignment figure img{margin:0 0 10px}
#consignment figcaption{color:#513F33;font-size:116%;font-weight:700;line-height:1.8em}
#consignment .inner{width:410px;float:right;margin:0 20px 0 0}
#consignment .inner p{margin-bottom:20px}
#aboutReason{background:url(../img/about/top/line01.gif) repeat-x top;margin:50px 0 100px}
#aboutReason ul li{color:#513F33;font-weight:700;font-size:138.5%;line-height:1.8em}
#aboutReason dt{width:180px;height:100px;border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;font-size:138.5%;color:#FFF;font-weight:700;text-align:center;float:left;padding:80px 0 0;margin:50px 0 0;position:relative}
#aboutReason dt:after{content:"\0025bc";position:absolute;right:-18px;top:78px;transform:rotate(-90deg);font-size:24px}
#aboutReason dd{padding:50px 0 50px 230px;background:url(../img/about/top/line01.gif) repeat-x bottom}
#aboutReason ul li{padding:0 0 0 28px;margin:0 0 5px}
#aboutReason dt:nth-of-type(1){background:#91BD09}
#aboutReason dt:nth-of-type(2){background:#FFA751}
#aboutReason dt:nth-of-type(1):after{color:#91BD09}
#aboutReason dt:nth-of-type(2):after{color:#FFA751}
#aboutReason dd:nth-of-type(1) ul li{background:url(../img/about/top/arrow01.png) no-repeat 0 5px}
#aboutReason dd:nth-of-type(2) ul li{background:url(../img/about/top/arrow02.png) no-repeat 0 5px}
.aboutbox{margin:0 0 100px}
.aboutbox dl dt{padding:50px 0 0}
.aboutbox ul.aboutList {background:#F0EFE9;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;padding:0 30px;margin:30px 0}
.aboutbox ul.aboutList li{color:#513F33;font-weight:700;font-size:138.5%;line-height:1.8em;padding:25px 0 25px 30px;background:url(../img/about/top/line02.gif) repeat-x bottom}
.aboutbox ul.aboutList li:last-child{background:none}
.aboutbox p strong{font-size:116%;font-weight:700}
.aboutbox .aboutMsg{font-size:216%}
.aboutbox .link a{background:url(../img/common/ft_arrow.png) no-repeat left center;padding-left:22px;text-decoration:underline}
.aboutbox .link a:hover{text-decoration:none}
.aboutchat {margin:0;clear: both;display: block;overflow: hidden;}
.aboutchat li{min-height:130px;}
.aboutchat li.first {float: left;}
.aboutchat li.second {float: right;}
.aboutchat li img {width: 100px;}
.aboutchat li.right img.face{float:right}
.aboutchat li.left img.face{float:left;}
.aboutchat li p{margin:0;padding:20px}
.baloonRpink{position:relative;width:300px;margin-left:130px;border-radius:8px;-webkit-border-radius:8px;-moz-border-radius:8px;-o-border-radius:8px;-ms-border-radius:8px;border:1px solid #948579;background:#FFEFF0;z-index:103;}
.baloonRpink::before{content:"";transform:rotate(90deg);-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);position:absolute;left:-20px;top:0;margin-top:-9px;width:0;height:0;border-right:19px solid #948579;border-top:19px solid transparent;border-left:19px solid transparent;border-bottom:19px solid transparent;z-index:102}
.baloonRpink::after{content:"";transform:rotate(90deg);-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);position:absolute;left:-18px;top:0;margin-top:-8px;width:0;height:0;border-right:18px solid #FFEFF0;border-top:18px solid transparent;border-left:18px solid transparent;border-bottom:18px solid transparent;z-index:103}
.baloonRpink div{border-radius:8px;-webkit-border-radius:8px;-moz-border-radius:8px;-o-border-radius:8px;-ms-border-radius:8px;background:#FFEFF0;height:inherit;z-index:105;position:relative}
.baloonRblue{position:relative;width:300px;margin-right:130px;border-radius:8px;-webkit-border-radius:8px;-moz-border-radius:8px;-o-border-radius:8px;-ms-border-radius:8px;border:1px solid #948579;background:#EFF8FF;z-index:103;}
.baloonRblue::before{
	content: "";
    transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    position: absolute;
    right: -20px;
    top: 0;
    margin-top: -9px;
    width: 0;
    height: 0;
    border-left: 19px solid #948579;
    border-top: 19px solid transparent;
    border-right: 19px solid transparent;
    border-bottom: 19px solid transparent;
    z-index: 102;
}
.baloonRblue::after{
	content: "";
    transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    position: absolute;
    right: -18px;
    top: 0;
    margin-top: -8px;
    width: 0;
    height: 0;
    border-left: 18px solid #EFF8FF;
    border-top: 18px solid transparent;
    border-right: 18px solid transparent;
    border-bottom: 18px solid transparent;
    z-index: 103;
}
.baloonRblue div{border-radius:8px;-webkit-border-radius:8px;-moz-border-radius:8px;-o-border-radius:8px;-ms-border-radius:8px;background:#EFF8FF;height:inherit;z-index:105;position:relative}
.aboutbox ul.aboutList li:before{content:"";display:inline-block;width:22px;height:22px;margin:0 5px 0 -30px;position:relative;top:2px}
.aboutbox.school ul.aboutList li:before{background:url(../img/about/top/arrow03.png) no-repeat 0 2px}
.aboutbox.match ul.aboutList li:before{background:url(../img/about/top/arrow04.png) no-repeat 0 2px}
.aboutbox.outdoor ul.aboutList li:before{background:url(../img/about/top/arrow05.png) no-repeat 0 2px}
.aboutbox.trekking ul.aboutList li:before{background:url(../img/about/top/arrow06.png) no-repeat 0 2px}
.aboutbox.space ul.aboutList li:before{background:url(../img/about/top/arrow07.png) no-repeat 0 2px}
.aboutStep li{position:relative;border:1px solid #3C3324;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;color:#513F33;font-size:138.5%;font-weight:700;margin:0 0 70px;padding-left:200px;line-height:1.8em}
.aboutStep li:after{content:"";background:url(../img/about/top/li_step_arrow.png) no-repeat center bottom;width:100%;height:50px;display:block;position:absolute;bottom:-50px;margin-left:-200px}
.aboutStep li:last-child:after{display:none}
.aboutStep li.first{background:url(../img/about/top/li_step1.png) no-repeat 30px 15px;padding:40px 0 40px 200px}
.aboutStep li.second{background:url(../img/about/top/li_step2.png) no-repeat 30px 15px;padding:22px 0 22px 200px}
.aboutStep li.third{background:url(../img/about/top/li_step3.png) no-repeat 30px 15px;padding:30px 60px 0 200px}
.aboutStep li.fourth{background:url(../img/about/top/li_step4.png) no-repeat 30px 15px;padding:22px 0 22px 200px}
.aboutStep li.fifth{background:url(../img/about/top/li_step5.png) no-repeat 30px 15px;padding:22px 0 22px 200px}
.aboutStep p{font-size:92%}
.aboutStep li span{font-weight:400;font-size:88%}
p.esterisk{font-size:138.5%;font-weight:700;padding:0 0 0 20px}
p.esterisk:before{content:"\00203b";margin:0 5px 0 -20px}
#triviaList{margin:0 0 100px}
#triviaList article{background:#F0EFE9;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;margin:0 0 30px;text-align:center;padding:0 30px 1px}
#triviaList article h3{font-size:216%;color:#513F33;padding:30px 0}
#triviaList article h4{font-size:116%;color:#513F33;padding:30px 0;font-weight:700}
#triviaList article p{text-align:left}
}


@media screen and (max-width: 960px) {
#pageTitle{background:url(../img/about/pagetitle.jpg) no-repeat center center;background-size:auto 100%}
#pageTitle h1{background:url(../img/about/title.png) no-repeat center;background-size:98px auto;width:98px;height:40px;text-indent:-9999em;margin:0 auto;padding:100px 0 0}
.serviceBox{margin: 20px 0 30px;}
.memberService,.nonmemberService {clear: both;overflow: hidden;display: block;}
.memberService li {
	display: block;
	float: none;
	background: #F8F6EF;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    text-align: center;
    margin-bottom: 10px;
}
.nonmemberService li {
	display: block;
	float: none;
	background: #F8F6EF;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    text-align: center;
    margin-bottom: 10px;
}
.memberService li h4,
.nonmemberService li h4 {
    color: #513F33;
    font-size: 150%;
    border-bottom: 1px solid #645244;
    padding-bottom: 10px;
    margin-bottom: 10px;
}
.memberService li p,
.nonmemberService li p {margin: 0;}
#consignment{background:#F8F6EF;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;margin:0 0 50px;overflow:hidden;padding:15px 0 0;margin:25px 0 50px;background:#F0EFE9;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px}
#consignment h3{color:#513F33;font-size:138.5%;border-bottom:1px solid #645244;padding:0 0 10px;margin:0 0 10px;font-weight:700;line-height:1.8em}
#consignment figure{width:100%;margin:0 0 15px;text-align:center}
#consignment figure img{margin:0 auto 10px;width:45px;height:auto;display:block}
#consignment figcaption{color:#513F33;font-size:93%;font-weight:700;line-height:1.8em}
#consignment .inner{padding:0 10px 10px}
#consignment .inner p{margin-bottom:10px}
#aboutReason{background:url(../img/about/top/line01.gif) repeat-x top;margin:25px 0 50px;padding:25px 0}
#aboutReason ul li{color:#513F33;font-weight:700;line-height:1.8em}
#aboutReason dt{width:90px;height:50px;border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;font-size:100%;color:#FFF;font-weight:700;text-align:center;padding:40px 0 0;margin:0 auto;position:relative}
#aboutReason dt:after{content:"\0025bc";position:absolute;right:38px;bottom:-12px;font-size:14px}
#aboutReason dd{padding:25px;background:url(../img/about/top/line01.gif) repeat-x bottom}
#aboutReason ul li{padding:0 0 0 14px;margin:0 0 5px}
#aboutReason dt:nth-of-type(1){background:#91BD09}
#aboutReason dt:nth-of-type(2){background:#FFA751}
#aboutReason dt:nth-of-type(1):after{color:#91BD09}
#aboutReason dt:nth-of-type(2):after{color:#FFA751}
#aboutReason dd:nth-of-type(1){margin-bottom:25px}
#aboutReason dd:nth-of-type(1) ul li{background:url(../img/about/top/arrow01.png) no-repeat 0 3px;background-size:12px}
#aboutReason dd:nth-of-type(2) ul li{background:url(../img/about/top/arrow02.png) no-repeat 0 3px;background-size:12px}
.aboutbox {margin:0 0 50px}
.aboutbox dl dt{padding:25px 0 0}
.aboutbox ul.aboutList {background:#F0EFE9;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;padding:0 15px;margin:15px 0}
.aboutbox ul.aboutList li{color:#513F33;font-weight:700;font-size:108%;line-height:1.8em;padding:15px 0 15px 20px;background:url(../img/about/top/line02.gif) repeat-x bottom}
.aboutbox ul.aboutList li:last-child{background:none}
.aboutbox .aboutMsg{font-size:138.5%}
.aboutbox .link a{background:url(../img/common/ft_arrow.png) no-repeat 0;background-size:12px;padding-left:18px;text-decoration:underline}
.aboutbox .link a:hover{text-decoration:none}
.aboutbox ul.aboutList li:before{content:"";display:inline-block;width:14px;height:14px;margin:0 5px 0 -20px;position:relative;top:2px}
.aboutbox.school ul.aboutList li:before{background:url(../img/about/top/arrow03.png) no-repeat 0;background-size:12px}
.aboutbox.match ul.aboutList li:before{background:url(../img/about/top/arrow04.png) no-repeat 0;background-size:12px}
.aboutbox.outdoor ul.aboutList li:before{background:url(../img/about/top/arrow05.png) no-repeat 0;background-size:12px}
.aboutbox.trekking ul.aboutList li:before{background:url(../img/about/top/arrow06.png) no-repeat 0;background-size:12px}
.aboutbox.space ul.aboutList li:before{background:url(../img/about/top/arrow07.png) no-repeat 0;background-size:12px}
.aboutchat {margin:0;clear: both;display: block;overflow: hidden;}
.aboutchat li.first {float: left;}
.aboutchat li.second {float: right;}
.aboutchat li img {width: 80px;}
.aboutchat li + li {margin-top: 20px;}
.aboutchat li.right img.face{float:right}
.aboutchat li.left img.face{float:left;}
.aboutchat li p{margin:0;padding:10px}
.baloonRpink{position:relative;width:240px;margin-left:110px;border-radius:8px;-webkit-border-radius:8px;-moz-border-radius:8px;-o-border-radius:8px;-ms-border-radius:8px;border:1px solid #948579;background:#FFEFF0;z-index:103;}
.baloonRpink::before{content:"";transform:rotate(90deg);-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);position:absolute;left:-20px;top:0;margin-top:-9px;width:0;height:0;border-right:19px solid #948579;border-top:19px solid transparent;border-left:19px solid transparent;border-bottom:19px solid transparent;z-index:102}
.baloonRpink::after{content:"";transform:rotate(90deg);-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);position:absolute;left:-18px;top:0;margin-top:-8px;width:0;height:0;border-right:18px solid #FFEFF0;border-top:18px solid transparent;border-left:18px solid transparent;border-bottom:18px solid transparent;z-index:103}
.baloonRpink div{border-radius:8px;-webkit-border-radius:8px;-moz-border-radius:8px;-o-border-radius:8px;-ms-border-radius:8px;background:#FFEFF0;height:inherit;z-index:105;position:relative}
.baloonRblue{position:relative;width:240px;margin-right:110px;border-radius:8px;-webkit-border-radius:8px;-moz-border-radius:8px;-o-border-radius:8px;-ms-border-radius:8px;border:1px solid #948579;background:#EFF8FF;z-index:103;}
.baloonRblue::before{
	content: "";
    transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    position: absolute;
    right: -20px;
    top: 0;
    margin-top: -9px;
    width: 0;
    height: 0;
    border-left: 19px solid #948579;
    border-top: 19px solid transparent;
    border-right: 19px solid transparent;
    border-bottom: 19px solid transparent;
    z-index: 102;
}
.baloonRblue::after{
	content: "";
    transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    position: absolute;
    right: -18px;
    top: 0;
    margin-top: -8px;
    width: 0;
    height: 0;
    border-left: 18px solid #EFF8FF;
    border-top: 18px solid transparent;
    border-right: 18px solid transparent;
    border-bottom: 18px solid transparent;
    z-index: 103;
}
.baloonRblue div{border-radius:8px;-webkit-border-radius:8px;-moz-border-radius:8px;-o-border-radius:8px;-ms-border-radius:8px;background:#EFF8FF;height:inherit;z-index:105;position:relative}
.aboutStep li{position:relative;border:1px solid #3C3324;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;color:#513F33;font-size:108%;font-weight:700;margin:0 10px 30px 0;padding-left:200px;line-height:1.8em}
.aboutStep li:after{content:"";background:url(../img/about/top/li_step_arrow.png) no-repeat center bottom;background-size:30px 15px;width:100%;height:30px;display:block;position:absolute;bottom:-25px;margin-left:-100px}
.aboutStep li:last-child:after{display:none}
.aboutStep li.first{background:url(../img/about/top/li_step1.png) no-repeat 15px 7px;background-size:75px auto;padding:20px 0 20px 100px}
.aboutStep li.second{background:url(../img/about/top/li_step2.png) no-repeat 15px 7px;background-size:75px auto;padding:11px 0 11px 100px}
.aboutStep li.third{background:url(../img/about/top/li_step3.png) no-repeat 15px 7px;background-size:75px auto;padding:15px 30px 0 100px}
.aboutStep li.fourth{background:url(../img/about/top/li_step4.png) no-repeat 15px 7px;background-size:75px auto;padding:11px 0 11px 100px}
.aboutStep li.fifth{background:url(../img/about/top/li_step5.png) no-repeat 15px 7px;background-size:75px auto;padding:11px 0 11px 100px}
.aboutStep p{font-size:92%}
.aboutStep li span{font-weight:400;font-size:100%}
p.esterisk{font-size:108%;font-weight:700;padding:0 0 0 20px}
p.esterisk:before{content:"\00203b";margin:0 5px 0 -20px}
#triviaList{margin:0 0 50px}
#triviaList article{background:#F0EFE9;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;margin:0 0 15px;text-align:center;padding:0 15px 1px;line-height:1.8em}
#triviaList article h3{font-size:216%;color:#513F33;padding:30px 0}
#triviaList article h4{font-size:116%;color:#513F33;padding:30px 0;font-weight:700}
#triviaList article p{text-align:left}
}