@charset "utf-8";

/*===== reset css =====
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
=======================*/

html, 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, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}

body {
line-height:1;
}

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

nav ul {
list-style:none;
}

blockquote, q {
quotes:none;
}

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

a {
margin:0;
padding:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}

/* change colours to suit your needs */
ins {
background-color:#ff9;
color:#000;
text-decoration:none;
}

/* change colours to suit your needs */
mark {
background-color:#ff9;
color:#000; 
font-style:italic;
font-weight:bold;
}

del {
text-decoration: line-through;
}

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

table {
border-collapse:collapse;
border-spacing:0;
}

/* change border colour to suit your needs */
hr {
display:block;
height:1px;
border:0;   
border-top:1px solid #ccc;
margin:1em 0;
padding:0;
}

input, select {
vertical-align:middle;
}

/*=== 全体設定 ===*/
html{
font-size: 18px;
}

table {
border-collapse: separate;
width: 100%;
}
p {
    margin: 1em 1em
}
h2 {
	font-weight: bold;
	padding: .5em .75em;
	background-color: rgba(255,137,137,0.3);
	border-radius: 6px;
    	font-size: 120%;
}

h3 {
	padding-left: 0.5em;
    	margin: 0.5em;
	border-bottom: 2px solid #FF8989;
    	font-size: 110%;
}
ul.poi li {
margin: .5em 1.5em;
  position: relative;
  
    list-style: none; 
}
ul.poi li::after {
  display: block;
  content: '';
  position: absolute;
  top: .68em;
  left: -1.3em;
  width: 6px;
  height: 6px;
  background-color: #FF8989;
  border-radius: 100%;
}
ol.poi li {
    margin: 0.5em 1.5em;
    text-indent: -1.8em;
    list-style: none;    
}
ol.poi { counter-reset: yourDefinition;
margin: 1em 1em;
}
ul.poi { 
margin: 1em 1em;
}
ol.poi li:before {
counter-increment: yourDefinition;
content: counter(yourDefinition);
display: inline-block;
margin-right: .5em;/*文字の位置*/
width: 24px;height: 24px;/*大きさ*/
text-align: center;/*数字の基本位置*/
color: white;/*数字の色*/
text-indent: 0.1em;/*数字の位置調整*/
background: #FF8989;/*色*/
border-radius: 100%;/*角の丸さ*/
}

/* リンク設定
------------------------------------------------------------*/
a{
margin: 0;
padding: 0;
text-decoration: none;
outline: 0;
vertical-align: baseline;
background: transparent;
font-size: 100%;
font-weight: 500;
color: #FF8989;
}

a,
a::before,
a::after{
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-o-transition: 0.3s;
-ms-transition: 0.3s;
transition: 0.3s;
}

a:hover,
a:active{
text-decoration: underline;
}

/*--- Clearfix ---*/
.clearfix::after {
content: '';
display: block;
clear: both;
}

body{
font-family: "Hiragino Kaku Gothic ProN","メイリオ", sans-serif;
font-weight: 400;
color:#333;
background: #fff url("../images/back_img.jpg") !important;
background-repeat: repeat;
background-size: 500px auto !important;
-webkit-text-size-adjust: 100%;
}

#wrapper_wrapper{
position: relative;
max-width: 1200px;
width: 100%;
margin: 0 auto;
}

#wrapper_wrapper *{
box-sizing: border-box;
}

.drawer--sidebar.drawer--right .drawer-nav{
right: auto !important;
margin-left: 900px !important;
width: 300px !important;
border-left: 1px solid #FFBCBC !important;
border-right: 1px solid #FFBCBC !important;
background: #FED6D6 !important;
}

.drawer-brand{
padding: .7em !important;
font-size: 80% !important;
line-height: 1em !important;
color: #666 !important;
border-bottom: 3px solid #FED6D6;
border-top: 1px solid #fff;
border-radius: 0 20px 0 0;
}

.drawer-hamburger{
width: 3rem !important;
}

.drawer-menu{
padding: 15px !important;
}

.drawer-menu ul + ul{
margin-top: 15px;
}

.drawer-menu li{
padding: .7em;
border-right: 1px solid #fff;
border-left: 1px solid #fff;
background: rgba(255,255,255,.3);
}

.drawer-menu li + li{
border-top: 1px dashed #fff;
}

.drawer-menu .drawer-brand + li{
border-top: hidden;
}

.drawer-menu li:last-child{
border-bottom: 1px solid #fff;
border-radius: 0 0 0 20px;
}

.drawer-menu-item{
color: #FF8989 !important;
padding: 0 !important;
}

/* styled scrollbars */
.iScrollVerticalScrollbar {
width: 6px;
top: 0;
right: 0;
bottom: 0;
border-left: 1px solid #FFBCBC !important;
background: rgba(255,255,255,.6);
}

/* do not fix */
.iScrollVerticalScrollbar {
overflow: hidden;
position: absolute;
z-index: 9999;
}

.iScrollVerticalScrollbar .iScrollIndicator {
width: 5px;
}

.iScrollIndicator {
position: absolute;
background: #FF8989;
box-sizing: border-box;
}

#wrapper{
width: 900px;
height: auto;
padding: 20px 20px 20px 0;
}

.wrapper_inner{
border: 1px solid #FED6D6;
border-radius: 0 20px 0 20px;
background: rgba(255, 239, 239, .8);
}

#header h2{
padding: 15px;
font-size: 1rem;
border-bottom: 3px solid #FF8989;
text-align: center;
}

#header h2 a{
color: #333;
}

#header h2 a:hover{
text-decoration: none;
}

#main_img{
position: relative;
width: 100%;
height: auto;
overflow: hidden;
}

#main_img::before{
content: "";
display: block;
padding-top: 30%;
}

.main_img_inner{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}

#main_img img{
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 100%;
height: auto;
vertical-align: bottom;
}

#content{
width: 100%;
background: #fff;
}

#content_header h1{
font-size: 1.5rem;
line-height: 1.3em;
padding: 15px;
border-bottom: 1px solid #FED6D6;
border-left: 10px solid #FED6D6;
}

#post{
padding: 15px;
line-height: 1.5em;
}

#post p + p{
margin-top: 1em;
}

#footer{
width: 100%;
padding: 15px;
font-size: 80%;
border-top: 3px solid #FF8989;
text-align: center;
}

/* 1200px以下から
------------------------------------------------------------*/
@media only screen and (max-width: 1200px){
	
	.drawer--sidebar.drawer--right .drawer-nav{
	right: 0 !important;
	margin-left: 0 !important;
	width: 12.5rem !important;
	border-right: hidden !important;
	}
	
	#wrapper{
	width: auto;
	padding: 15px;
	margin-right: 12.5rem;
	}
	
}

/* 1023px以下から
------------------------------------------------------------*/
@media only screen and (max-width: 1023px){
	
	.drawer--sidebar.drawer--right .drawer-nav{
	border-left: hidden !important;
	right: -12.5rem !important;
	}
	
	.drawer--right.drawer-open .drawer-hamburger{
	right: 12.5rem !important;
	}
	
	.drawer--right.drawer-open .drawer-nav{
	right: 0 !important;
	}
	
	#wrapper{
	margin-right: 0;
	padding: 10px;
	}
	
	.drawer-hamburger{
	padding: 0 !important;
	width: 45px !important;
	height: 45px !important;
	background: rgba(254, 214, 214, .8) !important;
	border-radius: 0 0 0 7px !important;
	overflow: hidden !important;
	}
	
	.drawer-open .drawer-hamburger{
	background: #FED6D6 !important;
	}
	
	.drawer-hamburger-icon {
	width: 65% !important;
	margin: 0 auto !important;
	}
}

/* 900px以下から
------------------------------------------------------------*/
@media only screen and (max-width: 900px){
	
	#wrapper_inner{
	padding: 10px !important;
	}
	
	.drawer-menu{
	padding: 10px 15px 10px 10px !important;
	}
}