@charset "UTF-8";

/* ウィンドウ幅が0〜768pxの場合に適用するCSS */
@media screen and ( max-width:768px ){
/* 共通
---------------------------------------------------- */
* 			{
	margin:0;
	padding:0;
}
body		{
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
	font-size: 16px;
	letter-spacing: 0em;
	font-weight: normal;
    line-height: 1.6em;
    animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation: fadeIn 2s ease 0s 1 normal;
}
@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}
@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}
.pc { display: none !important; }
.sp { display: block !important; }
h1{}
h2{}
h3{}
section{
    width: 100%;
}
img{
    width: 100%;
}

/* ヘッダー*/	
header{
    width: 100%;
    background-image: url(../images/sp/bk-header.jpg);
    background-repeat: no-repeat;
    background-size: auto 100%;
    height: 90vw;
    background-position: center top;
    margin-left: auto;
    margin-right: auto;
    z-index: 1;
    margin-bottom: 0px;
}
.header_name{
    width: 65%;
    padding-top: 10px;
    padding-left: 10px;
    z-index: 1;
    margin-bottom: 0px;
    padding-bottom: 10px;
}
	
/* グローバルナビ通常 */
.site-header,
.contact,
.contact img,
.fb-icon,
.line-icon,
.gnav,
.gnav__menu,
.gnav__menu__item,
.gnav__menu__item a,
.gnav__menu__item_fb,
.gnav__menu__item_fb img,
.sec_point,
.point_button{
    display: none;
}	

/* グローバルナビ固定 */
#headbar,
#headbar .hnav-logo,	
#headbar .hnav-logo img,
#headbar .hnav,	
#headbar .hnav__menu,
#headbar .hnav__menu img,
#headbar .hnav__menu__item,
#headbar .hnav__menu__item a
	{
    display: none;
	}
		
/* スマホ用ハンバーガーメニュー */
nav.snav {
    position: fixed;
    z-index: 2;
    top: 0;
    left: 0;
    background: #fff;
    color: #000;
    text-align: center;
    transform: translateY(-100%);
    transition: all 0.6s;
    width: 100%;
}
nav.snav ul {
    background-color: #d4e8f5;
    margin: 0 auto;
    padding: 0;
    width: 100%;
}
nav.snav ul li {
    list-style-type: none;
    padding: 0;
    width: 100%;
    border-bottom: 1px solid #D6D6D6;
}
nav.snav ul li a {
    display: block;
    color: #3a8fce;
    padding: 15px 0;
}
/* このクラスを、jQueryで付与・削除する */
nav.snav.active {
    transform: translateY(0%);
}
.snavToggle {
    display: block;
    position: fixed;    /* bodyに対しての絶対位置指定 */
    right: 0px;
    top: 0px;
    width: 70px;
    height: 64px;
    cursor: pointer;
    z-index: 3;
    text-align: center;
    background-color: #3a8fce;
}
.snavToggle span {
    display: block;
    position: absolute;    /* .navToggleに対して */
    width: 45px;
    border-bottom: 6px solid #e6e400;
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    transition: .35s ease-in-out;
    left: 12.5px;
}
.snavToggle span:nth-child(1) {
    top: 12px;
}
.snavToggle span:nth-child(2) {
    top: 28px;
}
.snavToggle span:nth-child(3) {
    top: 43px;
}
/* 最初のspanをマイナス45度に */
.snavToggle.active span:nth-child(1) {
    top: 28px;
    left: 12.5px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
/* 2番目と3番目のspanを45度に */
.snavToggle.active span:nth-child(2),
.snavToggle.active span:nth-child(3) {
    top: 28px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}	
	
.maintitle{
    background-image: url(../img/new/sub/h2_bk.png);
    background-repeat: no-repeat;
    background-position: left top;
    padding-top: 0px;
    height: 120px;
    width: 100%;
    background-size: 100% 120px;
}
.maintitle img{
    height: 60px;
    width: auto;
    margin-top: 30px;
    margin-left: 10%;
    margin-right: auto;
}	

/* ごあいさつ */	
.greeting-title{
    display: none;
}
 #aco-greeting{
padding:4px;
background:#3A8FCE;
cursor:pointer;
}
#aco-greeting span{
    display: block;
    background-color: #3A8FCE;
    width: 100px;
    margin: 7px auto 3px;
}
#aco-greeting.bg02 span{
    background-color: #3A8FCE;
}
#aco-greeting div{
    padding: 10px 5px 50px;
    display: none;
}
    
/* おぎわら貴幸の今 */
.now-title{
    width: 65%;
    margin: 0px auto;
    padding: 0px 0px 20px;    
}
.fb-box{
    width: 85%;
    margin-right: auto;
    height: auto;
    margin-bottom: 50px;
    margin-left: auto;
}
.fb-title{
    width: 40%;
    margin: 0px auto 10px;
    margin-left: auto;
    margin-right: auto;
}
.ch-box{
    width: 350px;
    margin-left: auto;
    margin-right: auto;
}
.ch-youtube{
    width: 350px;
    height: 197px;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
}
.ch-title{
    width: 55%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
}

/* 4つの想い */	
.think-box{
    width: 100%;
    padding-bottom: 30px;
}
.think-title{
    width: 55%;
    margin: 10px auto 0px;
    padding: 0px 0px 20px;
}
.think-item{
    width: 80%;
    margin-bottom: 20px;
    clear: both;
    margin-left: auto;
    margin-right: auto;
}
.think-view{
    width: 35%;
    clear: both;
    margin-left: auto;
    margin-right: auto;
}

/* プロフィール */	
.profile-box,
.profile-title,
.profile-list,
.profile-list dl,
.profile-list dt,
.profile-list dd,
.profile-view{
    display: none;
}

/* 後援会のご案内 */	
.support-box,
.support-title,
.support-text,
.support-tel,
.support-contact,
.support-ogiwara{
    display: none;
}

/* フッター */
footer{
    background-color: #FFFFFF;
    width: 100%;
}
.footer-logo{
    width: 50%;
    margin: 30px auto 20px;
}
.footer-text{
    text-align: center;
    width: 100%;
    margin: 0px auto 20px;
}
.footer-map{
    width: 90%;
    margin: 0px auto 20px;
}
.copyright{
    background-color: #595858;
    width: 100%;
    padding: 20px 0px 20px 0px;
    color: #BFBFBF;
    text-align: center;
    font-size: 70%;
}
	
/* pageTop */
#page-top {
    position: fixed;
    bottom: 50px;
    right: 20px;
    font-size: 70%;
}
#page-top a {
    width: 60px;
    display: block;
}
#page-top a:hover {
    text-decoration: none;
}

/* 共通
---------------------------------------------------- */
.pb10{
	padding-bottom: 10px;
}
.pb20{
	padding-bottom: 10px;
}
.pb30{
	padding-bottom: 20px;
}
.pb40{
	padding-bottom: 20px;
}
.pb50{
	padding-bottom: 20px;
}
.pb100{
	padding-bottom: 30px;
}
.pt10{
	padding-top: 10px;
}
.pt20{
	padding-top: 10px;
}
.pt30{
	padding-top: 20px;
}
.pt40{
	padding-top: 20px;
}
.pt50{
	padding-top: 20px;
}
.pt100{
	padding-top: 30px;
}
.pt150{
	padding-top: 50px;
}
.pbt10{
	padding-bottom: 10px;
	padding-top: 10px;
}
.pbt20{
	padding-bottom: 10px;
	padding-top: 10px;
}
.pbt30{
	padding-bottom: 20px;
	padding-top: 20px;
}
.pbt40{
	padding-bottom: 20px;
	padding-top: 20px;
}
.pbt50{
	padding-bottom: 20px;
	padding-top: 20px;
}
.pbt100{
	padding-bottom: 30px;
	padding-top: 30px;
}
.wrapper{
    width: 100%;
    height: auto;
    }
.bk-blue{
    background-color: #3A8FCE;
    color: #FFFFFF;
    text-align: left;
    }
.bk-aqua{
    background-color: #D4E8F5;
}
.bk-lime{
    display: none;
}
.bk-gray{
    background-color: #595858;
    color: #FFFFFF;
}
.bk-think{
    background-image: url(../images/sp/bk-think.png);
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 100% auto;
    height: auto;
    background-color: #006CC6;
    }
.bk-profile{
    display: none;
    }
.w960{
    width: 96%;
    margin: 0px auto;
}    
.w900{
    width: 96%;
    margin: 0px auto;
}    
.w750{
    width: 96%;
    margin: 0px auto;
}
.indent{
    text-indent: 1em;
}
.banner-area{
	width: 100%;
	clear: both;
	height: auto;
}
.banner-box50 img{
    width: 50%;
    height: auto;
    float: left;
}
}
