/* ==========================================================================
   基本スタイル・Bootstrap変更・フォント読み込み
   ========================================================================== */

html,button,input,select,textarea { color: #222;}

::-moz-selection {
    background: #f2c2c9;
    color: #a4003a;
    text-shadow: none;
}
::selection {
    background: #FDB6E0;
    color: #0A2197;
    text-shadow: none;
}


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

.centered {text-align: center}

/* ==========================================================================
   共通スタイル
   ========================================================================== */

html,body {height: 100%; font-family: helvetica, arial,"メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro", sans-serif;
 font-weight: 400; font-size: 16px; color: #000;
    -webkit-font-smoothing: antialiased; -webkit-overflow-scrolling: touch;}

#wrap{width:100%; margin:0; padding:0; background:url(../img/bg.jpg);}

h1, h2, h3, h4, h5, h6 { font-weight: 300;}

.img-80{width:80%;}
.img-100{width:100%;}
.m20{margin-top:20px; margin-bottom:20px;}
.m_middle{margin:0 auto;}

#contents{width:80%; max-width:1280px; margin:0 auto;}


/* ==========================================================================
   ヘッダー
   ========================================================================== */

#headerwrap {
	margin: 0 auto;
	text-align:center;
	background-color:#ffffb5;
	padding:30px;
	padding-top:120px;
	padding-bottom:80px;
}

#headerwrap .title{padding-bottom:100px;}
#headerwrap .title img{width:60%; margin:0 auto;}
#headerwrap h1{margin:0; margin-bottom:20px; margin-top:5px;}
#headerwrap h1 img{margin-left:0;}
#headerwrap h2 img{margin-left:50px; width:90%;}

hr{border-top:5px solid #7e0006; width:90%; margin:30px auto; border-radius:3px; }

.profile{width:80%; margin:0 auto; display:flex; flex-wrap:nowrap; padding:0;}
.profile li{width:33%; list-style:none; padding-left:20px; box-sizing:border-box;}
.profile li img{width:100%;}

/* ==========================================================================
   NEWS
   ========================================================================== */
.news{padding:30px; margin:20px auto 30px; background-color:white; border-radius:10px;}
.news h1{ width:100%; margin:0; margin-bottom:5px; margin-top:5px;}
.news dl{overflow-y: scroll; max-height:120px;}
.news dt{ width:3%; float:left; margin-right:30px; text-align:right; padding-left:5px; color:#e85533;}
.news dt, .news dd{box-sizing:border-box; font-size:0.8rem; padding-top:10px; padding-bottom:10px; font-weight:bold;}
.news dd{border-bottom:1px dotted #7e0006; padding-left:50px; color:#7e000b;}

/* ==========================================================================
   お知らせ
   ========================================================================== */
.info{margin:0 auto;}
.info h1{color:#7e000b; margin:5px; margin-top:20px; font-size:1.2rem; font-weight:bold;}

/* ==========================================================================
   ギャラリー
   ========================================================================== */
.garelly{padding:30px; margin:20px auto 30px; background-color:white; border-radius:10px;}
.garelly h2{color:#7e000b; margin:5px; margin-top:20px; font-size:1.1rem; font-weight:bold;}
.garelly ol{width:70%; display:flex; flex-wrap:wrap; padding:0; margin:0 auto;}
.garelly li{list-style:none; float:left; width:50%; box-sizing:border-box; padding:50px;}
.garelly li h3{color:#7e000b; text-align: center; font-size: 0.9rem;}

/* ==========================================================================
   お問い合わせ
   ========================================================================== */
/*SNS用*/
#home{min-height:150px;width:80%; margin:0 auto;}
.sns{margin:0 auto; width:50%;}
.sns ol{ display:flex; flex-wrap:nowrap; padding:0;}
.sns li{list-style:none; padding-right:10px; align-items: center; padding:30px; width:33%; box-sizing: border-box;}
.sns li img{width:100%;}
#home img{padding-top:17px; padding-bottom:17px; margin-left:0;}


.copy {width:100%; color:#6d6e60; padding: 20px; padding-top:0; position:relative; text-align: center;}
.copy h4 {font-size:0.9rem;}
/* ==========================================================================
   トップへ
   ========================================================================== */
.totop {position:fixed; bottom:30px; right:5px; z-index:9998; width:7%;}
.totop a{ display:block; text-decoration:none;}
.totop img {width:100%; opacity:1;}
/* ==========================================================================
   表示の分岐
   ========================================================================== */
.mobile{display:none;}
.tab{display:none;}

@media only screen and (min-width: 1300px) {

#headerwrap .title img{width:50%; margin:0 auto;}

	
.tw_m{height:750px;}

}

/* ==========================================================================
   ==========================================================================
   タブレット用
   ==========================================================================
   ========================================================================== */
@media only screen and (max-width: 769px) {

.title h1{margin:60px -100% 20px; padding:0 100%; text-align:center;font-size:2.5rem; overflow-x:hidden;}

/*======================ヘッダー==========================*/
#headerwrap{padding-bottom:30px;}
#headerwrap .title img{width:80%;}
/*======================ギャラリー==========================*/
.garelly li{padding:30px;}
/*======================お問い合わせ==========================*/
/*SNS用*/
#home{min-height:150px; width:100%; margin:0 auto;}
.sns{width:80%;}
.sns li{padding:30px;}
.sns li img{width:100%; padding:0;}
    
.garelly{padding:30px; margin:20px auto 30px;}
.garelly ol{width:90%;}
.garelly li{padding:50px;}
    
	
/*表示の分岐*/
.pc{display:none;}
.tab{display:inline;}

}


/* ==========================================================================
   ==========================================================================
   スマホ用
   ==========================================================================
   ========================================================================== */
@media only screen and (max-width: 480px) {
/*共通*/

.title h1{margin:50px -100% 20px; padding:0 100%; text-align:center;font-size:1.5rem;}
#contents{width:90%;}

#headerwrap {margin-bottom:0px;	padding:10px; padding-top:50px; padding-bottom:50px; width: 100%;}
#headerwrap .title img{width:100%;}
#headerwrap .img-80{width:100%!important;}
#headerwrap h2 img{margin-left:5px; width:90%;}
#headerwrap img{width:90%; margin-left:20px;}

hr{border-top:3px solid #7e0006; border-top:3px solid #7e0006; width:100%; margin:15px auto; border-radius:0; }

.profile{width:90%; flex-wrap:wrap;}
.profile li{width:80%; margin:0 auto; padding-left:0; padding-bottom:30px;}
.profile li img{margin-left:0!important;}
    
/*twitter*/
/*
.tw_l, .tw_m, .tw_r{float:none; box-sizing:border-box;}
.tw_l, .tw_r{display:none; border:1px solid red;}
.tw_m{width:90%; margin:0 auto;}
*/
	
/*最新情報*/
.news {margin:10px auto 0; width:90%; padding-top:15px; padding-bottom:15px;}
.news h1{max-width:135px; width:50%;}
.news h2{font-size:0.9rem!important; padding-left:5px;}
.news dl{overflow-y: scroll; max-height:300px;}
.news dt{border:0px!important; padding:0; float:none; width:10%;}
.news dd{padding:0; padding-left:10px;}

.new{background-color:#F9F1FF; color:red; font-size:0.6rem!important;font-weight:normal!important;
line-height:1rem;margin:0!important;padding:0!important;}

/*お知らせ*/
.info{width:90%;}
.info h1{margin:5px; margin-top:20px; font-size:0.9rem; font-weight:bold;}
/*ギャラリー*/
.garelly{width:100%; padding:30px; padding-top:15px; margin:20px auto 30px;}
.garelly h1{max-width:190px; width:80%;}
.garelly h2{margin:5px; margin-top:10px; font-size:0.9rem; font-weight:bold;}
.garelly ol{width:100%; padding:0; margin:0 auto;}
.garelly li{list-style:none; float:none; width:100%; box-sizing:border-box; padding:0px;}
.garelly li h3{color:#7e000b; text-align: center; font-size: 0.9rem;}
.garelly li img{width:100%;}

	
/*SNS用*/
#home{min-height:100px; width:100%; margin:30px auto 0;}
.sns{width:100%; margin:0 auto;}
.sns ol{width:100%; padding-left:0;}
.sns li{padding:20px;}
.sns li img{width:100%; padding:0;}
#home img{margin-left:0;}


/*YouTube埋め込み*/
/*.yt_m{width:95%; margin:0 auto;}
#contactwrap .row{width:100%; margin:0 auto 20px;}
div.iframeWrap { position: relative; margin:0 auto;
    width: 100%; padding-top: 56.25%;}
div.iframeWrap iframe { position:absolute; top: 0; left: 0;
    width: 100%; height: 100%;}
*/
	
/*TOPへ*/
.totop {position:fixed; bottom:30px; right:15px; z-index:9998; width:20%;}
.totop a{ display:block; text-decoration:none;}
.totop img {width:100%; opacity:1;}
	
	
/*表示の分岐*/
.pc{display:none;}
.tab{display:none;}
.mobile{display:inline;}

/*======================float解除==========================*/
.clearfix:after {
content: "."; display: block; height: 0; clear: both; visibility: hidden;
}
.clearfix {display: inline-table;}

/* IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}