﻿@charset "utf-8";

/* --------------------------------------------------------
base 14px
10px:0.71em 11px:0.78em 12px:0.85em 13px:0.92em 14px:1em 
15px:1.07em 16px:1.14em 17px:1.21em 18px:1.28em 19px:1.35em
20px:1.42em 21px:1.5em  22px:1.57em 23px:1.64em 24px:1.71em
-------------------------------------------------------- */
/* --------------------------------------------------------
	共通
-------------------------------------------------------- */
html{
	overflow-x: hidden;
}
.spOnly{
	display: none !important;
}
*{
	box-sizing: border-box;
}

body{
	font-size:87.5%;
	font-family: "メイリオ",Meiryo,Verdana,Arial,"ヒラギノ角ゴPro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック",sans-serif;
	color: #4b341c;
}
a{
	text-decoration: none;
	color: #4b341c;
}
img{
	height: auto;
    max-width: 100%;
}

@media screen and (min-width: 769px) { 
	a:hover{
		opacity: 0.7;
		transition: 0.2s ease;
	}
}

@media screen and (max-width: 768px) { 
	.pcOnly{
		display: none !important;
	}
	.spOnly{
		display: block !important;
	}
}


/* --------------------------------------------------------
	header
-------------------------------------------------------- */
#spHerder{
	display: none;
}
#headSearch{
	display: none;
}
.gsc-control-searchbox-only{
	width: 260px;
	margin: 12px auto;
}

@media screen and (min-width: 769px) { 
	#headNavWrap{
		background: #e75555;
		height: 42px;
	}
	#headNav{
		width: 1000px;
        max-width: 100%;
		margin: 0 auto;
		position: relative;
	}
	.triggerbtn{
		display: none;
	}	
	#headerglobalNavWrap{
        width: 1000px;
        max-width: 98%;
        margin: 10px auto 0;
        position: relative;
        display: flex;
        align-items: center;
    }
    #globalNav{
        width: 80%;
        padding-left: 62px;
    }
    .headerglobalNavItemWrap{
        display: flex;
        justify-content: space-between;
        height: 32px;
        align-items: center;
        position: relative;
        min-width: auto;
    }
    .headerglobalNavItemWrap > li{
        width: calc(100% / 5);
    }
    .headerglobalNavItem{
        position: relative;
        display: block;
        text-align: center;
        font-size: 1.0rem;
    }
    .headerglobalNavItem:hover{
        opacity: 0.7;
    }
    .headerglobalNavItemWrap::before{
        content: '';
        width: 2px;
        height: 30px;
        background-color: #e75555;
        position: absolute;
        top: 50%;
        margin-top: -15px;
        left: 0;
    }
    .headerglobalNavItem::after{
        content: '';
        width: 2px;
        height: 30px;
        background-color: #e75555;
        position: absolute;
        top: 50%;
        margin-top: -15px;
        right: 0;
    }
    .headNavItemWrap{
        top: 7px;
        position: relative;
        font-size: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        left: 0;
        width: 100%;
    }
    .headNavItemWrap > li{
        display: inline-block;
    }
    .headNavItem{
        display: block;
        color: #fff;
        padding: 4px 16px;
        font-size: 14px;
        text-decoration: none;
        height: 40px;
        white-space: nowrap;
    }
    .headNavItem:hover,
    .headNavItemOn{
        background: #fff;
        color: #e75555;
        border-radius: 5px 5px 0 0;
        z-index: 100;
    }
    .headNavItemSerch{
        padding: 0 36px;
        position: relative;
        height: 32px;
    }
    .headNavItemSerch img{
        vertical-align: top;
        max-width: 20px;
    }
    .headNavItemSerch:hover{
        background: none;
        position: relative;
    }
    .headNavItemSerch:hover #headSearch{
        display: block;
        width: 300px;
        position: absolute;
        bottom: -50px;
        left: -90px;
        background-color: #e75555;
        border-radius: 0 0 5px 5px;
    }
    .headNavItemSerch::before,
    .headNavItemSerch::after{
        content: '';
        width: 2px;
        height: 12px;
        background-color: #fff;
        position: absolute;
        top: 50%;
        margin-top: -12px;
        z-index: 100;
    }
    .headNavItemSerch::before{
        left: 2px;
    }
    .headNavItemSerch::after{
        right: 2px;
    }
}

@media screen and (min-width: 1201px) { 
    .headNavItemWrap{
        left: 185px;
        justify-content: flex-start;
    }
    
    .headerglobalNavItemWrap{
        min-width: 787px;
    }
    
    .headNavItem{
        padding: 4px 24px;
    }
    
    .headNavItemSerch{
        padding: 0 42px;
    }
}



@media screen and (max-width: 768px) { 
	body{
		border-top: 2px solid #e75555;
	}
	#pcHerder{
		display: none;
	}	
	#spHerder{
		display: block;
		position: relative;
	}
	#headNavArea{
		padding: 5px 0 0 20px;
	}
	#logo.spOnly{
		display: inline-block;
	}
	#logo img{
		width: 65px;
		height: auto;
	}
	.headNavItemSerch_sp{
		position: absolute;
		right: 75px;
		top: 50%;
		margin-top: -7px;
		text-align: center;
	}
	.headNavItemSerch_sp > span{
		display: block;
		font-size: 11px;
		margin-top: 5px;
	}
	.serchSp{
		display: none;
	}
	.serchSp.active{
		display: block;
	}
	#headSearch{
		display: block;
		position: absolute;
		background-color: #e75555;
		width: calc(100% + 20px);
		left: 0;
		top: 59px;
		padding: 10px 0;
		z-index: 300;
	}
	.gsc-control-searchbox-only{
		width: 80%;
	}
	.triggerbtn{
		display: block;
		position: absolute;
		background: #e75555;
		width: 60px;
		height: 60px;
		right: 0;
		top: 0;
	}
	.triggericn{
		margin-top: 9px;
    	position: relative;
	}
	.triggericn span{
		display: inline-block;
		position: absolute;
		width: 22px;
		height: 3px;
		background-color: #fff;
		transition: background .3s;
		border-radius: 10px;
		left: 50%;
		margin-left: -11px;
	}
	.triggericn span:nth-child(1){
		top: 8px;
	}
	.triggericn span:nth-child(2){
		top: 18px;
	}
	.triggericn span:nth-child(3){
		top: 28px;
	}
	.menu_open .triggericn span:nth-child(1){
		transform: translateY(10px) rotate(-45deg);
	}
	.menu_open .triggericn span:nth-child(2){
		opacity: 0;
	}
	.menu_open .triggericn span:nth-child(3){
		transform: translateY(-10px) rotate(45deg);
	}
	#headerglobalNavArea{
		display: none;
		background: #fff;
		position: absolute;
		width: 100%;
		height: 100%;
		z-index: 101;
		top: 59px;
		left: 0;
		border-top:solid 2px #e75555;
	}
	.headNavItemWrap{
		display: block;
	}
	#headerglobalNavArea .headNavItem{
		display: block;
		background-color: #fff;
		padding: 10px 1em 10px 2.5em;
		position: relative;
		border-bottom: 1px solid rgba(75, 52, 28, 0.5);
	}
	#headerglobalNavArea .headNavItem::after{
		content: '';
		position: absolute;
		border-top:1px solid #4b341c;
	    border-right:1px solid #4b341c;
	    transform: rotate(45deg);   
		width: 6px;
		height: 6px;
		top: 50%;
		margin-top: -4px;
		right: 25px;
	}
	#headerglobalNavArea .headNavItemOn::after{
		transform: none;
		border-right: none;
		width: 10px;
		margin-top: -2px;
		right: 22px;
	}
	#headerglobalNavArea .headNavTriger.trigerOpen{
		display: none;
	}
	#headerglobalNavArea .headNavTriger::before{
		content: '';
		position: absolute;
		border-top:1px solid #4b341c;
		width: 12px;
		right: 22.5px;
		top: 50%;
		margin-top: -1px;
		transition: .3s;
	}
	#headerglobalNavArea .headNavTriger::after{
		transform: none;
		border-top: none;
		height: 12px;
		right: 27px;
		margin-top: -6px;
		transition: .3s;
	}
	#headerglobalNavArea .active .headNavTriger{
		background-color: #eee;
	}
	#headerglobalNavArea .active .headNavTriger::before{
		transform: rotate(-180deg);
		transition: .3s;
	}
	#headerglobalNavArea .active .headNavTriger::after{
		display: none;
		transition: .3s;
	}
	.headNavInner{
		display: none;
	}
	.headNavInner.menu_open{
		display: block;
		transition: .3s;
	}
	#headerglobalNavArea .headNavInner .headNavItem{
		padding-left: 5em;
	}
	.headNavInner .headNavItem::before{
		content:'';
		width: 12px;
		height: 1px;
		background-color:#4b341c;
		position: absolute;

		left: 3.5em;
		top: 50%;
		margin-top: -1px;
	}
	#headerglobalNavArea .convenientLink{
		border: solid 2px #e75555;
		border-radius: 4px;
		width: 92%;
		margin: 20px auto 0;
	}
	#headerglobalNavArea .convenientLink .headNavTriger{
		color: #e75555;
		padding-left: 20px;	
		border-bottom: solid 1px #e75555;
	}
	#headerglobalNavArea .convenientLink > li.active + li{
		border-top: solid 1px #e75555;
	}
	#headerglobalNavArea .convenientLink > li:last-child .headNavTriger{
		border-bottom: none;
	}
	#headerglobalNavArea .convenientLink > li.active:last-child .headNavTriger{
		border-bottom: solid 1px #e75555;
	}
	#headerglobalNavArea .convenientLink .active .headNavTriger{
		background-color: rgba(231, 85, 85, 0.1);;
		opacity: 1;
	}
	.headNavItemIco{
		display: inline-block;
		width: 45px;
	}
	#headerglobalNavArea .convenientLink .headNavTriger::before{
		border-top: 1px solid #e75555;
	}
	#headerglobalNavArea .convenientLink .headNavTriger::after{
		border-right: 1px solid #e75555;
	}
	#headerglobalNavArea .convenientLink .headNavInner .headNavItem{
		padding-left: 4.7em;
	}
	#headerglobalNavArea .convenientLink .headNavInner > li:last-child .headNavItem{
		border-bottom: none;
	}
	.convenientLink .headNavInner .headNavItem::before{
		content: none;
	}

}

/* --------------------------------------------------------
   pagetop
-------------------------------------------------------- */
#pagetop {
	text-align:right;
	margin-bottom:15px;
}


/* --------------------------------------------------------
	footer
-------------------------------------------------------- */
footer{
	background-color:#f9f9f9;
    margin-top: 60px;
}

#footer_inner{
	width:980px;
    max-width: 100%;
	margin:0 auto;
	padding:20px 0 90px;
	overflow:hidden;
}

#footNav{
	display:table;
	float:left;
}

#footNav .footNav_box{
	display:table-cell;
	width:240px;
}

#footNav .footNav_box h2{
	margin-bottom:15px;
}

#footNav .footNav_box li{
	position:relative;
	margin:5px 0;
	padding-left: 15px;
}
#footNav .footNav_box li:before{
	display: block;
	position: absolute;
	content: '';
	top: 50%;
	left: 5px;
	width: 2px;
	height: 2px;
	margin-top: -1px;
	background-color: #4b341c;
}

#footerBtn{
	width:140px;
	float:right;
	padding:25px 0 0 0;
}

/*** footerAdd ***/
#footerAdd{
	background:#e75555;
}
#footerAdd_inner{
	position:relative;
	width:980px;
    max-width: 95%;
	margin:0 auto;
	padding:10px;
	color:#fff;
	font-size:0.85em;
    box-sizing: content-box;
}

#footerAdd_inner a{color:#fff;}
#footerAdd_inner ul{
	overflow:hidden;
}
#footerAdd_inner li{
	display:inline-block;
	line-height:22px;
}
#footerAdd_inner li span:before{
	content:'|';
	color:#fff;
	padding:0 1em;
}

#footerAdd_inner .copyright{
	position:absolute;
	right:0;
	top:11px;
}

@media screen and (max-width: 768px){
	footer{
		background-color: transparent;
	}
	#footer_inner{
		width: 100%;
		padding: 0 10px;
	}
	#footerAdd_inner{
		width: 90%;
		padding: 30px 0;
        text-align: center;
	}
	#footNav{
		display: none;
	}
	#footerBtn{
		display: none;
	}
	#pagetop{
		padding-right: 15px;
	}
	#footerAdd_inner .copyright{
		position: static;
		text-align: center;
		margin-top: 10px;
	}
}

@media screen and (max-width: 320px){
    #footerAdd_inner li span:before{
        padding: 0 0.5em;
    }
    
    #footerAdd_inner a{
        font-size: .9em;
    }
}

/* 以上/common/css/index.css記述------------------------------*/


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

@media screen and (max-width: 768px) { 
    #headNav{
        max-width: 100%;
        position: static;
    }
    
    header{
        margin-bottom: 0;
    }
    
    #spHerder{
        padding-bottom: 8px;
    }
    
    .headNavItemSerch_sp{
        padding: 0;
        margin-top: -11px;
    }
    
    header a.triggerbtn{
        opacity: 1;
    }
    
    .headNavItemWrap{
        position: static;
        width: 100%;
    }
    
    .headNavItemWrap > li{
        display: block;
    }
    
    #headerglobalNavArea .headNavItem,
    #headerglobalNavArea .headNavInner .headNavItem{
        color: #4b341c;
        margin-bottom: 0;
        height: auto;
    }
}



/* --------------------------------------------------------
	content
-------------------------------------------------------- */
.main_inner *,
#side *{
    box-sizing: content-box;
}

.spView{
    display: none;
}

@media screen and (max-width: 768px) { 
    #side{
        display: none;
    }
    
    #contents{
        width: 100%;
    }
    
    #main{
        width: 100%;
        float: none;
    }
    
    #main_body{
        border: none;
        border-radius: 0;
        border-top: 2px solid #e75555;
        padding: 0 10px;
        margin-bottom: 0;
    }
    
    #breadCrumb{
        text-align: left;
        margin: 10px;
    }
    
    #main .main_inner{
        padding: 20px 0;
    }
    
    #main .main_inner:last-child{
        padding-bottom: 0;
    }
    
}

@media screen and (max-width: 767px) { 
    .main_inner *{
        box-sizing: border-box;
    }
    
    #main .section:last-child{
        margin-bottom: 0;
    }
    
    .pcView{
        display: none;
    }
    
    .spView{
        display: block;
    }
    
    .main_ttl01,
    .main_ttl02,
    .main_ttl03,
    .main_ttl04{
        line-height: 1.3;
    }
    
    .main_ttl02{
        font-size: 1.2em;
        padding: 8px 20px;
    }
    
    .main_ttl03{
        background-position-y: 15px; 
    }
    
    .lead{
        font-size: 1.15em;
    }
    
    .scrTbl_wrap{
        overflow-x: auto;
    }
    
    .scrTbl_wrap::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }
    
    .scrTbl_wrap::-webkit-scrollbar-track {
      border-radius: 10px;
      box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
    }

    .scrTbl_wrap::-webkit-scrollbar-thumb {
      background-color: #ddd;
      border-radius: 10px;
      box-shadow:0 0 0 1px rgba(255, 255, 255, .3);
    }
    
    .scrTbl_conts{
        margin-bottom: 10px;
        width: 700px;
    }
    
    .btn2{
        max-width: 100%;
    }
    
    .unit3Col .col{
        float: none;
        margin: 10px auto 0;
    }
    
    .unit3Col .col:first-child{
        margin: 0 auto;
    }
    
}
