/*
Theme Name: hikarishoken Child Theme
Template: hikarishoken
Description: test
Version: 1.0.0
*/

@media screen and (max-width: 767px) {
	.responsive-img {
        width: 100%; /* スマートフォンでの画像の幅 */
        height: auto; /* アスペクト比を維持 */
        /* 中央揃えにしたい場合 */
        //display: block;
        //margin-left: auto;
        //margin-right: auto;
	}
	body {
		min-width: 100vw;
	}
	#wrapper {
		width: 100vw;
	}
	
	/*--------------------------------------------------------------
	1.0.3 ヘッダの構造
	--------------------------------------------------------------*/
	#masthead {
		border-top: #d01430 solid 4px;
		background-color: #fff;
		width: 100vw;//1400px;
		height: 60px;//80px;
		margin: 0 0;//0 -220px;
		position: fixed;
		top: 0px;
		z-index: 10;
	}
	.logged-in #masthead {
		top: 32px;
	}
	#masthead #header_inner {
		width: 100vw;//960px;
		margin: 0 auto;
		overflow: hidden;
	}
	#masthead #header_inner #header_logo {
		width: 50vw;//316px;
		margin: 8px 0 0 4px;//16px 0 0 12px;
		float: left;
	}
	/*ヘッダー中央画像右文字*/
	#masthead #header_inner #header_p01 {
		display:none;
	}
	#masthead #header_inner #header_risk {
		//display:none;
		width: 30vw;
		float: left;
		font-size: 12px;
		font-size: .75rem;
		//padding-top: 8px;
		//padding-left: 8px;
		margin:8px 0 0 8px; 
	}
	/*ヘッダー右「お問い合わせはこちら」*/
	#masthead #header_inner #header_contact {
		display:none;
	}

	/*--------------------------------------------------------------
	　ハンバーガーメニュー（スマホ）
	--------------------------------------------------------------*/
	
	.hamburger a {
		font-family: "Noto Serif JP",sans-serif;
		/*font-family: "游ゴシック Medium", YuGothic, "Yu Gothic", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;*/
		text-decoration: none;
	}
	.hamburger {
		display: block;
    		padding:0;
    		/*margin-left:auto;*/
		float: right;
    		
    		position: relative;
    		z-index: 10;
    		height: 56px;
    		width: 58px;
    		border: none;
    		background-color: transparent;
	}
	.hamburger.-active .hamburger__line {
    		background-color: transparent;
	}
	.hamburger.-active .hamburger__line::before {
    		top: 0;
    		transform: rotate(45deg);
	}
	.hamburger.-active .hamburger__line::after {
    		top: 0;
    		transform: rotate(-45deg);
	}
	.hamburger.-active .hamburger__text::before {
  		content: '閉じる';
	}
	.hamburger__line {
    		display: block;
    		height: 2px;
    		position: absolute;
    		top: 22px;
    		left:50%;
    		transform: translateX(-50%);
    		width: 22px;
    		background-color: #172e59;
    		transition: 0.4s;
	}
	.hamburger__line:before,
	.hamburger__line:after {
    		content: "";
    		display: block;
    		height: 100%;
    		position: absolute;
    		width: 100%;
    		background-color: #172e59;
    		transition: inherit;
	}
	.hamburger__line:before {
    		top: -6px;
	}
	.hamburger__line:after {
    		top: 6px;
	}
	.hamburger__text {
    		position: absolute;
    		bottom: 8px;
    		left: 50%;
    		transform: translateX(-50%);
    		width: 100%;
	}
	.hamburger__text::before {
    		content: "メニュー";
    		text-align: center;
    		color: #172e59;
    		font-size: 10px;
    		font-weight: 900;
	}
	/*
	.header {
  		width: 300px;
	}*/
	.header__nav-area {
    		position: fixed;
    		top: 0;
    		left: -100%;
    		z-index: 9;
    		height: 100vh;
    		width: 100vw;//300px;
    		visibility: hidden;
    		//padding-top: 60px;
    		margin-top: 60px;
    		background-color: #fff;
    		transition: 0.4s;
	}
	.header__nav-area.-active {
    		left: 0;
  		visibility: visible;
	}
	.global-navigation {
		border-top:4px solid #d01430;
    		padding-top: 20px;//40px;
	    	padding-right: 25px;
	    	padding-bottom: 120px;
	    	padding-left: 25px;
	}
	.global-navigation__list{
		margin-left:10px;
		margin-right:10px;
		padding-left:10px;
		padding-right:10px;
	}
	.global-navigation__list > li {
		list-style: none;/*「・」非表示*/
		padding-top: 20px;
		padding-bottom: 5px;//20px;
		border-bottom: 2px solid #e7e9ee;
	}
	.global-navigation__list > li + li {
	 	margin-top: 20px;
	}
	.global-navigation__link {
		text-decoration:none;
		display: flex;
    		align-items: center;
		justify-content: space-between;
		color: #172e59;
		font-weight: 900;
		transition: color 0.4s;
		font-size: 0.875rem;
	}
	/*ハンバーガーメニューのテキスト*/
	.menu-prefix{
		font-size:18px;
		color:#555555
	}
	.menu-suffix {
		font-size:12px;
		color:#c0c0c0;//#e7e9ee;
	}
	.global-navigation__link.-accordion {
    		position: relative;
    		background: none;
    		border: none;
    		-webkit-appearance: none;
    		-moz-appearance: none;
    		appearance: none;
    		width: 100%;
    		padding: 0;
	}
	.global-navigation__link.-accordion::after {
    		content: '';
    		display: block;
    		height: 12px;
    		position: absolute;
    		top: 50%;
    		right: 5px;
    		width: 2px;
    		background-color: #ed3242;
    		transform: translateY(-50%);
    		transition: transform 0.4s;
	}
	.global-navigation__link.-accordion::before {
    		content: '';
    		display: block;
    		height: 2px;
    		position: absolute;
    		top: 50%;
    		right: 0;
    		width: 12px;
    		background-color: #ed3242;
    		transform: translateY(-50%);
	}
	.global-navigation__link.-active::after {
		transform: translateY(-50%) rotate(-90deg);
	}
	.accordion {
    		height: 0;
    		overflow: hidden;
    		visibility: hidden;
    		transition: 0.4s;
	}
	.accordion.-active {
    		height: auto;
    		padding-top: 30px;
    		visibility: visible;
	}
	.accordion__list li {
		list-style: none;/*「・」非表示*/
    		font-size: 0.75rem;
	}
	.accordion__list li + li {
     		margin-top: 21px;
	}
	.accordion__link {
    		color: #172e59;
	}
	

	/*--------------------------------------------------------------
	1.0.3.1-top クロスフェードの構造
	--------------------------------------------------------------*/
	#top_xfade {
		width: 100vw;
		height: 38.6vw;
		margin: 15vw 0 0;//80px 0 0;
		position: relative;
	}
	#top_xfade div {
		display:none;
	}
	/*--------------------------------------------------------------
	1.0.5 中央部の構造
	--------------------------------------------------------------*/
	#content {
		width: 100vw;//1400px;
		margin: 0;//0 -220px;
	}
	/*-------------------------------------------------------------
	1.0.4 グローバルナビの構造
	--------------------------------------------------------------*/
	.main-navigation {
		display: none; 
	}
	/*--------------------------------------------------------------
	1.0 強みのCSS　front-page.css
	--------------------------------------------------------------*/
	#content #forte {
		display:none;
	}
	/*スマホ用トップ画像下文章*/
	#content #forte_sp{
		background-color: #fff ;
		margin-top: 0;
		padding: 20px 20px 20px;
		color: #000;
	}
	/*--------------------------------------------------------------
	2.0 主要コンテンツリンクのCSS
	--------------------------------------------------------------*/
	#feature {
		background-color: #eaeaea ;
		padding: 38px 0;
	}
	#feature #feature_inner {
		margin: 0 auto;
		width: 90vw;//940px;
		overflow: hidden;
	}
	#feature #feature_inner #feature_holder {
		margin-right: 0px;/-20px;
	}
	#feature #feature_inner .feature_panel {
		display: inline;
		display: inline-block;
		width:90vw;//460px;
		height: 100px;//260px;
		float: left;
		margin-right: 0px;//20px;
		margin-bottom: 20px;//20px;
		background-color: #d01430 ;
		background-repeat: no-repeat;
		color: #fff;
	}
	#feature #feature_inner .feature_right {
		background-position: top left;
	}
	#feature #feature_inner .feature_right_sp {
		background-position: top left;
		/*スマホの時はfeature_leftのかわりにこちらを使用する*/
	}
	#feature #feature_inner .feature_left {
		display:none;
		/*background-position: top right;*/
	}
	#feature #feature_inner .feature_right .feature_texts {
		margin-left: 90px;//230px;
	}
	#feature #feature_inner .feature_right_sp .feature_texts {
		margin-left: 90px;//230px;
		/*スマホの時はfeature_leftのかわりにこちらを使用する*/
	}
	#feature #feature_inner .feature_aboutus {
		background-size: contain;
	}
	#feature #feature_inner .feature_staff {
		background-size: contain;
	}
	#feature #feature_inner .feature_message {
		background-size: contain;
	}
	#feature #feature_inner .feature_blog {
		background-size: contain;
	}
	/*ROOMSイメージ画像*/
	#feature #feature_inner .feature_consul {
		background-size: contain;
	}
	#feature #feature_inner .feature_panel .feature_texts {
		width: 300px;//230px;
		height: 100px;//260px;
		padding: 10px 6px 8px 10px;//14px  14px 14px 18px;
		position: relative;
	}
	#feature #feature_inner .feature_panel .feature_texts h3 {
		width:62vw;
		font-size: 16px;//22px;
		font-size: .95rem;/1.375rem;
		margin: 0;
		font-weight: normal;
	}
	#feature #feature_inner .feature_panel .feature_texts p {
		font-size: 12px;//14px;
		font-size: .778rem;//.875rem;
		line-height: 1.7142857;
		letter-spacing: .0714285em;
		margin: 8px 0 0;
		width:62vw;
	}
	#feature #feature_inner .feature_panel .feature_texts a {
		/*スマホのときはMOREボタンを透明にしてメニューにかぶせる*/
		display: block;
		position: absolute;
		top: 0px;//210px;
		left: -100px;//106px;
		width: 85vw;//100px;
		height: 100px;//26px;
		background-color: #fff;
		opacity: 0;//透明
	}
	/*--------------------------------------------------------------
	1.0.6 フッターの構造
	--------------------------------------------------------------*/
	#colophon {
		width: 100vw;//1400px;
		margin: 0 0;//0 -220px;
		padding: 0;
		background: #fff url(img/footer_back.gif) repeat-x;
	}
	#colophon #footer_menu {
		width: 90vw;//960px;
		margin: 0 auto;
		padding: 22px 12px 12px 10px;
		overflow: hidden;
		display: table;
	}
	#colophon #footer_menu .footer_menu_box {
		border-left: #d01430 solid 1px;
		padding-left: 10px;
		display: table-cell;
	}
	#colophon #footer_menu p {
		margin: 0;
		padding: 0;
	}
	#colophon #footer_menu .logo {
		line-height: 1;
	}
	#colophon #footer_menu .large {
		color: #333;
		font-size: 14px;
		font-size: .875rem;
		font-weight: bold;
		line-height: 1.2857142;
	}
	#colophon #footer_menu .medium,
	#colophon #footer_menu .medium a {
		color: #333;
		font-size: 13px;
		font-size: .8125rem;
		font-weight: bold;
	}
	#colophon #footer_menu .small1,
	#colophon #footer_menu .small1 a {
		color: #333;
		font-size: 12px;
		font-size: .75rem;
	}
	#colophon #footer_menu .small2,
	#colophon #footer_menu .small2 a {
		color: #333;
		font-size: 12px;
		font-size: .75rem;
		padding-left: 1em;
	}
	#colophon #footer_menu a:hover,
	#colophon #footer_menu a:active {
		text-decoration: none;
	}
	#colophon #footer_menu .mt4 {
		margin-top: 4px;
	}
	#colophon #footer_menu .mt20 {
		margin-top: 20px;
	}
	#colophon #footer_menu #footer01 {
		padding: 4px 10px 4px 10px;
	}
	#colophon #footer_menu #footer02 {
		display:none;
		/*padding: 10px;*/
	}
	#colophon #footer_menu #footer03 {
		display:none;
		/*padding: 10px;*/
	}
	#colophon #footer_menu #footer04 {
		padding: 0;//0 0 0 12px;
		width: 0;/13px;
	}
	#colophon #footer_menu #footer_contact_box {
		display:none;
	}
		#colophon #footer_address {
		background-color: #d01430;
		padding: 8px 10px;
		color: #fff;
		overflow: hidden;
	}
	#colophon #footer_address a {
		color: #fff;
		text-decoration: none;
	}
	#colophon #footer_address #footer_address_inner {
		width: 960px;
		margin: 0 auto;
	}
	#colophon #footer_address #footer_address_inner .utility {
		display:none;
	}
	#colophon #footer_address #footer_address_inner .copyright {
		font-size: 12px;
		font-size: .55rem;
		line-height: 1;
		text-align: right;
		padding: 0 10px 0 0;
		margin: 0;
		float: left;//right;
	}
	/*--------------------------------------------------------------
	1.0.7 ページのトップへ戻るボタン
	--------------------------------------------------------------*/
	#topagetop {
		margin: 0;
		padding: 0;
		background-color: #fff;
		position: fixed;
		right: 20px;
		bottom: 50px;
		width: 35px;
		height: 35px;
		outline: none;
	}
	/*--------------------------------------------------------------
	3.0 商品一覧のCSS
	--------------------------------------------------------------*/
	#service {
		background-color: #fff ;
		padding: 24px 0;
	}
	#service #service_inner {
		margin: 0 auto;
		width: 90vw;//940px;
	}
	#service #service_inner h2 {
		color: #d01430;
		font-size: 16px;
		font-size: 1rem;
		line-height: 1.125;
		font-weight: normal;
		/*padding-bottom: 6px;*/
		/*background: url(../img/common_h2back.gif) bottom left no-repeat;*/
		position: relative;
	}
	#service #service_inner ul {
		margin: 24px -14px 4px -6px;
		padding: 0;
		overflow: hidden;
		list-style: none;
	}
	#service #service_inner ul li {
		margin: 0;
		float: left;
	}
	#service #service_inner .service_pages {
	}
	#service #service_inner .service_pages li {
		/*padding-right: 9px;*/
		padding:0 4px 0;
		width: 45vw;//240px;
		height: 25vw;//132px;
	}
	#service #service_inner .service_banners {
		margin: 14px -19px 4px -1px;
	}
	#service #service_inner .service_banners li {
		width: 240px;
	}
	#service #service_inner .service_banners .two_units {
		width: 480px;
	}
	#service #service_inner .service_banners .three_units {
		width: 320px;
		padding-right: 0;
		margin-right: -2px;
	}
	#service #service_inner .service_banners p {
	}
	#service #service_inner .service_banners .service_banners_caption_area {
		padding-right: 1rem;
	}
	#service #service_inner .service_banners .service_banners_linklist_area {
		padding-left: 0.625rem;
	}
	#service #service_inner .service_banners p {
		font-size: 14px;
		font-size: 0.875rem;
		margin-top: 0;
		margin-bottom: 0;
	}
	#service #service_inner .service_banners p.ali_center {
		text-align: center;
	}
	#service #service_inner .service_banners a,
	#service #service_inner .service_banners a img {
		outline: none;
	}
	#service #service_inner .service_banners .service_banners_linklist_area p {
		text-indent: -1.3em;
		padding-left: 1.3em;
	}
	#service #service_inner .service_banners .service_banners_linklist_area p:not(:first-child) {
		margin-top: 6px;
	}
	#service #service_inner .service_banners .service_banners_linklist_area p span {
		color: #d01430;
	}

	/*--------------------------------------------------------------
	4.0 新着情報のCSS（提携パートナーからのお知らせ）
	--------------------------------------------------------------*/
	#news {
		background-color: #d01430 ;
		padding: 24px 0 38px;//48px 0;
	}
	#news #news_inner {
		margin: 0 auto;
		width: 90vw;//940px;
	}
	#news #news_inner h2 {
		position: relative;
		height: 60px;//41px;
		margin-top: 0;
		margin-bottom: 10px;
	}
	#news #news_inner h2 .more {
		background-color: #fff;
		width: 82px;
		height: 26px;
		position: absolute;
		top: 4px;
		right: 0;
	}
	#news #news_inner table {
		color: #fff;
		margin-bottom: 0;
	}
	#news #news_inner table tr {
		border-bottom: #fff solid 1px;
	}
	#news #news_inner table tr th,
	#news #news_inner table tr td {
		font-size: 13px;
		font-size: .8125rem;
		font-weight: normal;
		text-align: left;
		vertical-align: top;
		vertical-align: baseline;
		padding: 12px 12px 10px 12px;
	}
	#news #news_inner table tr th {
		width: 120px;
	}
	#news #news_inner table tr td a,
	#news #news_inner table tr td a:link,
	#news #news_inner table tr td a:hover,
	#news #news_inner table tr td a:active,
	#news #news_inner table tr td a:visited {
		color: #fff;
	}
	/*トップページ　リスク・手数料バナー　↓PC用非表示*/
	#risk_banner {
		display:none;
	}
	#risk_banner_sp {
		position:absolute;
		top:0px;
		//right:-50px;
	}


}
@media screen and (min-width: 768px) {
	/*PC表示の時はハンバーガーメニュー非表示*/
	.header__inner{
		display:none;
	}
	/*スマホ用トップ画像した文章非表示*/
	#content #forte_sp{
		display:none;
	}
	#feature #feature_inner .feature_right_sp {
		display:none;;
		/*スマホの時はfeature_leftのかわりにこちらを使用する*/
	}
	/*トップページ　リスク・手数料バナー*/
	#risk_banner {
		position:absolute;
		top:350px;
		right:-50px;
	}
	#masthead #header_inner #header_risk {
		display:none;
	}
}