/*
 * cmn_layout.css
 *
 */


/*===============================================
●共通
===============================================*/

body {
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro","メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", Arial, Helvetica, Verdana, sans-serif;
	-webkit-text-size-adjust: 100%;
	background: #fff;
	color: #333333;
	line-height:180%;
    word-wrap: break-word;
    font-size: 16px;
}

#wrapper,
#contents,
#main{
	width:100%;
	margin:0;
	padding:0;
	}

.meiryo {
    font-family: "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", Arial, Helvetica, Verdana, sans-serif;
}

a{
	color: #333333;
    text-decoration: none;
}

a:hover{
	opacity: 0.8;
}

	

/*===============================================
●画面の横幅が641px以上(タブレット・PC)
===============================================*/
@media screen and (min-width: 641px) {

    #wrapper{
        width:100%;
        min-width:1300px;
        margin:0;
        padding:0;
    }		

/* !共通
---------------------------------------------------------- */
    .pcNone{
        display:none;
        }

    .list-flex{
        display:-webkit-box !important;
        display:-moz-box !important;
        display:-ms-box !important;
        display:-webkit-flexbox !important;
        display:-moz-flexbox !important;
        display:-ms-flexbox !important;
        display:-webkit-flex !important;
        display:-moz-flex !important;
        display:-ms-flex !important;
        display:flex !important;
        -webkit-box-lines:multiple !important;
        -moz-box-lines:multiple !important;
        -webkit-flex-wrap:wrap !important;
        -moz-flex-wrap:wrap !important;
        -ms-flex-wrap:wrap !important;
        flex-wrap:wrap !important;
    }


    /* 文字フェードイン */
    .fade{
        transition: opacity 1.0s;
          -moz-transition: opacity 1.0s;
          -webkit-transition: opacity 1.0s;
          -o-transition: opacity 1.0s;
          transition: transform 1.0s;
          -moz-transition: transform 1.0s;
          -webkit-transition: transform 1.0s;
          -o-transition: transform 1.0s;
    }

	
/* !header ヘッダー
---------------------------------------------------------- */
    header {
        position:fixed;
        width:100%;
        min-width: 960px;
        height:100px;
        padding:0px;
        z-index:99999;
        top:0;
        background-color: #FFF;
        transition: all 0.25s ease;
        -webkit-transition: all 0.25s ease;
    }
    
    #header-logo {
        position: absolute;
        width: 429px;
        top: 25px;
        left: 40px;
        transition: all 0.25s ease;
        -webkit-transition: all 0.25s ease;
    }

    #header-logo img{
        width: 429px;
        transition: all 0.25s ease;
        -webkit-transition: all 0.25s ease;
    }
    
    .header-fix {
        height: 80px;
    }
    
    .header-fix #header-logo {
        width: 319px;
        top: 20px;
    }
    
    .header-fix #header-logo img {
        width: 319px;
    }
    

/* !naviWrap メニュー
---------------------------------------------------------- */
    #naviWrap {
        position: absolute;
        width: 300px;
        top: 40px;
        right: 0;
        transition: all 0.25s ease;
        -webkit-transition: all 0.25s ease;
    }

    #naviWrap > ul {
        margin: 0 auto;
        padding:0px;
    }

    #naviWrap > ul > li {
        margin:0 40px 0 0;
        padding:0;
    }
    
    #naviWrap > ul > li > a {
        font-size: 18px;
    }
    
    .header-fix #naviWrap {
        top: 30px;
    }
    
/* !contents　コンテンツ部分の共通設定
---------------------------------------------------------- */		
    #contents{
        width:100%;
        margin:0 auto;
        padding: 100px 0 0 0;
    }
    
    a { 
        opacity: 1;
        filter: alpha(opacity=100);
        -ms-filter: "alpha(opacity=100)";
        zoom: 1;
        transition: opacity 0.5s ease;
    }


/* !サブページ　タイトル
---------------------------------------------------------- */
    #sub-page-title {
        width:100%;
        height: 200px;
        margin: 0 auto;
        padding: 80px 0 0 20px;
        background: url(../images/title_bg.jpg) top center no-repeat;
        background-size: cover;
    }
    
    #sub-page-title > h1 {
        width: 960px;
        margin: 0 auto;
        text-align: left;
        font-size: 40px;
        color: #21548c;
        letter-spacing: 0.1em;
    }
    

/* !パンくず
---------------------------------------------------------- */
    #pankuzu {
        width: 960px;
        margin: 0 auto;
        padding: 20px 0 0 20px;
        font-size: 14px;
    }
    
    #pankuzu a {
        text-decoration: underline;
    }
    
    
/* !フッター前の画像
---------------------------------------------------------- */ 
    .btm-img {
        position: relative;
        width: 100%;
        margin: 0 auto;
        z-index: 1;
    }
    
    .btm-img > img {
        width: 100%;
        margin: 0 auto;
    }
    
    
/* !footer フッター
---------------------------------------------------------- */
    footer {
        position: relative;
        width:100%;
        margin: 0;
        padding: 70px 0 0 0;
        text-align: center;
        z-index: 1;
    }
    
    footer > a {
        display: block;
        width: 430px;
        margin: 0 auto 20px auto;
    }
    
    footer > a > img {
        width: 430px;
        margin: 0 auto;
    }
    
    
    footer > address {
        width: 100%;
        margin: 70px auto 0 auto;
        padding: 5px 0;
        text-align: center;
        font-size: 12px;
        color: #FFF;
        background-color: #21548c;
    }
    
    
/* !page-top
---------------------------------------------------------- */
    #pageTop {
        display:none;
        position: fixed;
        bottom: 70px;
        right: 30px;
        z-index:100;
    }

    #pageTop img {
        width: 60px;
        height:60px;
    }

    #pageTop a {
        width: 60px;
        height:60px;
        text-align: center;
        display: block;
    }
    #pageTop a:hover {
        filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=85);
        opacity: 0.85;
    }

}

/*===============================================
●画面の横幅が640px以下(スマホのみ)
===============================================*/
@media screen and (max-width: 640px) {

#wrapper {
	width:100%;
	height:100%;
	display:block;
	position:relative;
}
	
/* !共通
---------------------------------------------------------- */
.spNone{
	display:none;
	}
	
.sp-list-flex{
	display:-webkit-box !important;
	display:-moz-box !important;
	display:-ms-box !important;
	display:-webkit-flexbox !important;
	display:-moz-flexbox !important;
	display:-ms-flexbox !important;
	display:-webkit-flex !important;
	display:-moz-flex !important;
	display:-ms-flex !important;
	display:flex !important;
	-webkit-box-lines:multiple !important;
	-moz-box-lines:multiple !important;
	-webkit-flex-wrap:wrap !important;
	-moz-flex-wrap:wrap !important;
	-ms-flex-wrap:wrap !important;
	flex-wrap:wrap !important;
}
    
		
/* !スマホ用ヘッダー
---------------------------------------------------------- */
    header {
        width:100%;
        min-width: 300px;
        height:60px;
        padding:0px;
        position:fixed;
        z-index:99999;
        top:0;
        background-color: #FFF;
    }
    
    #header-logo {
        float:left;	
        width:250px;
    }

    #header-logo img{
        width:250px;
        margin: 15px 0 0 10px;
    }

    #sp-header {
        float:right;
        width: 35px;
        margin: 17px 15px 0 0;
        padding:0;
    }
    
    #sp-header img {
        width: 35px;
    }


/* !スマホ用メニュー
---------------------------------------------------------- */
     #naviWrap {
        display: none;
        position:fixed;
        width: 100%;
        height: 100%;
        z-index: 99999;
        top: 0;
        right: 0;
        box-sizing:border-box;
    }
        
    #navi {
        position: absolute;
        width:50%;
        height: 100%;
        top: 0;
        right: 0;
        background-color: #57a8e6;
    }
    
    #navi li{
        position: relative;
        font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", Arial, Helvetica, Verdana, sans-serif;
        width:100%;
        height:60px;
        margin: 0;
        padding: 0;
        text-align: left;
        box-sizing:border-box;
        border-bottom: #FFF 1px solid;
    }
    
    #navi li a{
        display: block;
        height: 60px;
        padding: 20px 0 0 15px;
        font-size: 16px;
        text-decoration:none;
        color:#FFF;
        letter-spacing: 0.2em;
    }
    
    #navi li:nth-of-type(1){
        height: 80px;
        padding: 15px 20px 0 0;
        text-align: right;
    }
    
    #navi li:nth-of-type(1) img{
        width: 25px;
    }
    
    .navi-fixed {
        height: 100%;
        overflow: hidden;
    }
        
/* !contents　コンテンツ部分の共通設定
---------------------------------------------------------- */		
    #contents{
        width:100%;
        margin:0 auto;
        padding: 60px 0 0 0;
    } 
    
    
/* !サブページ　タイトル
---------------------------------------------------------- */
    #sub-page-title {
        width:100%;
        height: 100px;
        margin: 0 auto;
        padding: 36px 0 0 20px;
        background: url(../images/title_bg_sp.jpg) top center no-repeat;
        background-size: cover;
    }
    
    #sub-page-title > h1 {
        margin: 0 auto;
        text-align: left;
        font-size: 29px;
        color: #21548c;
        letter-spacing: 0.1em;
    }


/* !フッター前の画像
---------------------------------------------------------- */ 
    .btm-img {
        position: relative;
        width: 100%;
        margin: 0 auto;
        z-index: 1;
    }
    
    .btm-img > img {
        width: 100%;
        margin: 0 auto;
    }
    
    
/* !footer フッター
---------------------------------------------------------- */
    footer {
        position: relative;
        width:100%;
        margin: 0;
        padding: 35px 0 0 0;
        text-align: center;
        z-index: 1;
    }
        
    footer > a {
        display: block;
        width: 302px;
        margin: 0 auto 10px auto;
    }
    
    footer > a > img {
        width: 302px;
        margin: 0 auto;
    }
    
    footer > address {
        width: 100%;
        margin: 60px auto 0 auto;
        padding: 3px 0;
        text-align: center;
        font-size: 9px;
        color: #FFF;
        background-color: #21548c;
    }


/* !page-top
---------------------------------------------------------- */
    #pageTop {
        display:none;
        position: fixed;
        bottom: 50px;
        right: 10px;
        z-index:100;
    }

    #pageTop img {
        width: 40px;
    }

    #pageTop a {
        width: 40px;
        text-align: center;
        display: block;
    }


}