@charset "utf-8";
/*

　common.css

*/


html, body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}


div#container {
	margin: 0 auto;
	position: relative;
	width:100%;
	min-width:375px;
	height: auto !important;
	height: 100%;
	min-height: 100%;
	background-color:#DDD;
	font-feature-settings: "palt";/* カーニング調整 */
}


.contents_box img {
	max-width:100%;
	height:auto;
}


.contents_box {
	padding:1.0rem 0;
}




/*photoswipe シェアボタン非表示*/

.pswp__button--share {
	display:none !important;
}




/******************************************************************

　　テスト環境案内表示

******************************************************************/

#testarea {
	background:rgb(25,175,225,0.5);
	position:fixed;
	z-index:10000;
	top:0;
	left:0;
	border-radius:0 0 20px 0;
	cursor:default;
}

#testarea p {
	color:#FFF;
	font-size:1.4rem;
	font-weight:bold;
	padding:5px 50px;
	box-sizing:border-box;
}



/******************************************************************

     フォント指定

******************************************************************/

.font_Montserrat {
	font-family: "Montserrat", serif;
	font-optical-sizing: auto;
}

.font_Montserrat_itaric {
	font-family: "Montserrat", serif;
	font-optical-sizing: auto;
	font-style:italic;
}



/******************************************************************

     文字色

******************************************************************/


.red {
	color:#F00;
}

/******************************************************************

     リンク・ホバー

******************************************************************/

a {
	color:#0FB6C8;
	text-decoration:none;
}

a:hover {
	color:#F39;
}

.hover_zoom {
	display:block;
	width:100%;
	margin:0 auto;
	overflow:hidden;
}
.hover_zoom img {
	transition:1s all;
}
.hover_zoom img:hover{
	transform:scale(1.15,1.15);
	transition:0.5s all;
}



/**/



.trim {
	position:relative;
	overflow:hidden;
}

.trim:before {
	content:"";
	display:block;
	padding-top:100%;
}

.trim img {
	position: absolute!important;
	width:100%!important;
	height: 100%!important;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	object-fit: cover;

}


/*****   *****/




.photo_box {
	position:relative;
	width:100%;
	padding-top:75%;/*4:3*/
	height:auto;
	margin:auto auto;
}

.photo_box img {
	position:absolute;
	top:0;
	left:0;
	width: 100%;
	height: 100%;
	margin:auto auto;
	display: block;
	object-fit: cover;
}












/******************************************************************

    メッセージ

******************************************************************/

/***** ワンポイント強調メッセージ *****/

.common_msg {
	background-color:#FC3;
	width:80%;
	max-width:1280px;
	margin:auto auto;
}

.common_msg p {
	font-size:1.6rem;
	padding:1.0rem;
	margin:1.0rem;
}


@media screen and (max-width : 767px) {
.common_msg {
	width:100%;
}
	
}



/***** 管理者用メッセージ *****/

.admin_msg {
	background-color:#EFEFEF;
	border:5px solid #CCC;
	padding:1.0rem;
}
.admin_msg dl {
	margin:2.0rem 1.0rem;
	padding:0.5rem;
}
.admin_msg dl dt {
	font-weight:bold;
	font-size:1.6rem;
}
.admin_msg dl dt:before {
	content:"\f0eb";
	font-family: FontAwesome;
	font-size:3.0rem;
	vertical-align:middle;
	padding:0 0.5rem 0.5rem 0;
	color:#FC0;
}
.admin_msg dl dd {
	font-size:1.4rem;
	margin:0 0 0.5rem 2.5rem;
}
.admin_msg dl dd input[type="submit"] {
	border:none;
	padding:0.5rem;
	cursor:pointer;
	background-color:#333;
	color:#FFF;
}
.admin_msg dl dd input[type="submit"]:hover {
	background-color:#09F;
}
/***** メッセージ 黄色 *****/

.yellow_msg {
	background-color:#FFC;
	border:5px solid #FC0;
	padding:0.25rem;
	margin:1.0rem 0.75rem;
	text-align:left;
}
.yellow_msg dl {
	margin:1.0rem;
	padding:0.5rem;
}
.yellow_msg dl dt {
	font-weight:bold;
	font-size:1.6rem;
}
.yellow_msg dl dt i {
	font-size:2.0rem;
	vertical-align:middle;
	padding:0 0.5rem 0.5rem 0;
	color:#FC0;
}
/*
.yellow_msg dl dt:before {
	content:"\f0eb";
	font-family: FontAwesome;
	font-size:3.0rem;
	vertical-align:middle;
	padding:0 0.5rem 0.5rem 0;
	color:#FC0;
}
*/


.yellow_msg dl dd {
	font-size:1.5rem;
	margin:0 0 0 2.5rem;
}
/***** メッセージ 赤色 *****/

.red_msg {
	background-color:#FEE;
	border:5px solid #F00;
	padding:0.25rem;
	margin:1.0rem 0.75rem;
}
.red_msg dl {
	margin:1.0rem;
	padding:0.5rem;
}
.red_msg dl dt {
	font-weight:bold;
	font-size:1.6rem;
}
.red_msg dl dt i {
	font-size:2.0rem;
	vertical-align:middle;
	padding:0 0.5rem 0.5rem 0;
	color:#F00;
}
.red_msg dl dd {
	font-size:1.5rem;
	margin:0 0 0 2.5rem;
}
.admin_msg dl dd ul li, .yellow_msg dl dd ul li, .red_msg dl dd ul li {
	margin:0.5rem 0 0 0.5rem;
	list-style:none;
}
.admin_msg dl dd ul li:before, .yellow_msg dl dd ul li:before, .red_msg dl dd ul li:before {
	content:"\f0da";
	font-family: FontAwesome;
	font-size:2.0rem;
	vertical-align:middle;
	padding:0 0.5rem 0.5rem 0;
	color:#F00;
}
/***** エラーメッセージ *****/
.msg {
	border-radius:5px;
	padding:0.5rem;
	margin:0.5rem 0;
	font-size:1.25rem;
}
.msg i {
	margin:0 0.5rem 0 0;
}
.msg_error {
	background-color:#FEE;
	border:1px solid #F00;
	color:#F00;
	font-weight:bold;
}

.msg_error i {
	margin:0 0.5rem;
}


/************************************************************************************/

/*ページ上部 お知らせ*/





#notification {
	background-color:#FF0;
	text-align:center;
}

#notification a {
	width:100%;
	padding:1.2rem;
	line-height:1.2;
	box-sizing:border-box;
	font-size:1.6rem;
	font-weight:500;
	display:block;
	text-decoration:none;
	color:#E80500;
	transition:0.3s ease-in-out 0s;
}

#notification a:hover {
	color:#000;
	background-color:#F93;
	transition:0.3s ease-in-out 0s;
}


#notification a:before {
	content:"\f0a2";
	font-family: FontAwesome;
	font-size:2.1rem;
	padding:0.5rem 0.5rem;
	margin:0 0 0 0.5rem;
	box-sizing:border-box;
	text-decoration:none;
}

#notification a:hover:before {
	content:"\f0a2";
	font-family: FontAwesome;
	font-size:2.1rem;
	padding:0.5rem 0.5rem;
	margin:0 0 0 0.5rem;
	box-sizing:border-box;
	text-decoration:none;
}

#notification a span {
	font-size:2.7rem;
}


/*** スマホ用表示 ***/

@media screen and (max-width : 767px) {

#notification {
	padding:0.25rem 4.0rem 0.25rem 0.25rem;
}
	
#notification a {
	width:100%;
	font-size:1.6rem;
	line-height:2.0rem;
	padding:1.0rem;
}

#notification a span {
	font-size:1.8rem;
}

	
}






/************************************************************************************/





/*ページ上部 お知らせ 請求書ダウンロードなど */

/* request_operation このデザインは不採用 */
#request_operation {
	background-color:#00B900;
	text-align:center;
}

#request_operation a {
	width:100%;
	padding:1.75rem;
	box-sizing:border-box;
	font-size:1.6rem;
	font-weight:500;
	display:block;
	text-decoration:none;
	color:#FFF;
	transition:0.3s ease-in-out 0s;
	line-height:1.75rem;
}

#request_operation a:hover {
	color:#FFF;
	background-color:#0C9;
	transition:0.3s ease-in-out 0s;
}

#request_operation a span {
	font-size:3.4rem;
}

#request_operation a span {
	font-size:3.4rem;
}

#request_operation a i {
	color:#FC0;
	font-weight:500;
}









/* 相対的固定バナー */


.relative_banner {
    position:relative;
    bottom: 0;
    right: 0;
}
.relative_banner a {
	display:block;
    padding:3.25rem 2.0rem;
	background: linear-gradient(225deg, rgba(0, 185, 0, 1), rgba(0, 205, 0, 1));
	background: linear-gradient(90deg, rgba(252, 201, 0, 1) 75%, rgba(247, 164, 7, 1));
	color: #111;/* バナー内の文字色 */
    font-weight: bold;
    text-align: center;
	position: relative;
    z-index: 0;
}

.relative_banner a:before {
	content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
	background: linear-gradient(225deg, rgba(90, 208, 88, 1), rgba(67, 223, 176, 1));
	background: linear-gradient(90deg, rgba(252, 226, 30, 1) 75%, rgba(247, 218, 7, 1));
    opacity: 0;
    transition: opacity 0.5s;
}

.relative_banner a:hover:before {
	opacity: 1;
}

.relative_banner a.banner {
    text-decoration: none;
}

.relative_banner a p {
    display: inline-block;
	margin:0 1.0rem 0 0;
}







/************************************************************************************/

/* 緊急メッセージ */

.urgent {
	padding:2.0rem;
}

.urgent > div {
	max-width: 1260px;
    margin:auto auto;
	padding: 20px 2.0rem;
	background-color:#FEE;
	border:5px solid #F00;
	border-radius:20px;
}

.urgent h2 {
	font-size: 2.0rem;
	margin:0 0 1.0rem 0;
	color:#F00;
}

.urgent dl {
	font-size: 1.6rem;
	font-weight:bold;
	padding:0.5rem;
	border-bottom:1px dashed #F00;
}

.urgent dl:nth-last-child(1) {
	border-bottom:none;
}


.urgent dl dt {
	color:#F00;
}

.urgent dl dd {
}


.urgent a {
	text-decoration:underline;
}






/************************************************************************************/


/**/

.copy {
    margin: 0 auto 10px;
    line-height: 1.2;
	font-size:1.6rem;
    text-align: center;
}
.cta {
    display: inline-block;
    width: 200px;
	padding:0.5rem;
	font-size:1.4rem;
    text-align: center;
    height:;
    line-height:;
    font-size:;
/*    background: linear-gradient(270deg, #333 0%, #333 100%);*/
	background-color:#111;
    box-shadow: 0px 0px 5px #E8AA09;
    border-radius: 25px;
    margin: 0;
	color:#FFF;
}



.relative_banner a:hover .cta {
    box-shadow: 0px 0px 5px #E8AA09; /* ボタンの影 */
/*    background: linear-gradient(270deg, #066 0%, #066 100%);*/
	background-color:#392E00;
}


/*** スマホ用表示 ***/

@media screen and (max-width : 767px) {

.relative_banner a {
	padding:1.25rem 2.0rem;
}

}
/*****/






/* フローティングバナー */


.floating_banner {
    position: fixed;
    z-index: 99999;
    bottom: 0;
    right: 0;
}
.floating_banner a {
	display:block;
	width: 100vw;/* バナーの横幅 */
    padding:1.0rem 2.0rem;
	background: linear-gradient(225deg, rgba(88, 200, 208, 1), rgba(54, 140, 221, 1));
	color: #FFF;/* バナー内の文字色 */
    font-weight: bold;
    text-align: center;
	position: relative;
    z-index: 0;
}

.floating_banner a:before {
	content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
	background: linear-gradient(225deg, rgba(90, 208, 88, 1), rgba(67, 223, 176, 1));
    opacity: 0;
    transition: opacity 0.5s;
}

.floating_banner a:hover:before {
	opacity: 1;
}

.floating_banner a.banner {
    text-decoration: none;
}


/**/

/*** スマホ用表示 ***/

@media screen and (max-width : 767px) {

#request_operation {
	padding:0.25rem 3.0rem 0.25rem 0.25rem;
}
	
#request_operation a {
	width:100%;
	font-size:1.6rem;
	line-height:2.0rem;
	padding:1.0rem;
}	
	
}


/*****/

/******************************************************************

     スマートフォン以外は非表示

******************************************************************/

.sp_view {
	display:none;
}







/******************************************************************

     ヘッダー

******************************************************************/

header {
	position:relative;
}


#header_bar {
	display:flex;
	align-items:center;
	height:75px;
	background-color:#FFF;
}

#header_bar h1 {
	padding:0 1.0rem;
}

img.pdns_logo {
	height:50px;
	width:auto;
	vertical-align:middle;
}

#header_contents {
	display:flex;
	align-items:center;
	margin-left:auto;
}

.login_name {
	font-size:1.4rem;
	padding:0 1.0rem 0 0;
	width:100%;
	text-align:right;
	margin-left:auto;
	display:inline-block;
	vertical-align:middle;
}

.login_name span {
	display:inline-block;
}

/*
#header_bar .login_name .login span:after {
	content:"でログイン中";
}
*/



#header_contents #user_control {
}

#header_contents #user_control ul {
	display:flex;
	justify-content:flex-end;
}

#header_contents #user_control ul li {
	padding:0;
	margin:0 0 0 0;
}

#header_contents #user_control ul li > a {
	text-decoration:none;
	min-width:100px;
	display:block;
	font-size:1.4rem;
	padding:0.1rem 0.5rem;
	text-align:center;
	transition: background 0.1s;
	white-space:nowrap;
	position:relative;
	color:#111;
}

#header_contents #user_control ul li > a:after {
	background:#333;
	content:"";
	width: 100%;
	height: 1px;
	position: absolute;
	left: 0;
	bottom: 0px;
	transform: scale(0, 1);
	transform-origin: left top;
	transition: .25s ease-out;
}

#header_contents #user_control ul li > a:hover {
	color:#111;
}

#header_contents #user_control ul li > a:hover:after {
	left: 0;
	transform: scale(1, 1);	
}

#header_contents #user_control ul li > a i {
	color:#111;
}


/*
#header_contents #user_control ul li > a.user_mypage i {
	color:#FF1C27;
}

#header_contents #user_control ul li > a.user_watchlist i {
	color:#09C;
}

#header_contents #user_control ul li > a.user_login i {
	color:#096;	
}

#header_contents #user_control ul li > a.user_parts-cart i {
	color:#9C3;
}
*/

/*
#header_contents #user_control ul li > a:hover {
	transition: background 0.3s;
}


#header_contents #user_control ul li > a:hover.user_mypage {
	text-decoration:underline;
}
*/
/*
#header_contents #user_control ul li > a:hover.user_watchlist {
	background-color:#36C;
}

#header_contents #user_control ul li > a:hover.user_login {
	background-color:#000;
}

#header_contents #user_control ul li > a:hover.user_parts-cart {
	background-color:#87C71D;
}
*/


/*数字アイコン*/
#header_contents #user_control ul li > a div.count {
	border-radius:9999px;
    background-color: #F69;
    color: #FFF;
    text-align: center;
    min-width: 20px;
    height: 20px;
    line-height: 20px;
    margin: 0 0 0 2px;
	padding:0 2px;
	display:inline-flex;
	align-items:center;
	justify-content:center;
}























/*** ヘッダーをスクロールした時 Fixed  ***/
/*
header.fixed_sp #header_bar {
	display:none;
}

header.fixed_sp  {
	position: fixed;
	top: 0;
	z-index: 10;
	width: 100%;
	margin: 0;
}


header.fixed_sp #msg_bar {
	display:none;
}

header.fixed_sp .personal_point {
	display:none;
}

header.fixed_sp #crumbs {
	display:none;
}
*/

/*高さ保持*/
/*
.sp_blank {
	display:block;
	height:0;
}

header.fixed_sp + .sp_blank {
	display:block;
	height:190px;
	background-color:#999;
}

*/






@media screen and (max-width : 1279px) {


/******************************************************************

     ヘッダー

******************************************************************/

header {
	position:relative;
}


#header_bar {
	display:flex;
	flex-wrap:wrap;
	align-items:start;
	position:relative;
}

#header_bar h1 {
	display:flex;
	align-items:center;
	padding:1.0rem;
}


#header_bar .login_name {
	position:absolute;
	width:100%;
	height:25px;
	line-height:25px;
	order:2;
	text-align:right;
	right:0;
	bottom:0;
}





#header_contents {
	margin-left:auto;
	width:auto;
	height:50px;
	padding:0 0 0 0;
	order:1;
	
}







}














/******************************************************************

     フッター

******************************************************************/

footer {
	font-size:1.4rem;
	width:100%;
	background-color:#FFF;
	border-radius:25px 25px 0 0;
	margin:auto auto;
}

#footer_container {
	max-width:1200px;
	color:#FFF;
	position:relative;
	text-align:center;
	padding:3.0rem 0 2.0rem 0;
	margin:auto auto;
	display:flex;
}


.footer_menu {
	width:100%;
	max-width:1200px;
	margin:auto auto;
	padding:0.5rem;
}

.footer_menu ul {
	display:flex;
	justify-content:center;
	flex-wrap:wrap;
	padding:0;
	width:100%;
}

.footer_menu ul li {
	margin:1.0rem;
}

.footer_menu ul li a {
	text-decoration:none;
	min-width:100px;
	display:block;
	font-size:1.5rem;
	font-weight:500;
	padding:0.1rem 0.5rem;
	text-align:center;
	transition: background 0.1s;
	white-space:nowrap;
	position:relative;
	color:#111;
}

.footer_menu ul li a:after {
	background:#333;
	content:"";
	width: 100%;
	height: 1px;
	position: absolute;
	left: 0;
	bottom: 0px;
	transform: scale(0, 1);
	transform-origin: left top;
	transition: .25s ease-out;
}

.footer_menu ul li a:hover {
	color:#111;
}

.footer_menu ul li a:hover:after {
	left: 0;
	transform: scale(1, 1);	
}





/*Footer bottom*/
.footer_bottom {
	text-align:center;
	margin:2.0rem 0 0 0;
}

.footer_bottom .logo_kimiya {
	padding:1.0rem;
}

.footer_bottom .logo_kimiya img {
	width:200px;
	height:auto;
}








/*フッターロゴ*/

.footer_logo dl {
	width:100%;
	margin:0 auto 0 auto;
	text-align:center;
	display:flex;
	justify-content: center;
	align-items:center;
}

.footer_logo dl dt {
	width:300px;
	text-align:center;
}

.footer_logo dl dt img {
	max-width:200px;
	height:auto;
}

.footer_logo dl dd {
	color:#FFF;
}



.copylight_contents {
	background-color:#000;
	/*display:flex;*/
	width:100%;
}









.copylight {
	vertical-align:top;
	width:100%;
}

.copylight p {
	padding:1.6rem;
	color:#FFF;
	white-space:nowrap;
	text-align:center;
	font-weight:normal;
}



/*************** 入会案内 ****************/

footer .join {
	width:600px;
	margin:auto auto;
	padding:5.0rem 0 0 0;
	color:#111;
		text-align:center;

}


.join .catch_copy .join_pdns_logo {
	width:240px;
	height:auto;
	vertical-align:middle;
}


.join .catch_copy {
	font-size:2.0rem;
	font-weight:bold;
	font-style:italic;
	letter-spacing:0.1rem;
}

.join .catch_copy p {
	border-bottom:1px solid #111;
}


.join .catch_copy p span {
	font-size:1.4rem;
}


.join .entry_btn dl {
	display:flex;
	flex-wrap:wrap;
	width:90%;
	margin:2.0rem auto;
}

.join .entry_btn dl dt {
	width:100%;
	padding:0 1.0rem;
	font-size:1.4rem;
}

.join .entry_btn dl dd {
	width:50%;
	padding:1.0rem 1.0rem;
}

.join .entry_btn dl dd .common_btn {
	font-size:1.4rem;
	min-width:100%;
	wa
	padding: 0.75rem 5.0rem 0.75rem 1.0rem;
}







.copyright {
	padding:1.0rem;
}


















/* # =================================================================
   #  
   # content_box コンテンツごとの区切り
   #
   # ================================================================= */


.content_box {
	margin:0 0 1.0rem 0;
	padding:5.0rem 0 5.0rem 0;
}


@media screen and (max-width : 767px) {
.content_box {
	margin:0 0 1.0rem 0;
	padding:1.0rem 0 5.0rem 0;
}
	
}








/******************************************************************

    メインコンテンツ部

******************************************************************/

#main_container {
	clear:both;
	width:100%;
	/*max-width:1280px;*/
	/*min-height:1200px;*/
	margin:0 auto 0 auto;
}
#main_contents {
	position:relative;
	/*width:calc(100% - 50px);*/
	width:100%; 
	box-sizing:border-box;
	background-color:#FFF;
}


#main_contents img {
	max-width:100%;
	height:auto;
}



#main a {
	color:#333;
}

/* ==================================================

	owlCarousel使用 スライド

================================================== */


.owl-carousel {
    visibility:hidden;
}

.owl-carousel.owl-loaded {
    visibility:visible;
}




.slide_image {
	margin:1.0em 0 5.0em 0;
	padding:2.0em 0;
}
.slide_image ul {
}
.slide_image ul li {
	margin:0 0;
	padding:0;
}
.slide_image ul li img {
	width:100%;
	height:auto;
}






/******************************************************************

    Youtube 推奨

******************************************************************/

.movie {
	position: relative;
    width:100%;
	height:100%;
}

.movie:before {
    content:"";
    display: block;
    padding-top: 56.25%; /* 高さと幅の比を16:9に固定。9/16*100=56.25 */
}



.movie iframe {
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}






/********************************************************************************

   ページ上に戻る
   
********************************************************************************/

.pagetop {
	display: none;
	position: fixed;
	bottom:0;
	right:0;
	z-index:10;
}
.pagetop a {
}

.pagetop a:hover {
}

.pagetop a {
	display:block;
    position: relative;
    width: 50px;
	height:50px;
	border-radius:10px 0 0 0;
	background-color:#000;
	opacity:0.8;
	text-decoration:none;
}


.pagetop a:after {
	position:absolute;
	width:auto;
	height:25px;
	right:15px;
	top:9px;
	font-size:3.0rem;
	content:"";
	font-family: 'FontAwesome';
	content: "\f106";
	color:#FFF;
	border:none;
	line-height:1.0;
}













/* # =================================================================
   #
   # ボタンデザイン
   #
   # ================================================================= */

.btn_area_center {
	max-width:320px;
	margin:3.0rem auto 0 auto;
	padding:1.0rem 0;
	box-sizing:border-box;
}

.btn_area_center a {
	width:100%;
}



.btn_area_right {
	max-width:320px;
	margin:3.0rem 0 0 auto;
	padding:1.0rem 0;
	box-sizing:border-box;
}

.btn_area_right a {
	width:100%;
}



/*

.btn_area {
	width:500px;
	margin:3.0rem auto 0 auto;
	padding:1.0rem;
	box-sizing:border-box;
}

.btn_area p {
	font-weight:bold;
	padding:0 0 1.0rem 0;
}

.button {
	display: inline-block;
	width: 100%;
	height: 60px;
	text-align: center;
	text-decoration: none;
	line-height: 54px;
	outline: none;
}
.button::before,
.button::after {
	position: absolute;
	z-index: -1;
	display: block;
	content: '';
}
.button,
.button::before,
.button::after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .3s;
	transition: all .3s;
}


*/





/* コモンボタン 白*/


/* 上向き ▲ */
.triangle_up {
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

/* 右向き ▶︎ */
.triangle_right {
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* 下向き ▼ */
.triangle_down {
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

/* 左向き ◀︎ */
.triangle_left {
  clip-path: polygon(0 50%, 100% 0, 100% 100%);
}



.common_btn {
	display: block;
	min-width:250px;
	text-align:center;
	border:1px solid #111;
	background-color:#111;
	font-size:1.6rem;
	font-weight:bold;
	color:#FFF;
	padding:1.0rem 5.0rem 1.0rem 1.0rem;
	text-decoration:none;
	position:relative;
	border-radius:6px;
	transition:all 0.5s;
}

.common_btn:hover {
	border:1px solid #111;
	background-color:#FFF;
	color:#111;
}


.common_btn:after {
	position:absolute;
    content: "";
	background-color:#FFF;
    height: calc(12px / 2 * tan(60deg));
	width: 10px;
	clip-path: polygon(0 0, 100% 50%, 0 100%);
    right: 6%;
    top: calc(50% - 6px);
}

.common_btn:hover:after {
	background-color:#111;
}

.common_btn:before {
	position:absolute;
    content: "";
	height:70%;
    border-left: 1px solid #FFF;
    right:16%;
	top:15%;
}

.common_btn:hover:before {
    border-left: 1px solid #111;
}

.common_btn_down:after  {
	clip-path: polygon(0 0, 100% 0, 50% 100%);
}



/***********************************
  ノーマルボタン
***********************************/

.normal_btn {
	display: block;
	min-width:250px;
	text-align:center;
	border:1px solid #111;
	background-color:#111;
	font-size:1.6rem;
	font-weight:normal;
	color:#FFF;
	padding:1.75rem;
	text-decoration:none;
	position:relative;
	border-radius:8px;
	transition:all 0.5s;
}

.normal_btn:hover {
	border:1px solid #111;
	background-color:#FFF;
	color:#111;
}

.normal_btn:hover:after {
	background-color:#111;
}

.normal_btn:hover:before {
    border-left: 1px solid #111;
}


/*赤*/

.btn_red {
	border:1px solid #D5000C;
	background-color:#D5000C;
}

.btn_red:hover {
	border:1px solid #D5000C;
	background-color:#FFF;
	color:#D5000C;
}

.btn_red:hover:after {
	background-color:#D5000C;
}

.btn_red:hover:before {
    border-left: 1px solid #D5000C;
}




/*緑*/

.btn_green {
	border:1px solid #00CC66;
	background-color:#00CC66;
}

.btn_green:hover {
	border:1px solid #00CC66;
	background-color:#FFF;
	color:#00CC66;
}

.btn_green:hover:after {
	background-color:#00CC66;
}

.btn_green:hover:before {
    border-left: 1px solid #00CC66;
}




/*グレー*/

.btn_gray {
	border:1px solid #999;
	background-color:#999;
}




/**********************************************************************

  もっとみる付きリスト表示用スタイル
  
**********************************************************************/
/*  ul.morelist  */

.morelist li {
	opacity: 1;
	transition:all 0.5s;
}
.morelist li.is-hidden {
	opacity: 0;
	height: 0;
	margin: 0;
}
.morelist-btn {
	margin-top: 20px;
}
.morelist-btn.is-btn-hidden {
	display:none;
}
.morelist-btn a {
}



/******************************************************************

    いいね！ボタン

******************************************************************/

.LikeBtn_box {
	display: flex;
    justify-content: flex-end;
	align-items:center;
	margin:1.0rem 0;
}

.LikeBtn_box > div.LikeBtn_box_set {
}

.LikeBtn_box > div.LikeBtn_box_set button {
	padding:12px 5px;
	border-radius:6px;
	display:flex;
	width:100%;
	background-color:#FFF;
	border:2px solid #FFF;
}

.LikeBtn_box > div.LikeBtn_box_set button:hover {
	border:2px solid #CCC;
}

.LikeBtn_box span {
	font-size:1.4rem;
	height:22px;
	padding:0 0.25rem;
}

.like-btn {
	margin-left:auto;
    width: 20px;
    height: 20px;
	border:none;
	background:none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    overflow: visible;
}

.icon_heart {
    width: 18px;
    height: 18px;
    color: #bbb;
    transition: color .2s ease;
}

.like-btn.is-liked .icon_heart {
    color: #ff4d6d;
}






@keyframes pop {
    0% { transform: scale(1); }
    50% { transform: scale(1.4); }
    100% { transform: scale(1); }
}

/* ふわっと浮くハート */
.heart-float {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ff4d6d;
    font-size: 18px;
    animation: floatUp .8s ease forwards;
    pointer-events: none;
}

@keyframes floatUp {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.6);
    }
    30% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -140%) scale(1.4);
    }
}


/******************************************************************

    Youtube 推奨

******************************************************************/

.youtube_wrap {
	position: relative;
    width:100%;
	height:100%;
	margin:auto auto;
}

.youtube_wrap:before {
    content:"";
    display: block;
    /*padding-top:56.25%;*/ /* 高さと幅の比を16:9に固定。9/16*100=56.25 */
	padding-top:56.25%;
}



.youtube_wrap iframe {
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}




/* # =================================================================
   #
   # パンくず
   #
   # ================================================================= */

#crumbs {
	padding:2.0rem 0;
}

#crumbs nav {
	max-width:1280px;
	margin:0 auto 0 auto;
}


#crumbs nav ul {
	display:flex;
	flex-wrap:wrap;
	margin:0;
	padding:0 0.5rem;
}

/*
#crumbs nav ul::-webkit-scrollbar {
	height:2px;
}

#crumbs nav ul::-webkit-scrollbar-thumb {
	height:2px;
	background-color: rgb(177, 0, 0);
}

#crumbs nav ul::-webkit-scrollbar-track {
	height:2px;
	background-color: rgb(140, 140, 140);
}
*/



#crumbs nav ul li {
	font-size:1.4rem;
	margin:0 0.5rem 0 0;
}

#crumbs nav ul li a ,#crumbs nav ul li span {
	position:relative;
	display:block;
	padding:0 1.0rem 0 2.0rem;
	text-decoration:none;
	color:#111;
	white-space:nowrap;
}

#crumbs nav ul li a {
	color:#111;
	text-decoration:underline;
}

#crumbs nav ul li a:hover {
	color:#D5000C;
	text-decoration:underline;
}

#crumbs nav ul li a:before {
	position:absolute;
	font-family: 'FontAwesome';
	content:"\f105";
	font-size:2.5rem;
	/*border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
	border-left: 6px solid #FF4536;*/
	left:0;
	top:calc(50% - 14px);
}

#crumbs nav ul li a:before {
	text-decoration:none;
}



#crumbs nav ul li:nth-child(1) a:before {
	display:none;
}


#crumbs nav ul li span:before {
	position:absolute;
	font-family: 'FontAwesome';
	content:"\f105";
	font-size:2.5rem;
	/*border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
	border-left: 6px solid #FF4536;*/
	left:0;
	top:calc(50% - 14px);
}


/*長いメッセージ*/

.crumbs_long .contents_headding {
	width:50%;
}

.crumbs_long .contents_headding h3 dl dt {
	font-size:4.0rem;
}





@media screen and (max-width : 767px) {
	
#crumbs {
	padding:0 0 0 0;
}
	
	
#crumbs nav ul {
	margin:0 0.5rem;
}
/*
#crumbs nav ul {
	display:flex;
	margin:0;
	overflow-x:auto;
}

#crumbs nav ul::-webkit-scrollbar {
	height:2px;
}

#crumbs nav ul::-webkit-scrollbar-thumb {
	height:2px;
	background-color: rgb(177, 0, 0);
}

#crumbs nav ul::-webkit-scrollbar-track {
	height:2px;
	background-color: rgb(140, 140, 140);
}
*/



#crumbs nav ul li a ,#crumbs nav ul li span {
	padding:0.5rem 0.5rem 0.5rem 1.0rem;
}

#crumbs nav ul li a:before {
	font-size:2.0rem;
	left:0;
	top:calc(50% - 18px);
}






#crumbs nav ul li span:before {
	font-size:2.0rem;
	left:0;
	top:calc(50% - 18px);
}



}






















/* # =================================================================
   #
   # 情報がない場合
   #
   # ================================================================= */

.no_info {
	margin:1.0rem 0.5rem;
	padding:1.0rem;
	/*border:1px solid #CCC;*/
	color:#333;
	font-size:1.8rem;
}











/* # =================================================================
   #
   # SNSいいね機能
   #
   # ================================================================= */



.sns_plus {
}
.sns_plus ul {
	margin:1.0rem 0 0 0;
	padding:0.5rem;
	display: -webkit-flex; /* Safari */
	display: flex;
	list-style:none;
	align-items: center;
	justify-content: center; 
	height:50px;
}
.sns_plus ul li {
	margin:0.5rem;
}

.sns_plus ul li div.line a {
	background-color:#00B900;
	display:block;
	height:28px;
	line-height:28px;
	padding:0 0.5rem;
	box-sizing:border-box;
	color:#FFF!important;
	font-weight:bold;
	text-decoration:none;
	border-radius:4px;
}


.sns_plus ul li div.line a img {
	width:25px;
	height:auto;
	vertical-align:middle;
}


/*
.sns_plus ul li div.line a:before {
	content:" ";
    display:inline-block;
    width:28px;
    height:28px;
    background:url(../img/icon/linebutton/line30.png);  
    background-size:contain;
    vertical-align:middle;
}*/

.sns_plus ul li div.line a:after {
	
}


/*Twitter*/
.sns_plus ul li div.twitter {
	margin:0 0 0 1.0rem;
}

.sns_plus ul li div.twitter a {
	background-color:#09F;
	display:block;
	height:28px;
	line-height:28px;
	padding:0 0.5rem;
	box-sizing:border-box;
	color:#FFF!important;
	font-size:1.4rem;
	font-weight:bold;
	text-decoration:none;
	border-radius:4px;
	white-space:nowrap;
}


/******************************************************************

    pagination ページ送り

******************************************************************/


.pagination {
	font-size:1.5rem;
	text-align:center;
	margin:6.0rem 0 3.0rem 0;
	padding:1.0rem;
	border-top:1px solid #999;
	border-bottom:1px solid #999;
}

.pagination ul {
	width:50%;
	margin:auto auto;
	display:flex;
	margin:auto;
	
}

.pagination ul li {
	flex:0 0 auto;
}

.pagination ul li a {
	display:block;
	padding:1.0rem 1.5rem;
	margin:0 0.25rem;
	color:#FFF!important;
	background-color:#999;
	text-decoration:none;
}

.pagination ul li a:hover {
	background-color:#06C167;
}


.pagination ul li span {
	display:block;
	padding:1.0rem 1.5rem;
	margin:0 0.25rem;
	background-color:#DDD;
}

.pagination ul li span.current {
	color:#FFF;
	background-color:#666;
}


.pagination ul li:first-child {
	margin-right: auto;
}

.pagination ul li:last-child {
	margin-left: auto;
}


/* ボタンが2個だけのタイプ */
.pagination_type2 ul {
	width:100%;
}

.pagination_type2 ul li {
	max-width:50%;
}


#sub .pagination {
	max-width:1200px;
	margin:auto auto;
}


/***** PDNS仕様 デザイン *****/
.pagination {
	border-top:none;
	border-bottom:none;
}

.pagination ul li a {
	border-radius:6px;
	background-color:#333;
	text-decoration:none;
}

.pagination ul li a:hover {
	background-color:#FFA500;
	background-color:#F99;
}


.pagination ul li span {
	border-radius:6px;
	display:block;
	padding:1.0rem 1.5rem;
	margin:0 0.25rem;
	background-color:#F0F0F0;
}

.pagination ul li span i {
	color:#CCC;
}


.pagination ul li span.current {
	color:#FFF;
	background-color:#C5000A;
}







/******************************************************************

    round_contents 角丸コンテンツ

******************************************************************/

.round_contents_box{
	border-radius:20px;
	background-color:#FFF;
	margin:50px 0 100px 0;
	position:relative;
}

.member_title_first {
	margin:0 0 100px 0;
}/* 角丸タイトル不使用が最初に来る場合 */



.round_contents_box .round_hedding {
	width:40%;
	height:80px;
	border-radius:20px 0 0 0;
	background-color:#FFF;
	margin-top:-60px;
	position:absolute;	
	z-index:1;
}

.round_contents_box .round_hedding:after {
	position:absolute;	
	content:"";
	width:100px;
	height:60px;
	padding:0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23FFFFFF' viewBox='0 0 10 6'%3E%3Cpath d='M 0 6 L 10 6 C 6 5 5 0 0 0 Z'/%3E%3C/svg%3E");			
	right:-100px;
	top:0;
	z-index:-1;
}


.round_contents_box .round_hedding h3 {
	font-size:3.2rem;
	height:60px;
	line-height:60px;
	padding:5px 10px 10px 20px;
	white-space:nowrap;
}

.round_contents_box .round_hedding h3 p {
	display:inline-block;
}

.round_contents_box .round_hedding h3 p.pref_title {
	font-size:2.0rem;
	height:24px;
	line-height:24px;
	vertical-align:middle;
}

.round_contents_box .round_hedding h4 p.sub {
	width:100%;
	display:block;
	font-size:1.6rem;
	font-weight:500;
	padding:0;
	height:30px;
	line-height:30px;
	background-color:#D9FFFF;
}



.round_contents_box .round_hedding h3 i {
	color:#D5000D;
	margin:0 5px 0 0;
	vertical-align:middle;
	/*width:40px;*/
	height:auto;
}

.round_contents_box .round_hedding h3 i img {
	width:60px;
	height:auto;
	vertical-align:middle;
}

.round_contents_box .round_hedding h3 em {
	margin:0 1.0rem 0 0;
}

.round_contents_box .round_hedding h3 span {
	font-size:1.6rem;
	font-weight:500;
}

.round_contents_box .round_hedding h3 p:first-letter {
	color:#D5000D;
}



/****** 検索結果等表示欄 ******/

.round_contents_box .search-result-header {
	 width:90%;
	 margin:auto auto auto auto;
	 padding-top:20px;
	 font-size:1.6rem;
}

.round_contents_box .search-result-header dl {
	padding:1.0rem;
	border-radius:10px;
	border:2px dotted #CCC;
}

.round_contents_box .search-result-header dl dt {
	padding:0.25rem;
}

.round_contents_box .search-result-header dl dt span {
	font-weight:bold;
}

.round_contents_box .search-result-header dl dd {
	padding:0.25rem;
}

.round_contents_box .search-result-header dl dd span {
	font-weight:bold;
	color:#D5000D;
}






/*メモ
.bgsvg{
	width:100px;
	height:60px;
	padding:0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23FFFFFF' viewBox='0 0 10 6'%3E%3Cpath d='M 0 0 V 6 Q 0 6 10 6 Q 5 3 0 0 C 5 0 7 4 10 6'/%3E%3C/svg%3E");			
	left:-100px;
	top:-50px;
}
*/

.round_contents {
	background-color:#FFF;
	min-height:100px;
	padding:25px 0 25px 0;
	margin:0 20px 0 20px;
}


.round_contents h4 {
}

/******************************************************************

    一覧ページ用 レイアウト

******************************************************************/

article.list_page {
	min-height:400px;
}


article.list_page h4 {
	font-size:1.6rem;
}


article.list_page ul {
	display:flex;
	flex-wrap:wrap;
}

article.list_page ul li {
	width:calc(100% / 4)!important;
}

#member_topics_page article.list_page ul li {
	width:calc(100% / 3)!important;
}

@media (min-width: 1025px) and (max-width:1280px) {
#member_topics_page article.list_page ul li {
	width:calc(100% / 2)!important;
}
}



/******************************************************************

    tabs タブコンテンツ

******************************************************************/


.tabs {
	display: flex;
	flex-wrap: wrap;
}
label.tab_label {
	color: #333;
	background-color:#FFF;
	font-weight: bold;
	border: solid 1px #333;
	border-bottom:1px solid #333;
	position: relative;
	z-index: 1;
	cursor: pointer;
	flex: 1;
	padding: 0 1.0rem;
	margin: 0 0;
}
label.tab_label:hover {
	opacity: 0.75;
}
.tab_content {
	flex: 100%;
	display: none;
	overflow: hidden;
}
input[name="tab_switch"] {
	display: none;
}

.tabs input[name="tab_switch"]  {
	width:0;
	height:0;
	margin:0;
	border:none;
}


.tabs input:checked + .tab_label {
	color: #FFF;
	background-color: #333;
}
.tabs input:checked + .tab_label::after {
	content: '';
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 15px 15px 0 15px;
	border-color: #333 transparent transparent transparent;
	display: block;
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -10px;
	transition: all 0.25s ease 0s;
}
 #tab01:checked ~ #tab01_content, #tab02:checked ~ #tab02_content, #tab03:checked ~ #tab03_content {
 display: block;
}
.tab_content {
	position: relative;
	animation: fadeIn 0.25s ease;
}

@keyframes fadeIn {
	 0% {
		 opacity: 0;
		 top: 10px;
		 }
	100% {
		opacity: 1;
		top: 0;
}
}



label.tab_label span {
	position:relative;
	display:inline-block;
	height:50px;
	line-height:50px;
	font-size:1.8rem;
}





/* ==================================================

	ふわっと表示

================================================== */

@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}
@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

/* ----------パターン1：透明度が変化---------- */
/* 画面外 */
.fade_block_pt01 {
  opacity: 0;
  transition: all 2.25s;
}
/* 画面に入った時の動き */
.fade_block_pt01.blockIn {
  opacity: 1;
}
/* ----------パターン2：下からふわっと---------- */
/* 画面外 */
.fade_block_pt02 {
  transform: translateY(100px);
  transition: all .5s ease-in;
}
/* 画面に入った時の動き */
.fade_block_pt02.blockIn {
  transform: translateY(0);
}
/* ----------パターン3：右からふわっと---------- */
/* 画面外 */
.fade_block_pt03 {
  transform: translateX(200px);
  transition: all .5s ease-in;
}
/* 画面に入った時の動き */
.fade_block_pt03.blockIn {
  transform: translateX(0);
}
/* ----------パターン4：左からふわっと---------- */
/* 画面外 */
.fade_block_pt04 {
  transform: translateX(-200px);
  transition: all .5s ease-in;
}
/* 画面に入った時の動き */
.fade_block_pt04.blockIn {
  transform: translateX(0);
}


/* ----------グラフ用アニメーション---------- */

.anima-bar ul li {
    width: 0;
}


.anima-bar.blockIn ul li {
	width:100%;
   	animation: anima-bar-chart 0.5s ease;
}

@keyframes anima-bar-chart {
    0% {
        width: 0;
    }
}









/* ボタンをキラッとさせる */
@-webkit-keyframes shine {
  100% {
    left: 50%;
  }
}
@keyframes shine {
  100% {
    left: 50%;
  }
}





/******************************************************************

     スポンサーバナー

******************************************************************/


ul.sponsor_banner {
	width:100%;
	padding:3.0rem 0;
	margin:auto auto;
}

ul.sponsor_banner {
	display:flex;
}

ul.sponsor_banner li {
	max-width:600px;
	margin:auto auto;
	padding:0;
	text-align:center;
}

ul.sponsor_banner li a {
	display:block;
	text-align:center;
	background-color:#CF6;
}


ul.sponsor_banner li img {
	width:100%;
	height:auto;
	image-rendering: -webkit-optimize-contrast;
	-webkit-backface-visibility: hidden;
}


ul.sponsor_banner_0 {
	width:100%;
	padding:3.0rem 0;
	margin:auto auto;
	text-align:center;
}




/******************************************************************

    ヘルプ用 モーダル ダイアログ

******************************************************************/

a[onclick] {
	cursor:pointer;
}


dialog {
	border: none;
	border-radius:20px;
	box-shadow: 0 10px 30px rgba(0,0,0,0.2);
	opacity: 0;
	transform: scale(0.75);
	transition: all 0.33s ease allow-discrete;
	text-align:center;
	width:95%;
	max-height:90%;
	max-width:900px;
	margin:auto auto;
	outline:none;
}

dialog[open] {
	opacity:1;
	transform: scale(1);
	transition: all 0.33s ease allow-discrete;
	@starting-style {
          opacity: 0;
		  transform: scale(0.75);
	}	
}


/* 背景（オーバーレイ） */
dialog::backdrop {
	background: rgba(0, 0, 0, 0.75);
	backdrop-filter: blur(3px);
}


dialog a:focus {
	outline:none;
}


dialog .dialog_container {
	max-width:750px;
	padding:5.0rem 2.0rem;
	margin:2.0rem auto;
}


.close {
	position: sticky;
	top:7px;
	right:12px;
	z-index: 1;
	height: 0;
}

.close a {
	position: relative;
	display: block;
	width: 40px;
	height: auto;
	aspect-ratio: 1;
	margin: 0 6px 0 auto;
	padding: 0;
	background: #333;
	opacity:0.75;
	border-radius: 50%;
	border: none;
	cursor: pointer;
	transition: background 250ms ease;
}

.close a:hover {
	background: #333;
	opacity:1.0;
}

.close a::before,
.close a::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	display: block;
	width: 50%;
	height: 2px;
	background: #FFF;
	translate: -50% -50%;
}

.close a::before {
	rotate: -45deg;
}

.close a::after {
	rotate: 45deg;
}



.close a:hover::before , .close a:hover::after {
	background-color:#FFF;
}


/*** ダイアログ内に画像配置 PC ***/

dialog .dialog_container .pic {
	width:95%;
	margin:0.5rem auto;
	aspect-ratio: 1.7 / 1;
	overflow: hidden;
}

dialog .dialog_container .pic img {
	border:5px solid #999;
	border-radius:10px;
	box-sizing:border-box;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top left;
}

dialog .dialog_container p img {
	vertical-align:middle;
}


dialog .dialog_container .pic_sp {
	display:none;
}


/*** ダイアログ内に画像配置 スマホ ***/

@media screen and (max-width : 767px) {

dialog .dialog_container .pic {
	display:none;
}

dialog .dialog_container .pic_sp {
	display:block;
	width:60%;
	margin:auto auto;
	text-align:center;
	aspect-ratio: 1 / 1.7;
	overflow: hidden;

}

dialog .dialog_container .pic_sp img {
	border:5px solid #999;
	border-radius:10px;
	box-sizing:border-box;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top left;
}




}
/*****/















/******************************************************************

    ヘルプ 記事

******************************************************************/

.help {
	text-align:left;
}



.help .text_contents {
	margin: 1.0rem 0 2.0rem 0;
    padding: 1.0rem 0 2.0rem 0;
	border-bottom:1px dashed #CCC;
}



.help h1 {
	font-size:1.7rem;
	text-align:center;
	background-color:#333;
	color:#FFF;
	padding:1.0rem;
	margin:0 0 1.0rem 0;
	border-radius:8px;
}

.help h2 {
	background-color:#CCC;
	color:#111;
	font-size:1.6rem;
	padding:1.0rem;
	margin:0 0 0.5rem 0;
	border-radius:6px;

}


.help p {
	font-size:1.6rem;
	margin:0 0 1.0rem 0;
	padding:0 1.0rem;
}

.help dl {
	padding:1.0rem 2.0rem;
}

.help dl dt {
	font-size:1.6rem;
	font-weight:bold;
	padding:0.5rem 0;
}

.help a {
	text-decoration:underline;
}


.help dl dd ul {
	padding:0 1.0rem;
}

.help dl dd ul li {
	margin:0 0 0.75rem 0;
	font-size:1.5rem;
}





/******************************************************************

    CloudFlare

******************************************************************/

.CF_box {
	text-align:center;
	margin:auto auto 1.0rem auto;
	vertical-align:bottom;
}

.CF_box:empty {
	display:none;
}

.CF_box:has(div:empty) {
	display:none;
}



/**********************************************************************************************************************************************************************/
/**********************************************************************************************************************************************************************/

 /*    タブレット   */

/**********************************************************************************************************************************************************************/
/**********************************************************************************************************************************************************************/


@media (min-width: 768px) and (max-width:1024px) {
	




/******************************************************************

     ヘッダー

******************************************************************/

header {
	position:relative;
	background-color:#FFF;
}


#header_bar {
	background-color:#FFF;
	height:75px;
	display:flex;
	flex-wrap:wrap;
	align-items:start;
	position:relative;
}

#header_bar h1 {
	height:75px;
	display:flex;
	align-items:center;
}


#header_bar .login_name {
	position:absolute;
	width:100%;
	height:25px;
	line-height:25px;
	order:2;
	text-align:right;
	right:0;
	bottom:0;
}


#header_contents {
	margin-left:auto;
	width:auto;
	height:50px;
	padding:0 0 0 0;
	order:1;
	
}

#header_contents #user_control ul li {
	height:50px;
}

#header_contents #user_control ul li a {
	line-height:50px;
}

#header_contents #user_control ul li a.favorite {
	padding-left:0;
}



#header_contents #user_control ul li a span {
	display:none;
}

#header_contents #user_control ul li a img {
    height: 25px;
    width: auto;
    vertical-align: middle;
    margin: 0 0 0 0;
	text-align:center;
}

#header_contents #user_control ul li a.login ,#header_contents #user_control ul li a.logout {
	padding-left:34px;
}


#header_contents #user_control ul li a.login:before ,#header_contents #user_control ul li a.logout:before ,#header_contents #user_control ul li a.favorite:before  {
	font-size:2.2rem;
	left:25%;
}

#header_contents #user_control ul li a div.count {
	top:-5px;
	right:-5px;
}


header.fixed_sp + .sp_blank {
	display:block;
	height:150px;
	background-color:#999;
}



header.fixed_sp .fixed_content {
	border-bottom:5px solid #06C167;
}


header.fixed_sp .fixed_content #header_search {
	display:none;
	transition: all 0.2s;
}


.fixed_content #main_logo {
	transition: all 0.2s;
}

header.fixed_sp .fixed_content #main_logo {
	width:35%!important;
	transition: all 0.2s;
}

header.fixed_sp .fixed_content #main_logo img {
	max-width:100%;
}

header.fixed_sp .fixed_content #user_control {
	width:65%!important;
	transition: all 0.2s;
}


header.fixed_sp .fixed_content #user_control {
	padding:0 70px 0 0!important;
}





/******************************************************************

    pagination ページ送り

******************************************************************/


.pagination {
}

.pagination ul {
	width:100%;
}











/******************************************************************

     ヘッダー（サブページ用）

******************************************************************/
/*
header.sub {
	height:75px;
}
*/

header.sub {
	display:flex;
	line-height:50px;
}


header.sub h1 {
	background-color:#666666;

}

header.sub ul li {
}


header.sub ul li.header_menu {
	text-align:left;
	width:100%;
	color:#FFF;
	font-size:1.4rem;
	line-height:20px;
}

header.sub ul li.header_menu dl {
	display:flex;
	padding:0 0 0 1.0rem;
    justify-content: center;
    align-items: start;
	text-align:center;

}

header.sub ul li.header_menu dl dd {
	margin:0 0 0 1.0rem;
	padding:0 0.5rem;
}

header.sub ul li.header_menu dl dd a {
	color:#FFF;
	text-decoration:none;
	font-size:1.6rem;
}

header.sub ul li.header_menu dl dd a:hover {
	color:#3CC;
}








/******************************************************************

     フッター

******************************************************************/

footer {
	font-size:1.4rem;
	width:100%;
}

.footer_contents {
	display:block;
}


.footer_menu ul {
	justify-content:start;
	width:90%;
	margin:auto auto;
}

.footer_menu ul li {
	width:calc(100% / 4);
	margin:0;
	text-align:left;
}

.footer_menu ul li a {
	margin:0.25rem;
	display:inline-block;
}



	

/******************************************************************

     サブページ 各コンテンツ nav

******************************************************************/

#main_contents {
	width:100%;
}




/******************************************************************

    round_contents 角丸コンテンツ

******************************************************************/

.round_contents_box .round_hedding {
	width:50%;
}


/******************************************************************

    一覧ページ用 レイアウト

******************************************************************/

article.list_page ul li {
	width:calc(100% / 3)!important;
}

#member_topics_page article.list_page ul li {
	width:calc(100% / 2)!important;
}




/* # =================================================================
   #
   # ボタンデザイン
   #
   # ================================================================= */


.btn_area {
	width:400px;
}


/* # =================================================================
   #
   # アコーディオン処理
   #
   # ================================================================= */

.ac_content {
	display:none;
}



/******************************************************************

     タブレットであれば非表示・表示

******************************************************************/

.tb_hide {
	display:none;
}

.tb_view {
	display:block;
}





/******************************************************************

     スポンサーバナー

******************************************************************/


ul.sponsor_banner {
	width:100%;
	padding:0 0 2.0rem 0;
	margin:auto auto 3.0rem auto;
}







/******************************************************************

     メッセージ

******************************************************************/

/* 緊急メッセージ */

.urgent {
}

.urgent h2 {
	font-size:2.0rem;
	margin:0 0 0.5rem 0;
	color:#F00;
}

.urgent a {
	text-decoration:underline;
}




}









/**********************************************************************************************************************************************************************/
/**********************************************************************************************************************************************************************/


    /*スマートフォントサイズ*/


/**********************************************************************************************************************************************************************/
/**********************************************************************************************************************************************************************/




@media screen and (max-width : 767px) {


/******************************************************************

    全般

******************************************************************/

body {
    line-height: 1.8;
	font-weight:normal;
}


p {
    text-align: justify;
}





/******************************************************************

    メッセージ

******************************************************************/

/***** 管理者用メッセージ *****/

.admin_msg {
	background-color:#EFEFEF;
	border:5px solid #CCC;
	padding:1.0rem;
}
.admin_msg dl {
	margin:2.0rem 1.0rem;
	padding:0.5rem;
}
.admin_msg dl dt {
	font-weight:bold;
	font-size:1.6rem;
}
.admin_msg dl dt:before {
	content:"\f0eb";
	font-family: FontAwesome;
	font-size:3.0rem;
	vertical-align:middle;
	padding:0 0.5rem 0.5rem 0;
	color:#FC0;
}
.admin_msg dl dd {
	font-size:1.4rem;
	margin:0 0 0.5rem 2.5rem;
}
.admin_msg dl dd input[type="submit"] {
	border:none;
	padding:0.5rem;
	cursor:pointer;
	background-color:#333;
	color:#FFF;
}
.admin_msg dl dd input[type="submit"]:hover {
	background-color:#09F;
}
/***** メッセージ 黄色 *****/

.yellow_msg {
	padding:0.25rem;
	margin:0.25rem 0;
}
.yellow_msg dl {
	margin:0.5rem;
	padding:0.25rem;
}
.yellow_msg dl dt {
	font-weight:bold;
	font-size:1.6rem;
}
.yellow_msg dl dd {
	font-size:1.5rem;
}
/***** メッセージ 赤色 *****/

.red_msg {
	padding:0.25rem;
	margin:0.25rem 0 0.5rem 0;
}
.red_msg dl {
	margin:0.5rem;
	padding:0.25rem;
}
.red_msg dl dt {
	font-weight:bold;
	font-size:1.5rem;
}
.red_msg dl dd {
	font-size:1.5rem;
}


/************************************************************************************/

/* 緊急メッセージ */

.urgent {
}

.urgent h2 {
	font-size:2.0rem;
	margin:0 0 0.5rem 0;
	color:#F00;
}

.urgent a {
	text-decoration:underline;
}






/************************************************************************************/



/******************************************************************

     メニュー

******************************************************************/

.contents_guide {
	position:relative;
}



/******************************************************************

     メインコンテンツ

******************************************************************/

#main_contents {
	width:100%;
}
#main_container {
	margin:0 0 3.0em 0!important;
}
/* ==================================================

	owlCarousel使用 スライド

================================================== */

.slide_image {
	margin:1.0em 0 5.0em 0;
	padding:0;
}




/******************************************************************

     ヘッダー

******************************************************************/

header {
	position:relative;
}


#header_bar {
	background-color:#FFF;
}

#header_bar .login_name {
	width:100%;
	background-color:#F0F0F0;
	text-align:right;
	position:relative;
}

#header_bar .login_name .login i {
	vertical-align:baseline;
}


#header_bar .login_name .login span {
	line-height: 25px;
/*	max-width: 20.0rem;*/
	max-width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
	vertical-align:top;
}







#header_contents {
	width:100%;
	display:none;
}



#header_contents {
	flex-wrap:wrap;
}














/* スマホ Fixed  */
/*
header.fixed_sp .fixed_content {
	position: fixed;
	top: 0;
	z-index: 10;
	width: 100%;
	margin: 0;
	border-bottom:5px solid #06C167;
}


.fixed_content #header_search {
	display:block;
	transition: all 0.2s;

}


header.fixed_sp .fixed_content #header_search {
	display:none;
	transition: all 0.2s;
}


.fixed_content #main_logo {
	transition: all 0.2s;
}

header.fixed_sp .fixed_content #main_logo {
	width:33%!important;
	transition: all 0.2s;
}

header.fixed_sp .fixed_content #main_logo img {
	max-width:100%;
}

.fixed_content #user_control {
	transition: all 0.2s;
}


header.fixed_sp .fixed_content #user_control {
	padding:0 20px 0 0!important;
}



}



.sp_blank {
	display:block;
	height:0;
}

header.fixed_sp + .sp_blank {
	display:block;
	height:150px;
	background-color:#EEE;
}

*/


#header_bar {
	align-items:start;
	flex-wrap:wrap;
	width:100%;
	height:auto;
}

#header_bar h1 {
	padding:1.25rem;
}

#header_contents .login_name {
	width:100%;
	font-size:1.2rem;
	padding:0.25rem 0.5rem;
	background-color:#F0F0F0;
}

#user_control_sp .login_name {
	display:inline-block;
	text-align:left;
}

#user_control_sp .login_name i {
	display:inline-block;

}




#user_control_sp .login_name span {
	display:inline-block;
}







/******************************************************************

     フッター

******************************************************************/

footer {
	font-size:1.4rem;
	width:100%;
}

footer .footer_menu ul {
	width:90%;
	margin:auto auto;
	justify-content:start
}

footer .footer_menu ul li {
	width:50%;
	margin:1.0rem 0;
	text-align:left;
}

footer .footer_menu ul li a {
	text-align:left;
}

footer .copyright {
	width:calc(100% - 50px);
}





/*************** 入会案内 ****************/

footer .join {
	width:95%;
	max-width:400px;
}

.join .catch_copy {
	padding:1.0rem;
}


.join .catch_copy .join_pdns_logo {
	width:75%;
	display:block;
	margin:auto auto;
}


.join .catch_copy {
	font-size:1.6rem;
	font-weight:bold;
	font-style:italic;
	letter-spacing:0.1rem;
}

.join .catch_copy p {
	border-bottom:1px solid #111;
	text-align:center;
	padding:0 0 1.0rem 0;
}


.join .catch_copy p span {
	font-size:1.4rem;
}


.join .entry_btn dl {
	display:flex;
	flex-wrap:wrap;
	width:90%;
	margin:2.0rem auto;
}

.join .entry_btn dl dt {
	font-size:1.8rem;
	text-align:left;
}

.join .entry_btn dl dd {
	width:100%;
	padding:1.0rem 1.0rem;
}

.join .entry_btn dl dd .common_btn {
	font-size:1.6rem;
	min-width:100%;
}







	

/********************************************************************************

   ページ上に戻る
   
********************************************************************************/




/******************************************************************

    round_contents 角丸コンテンツ

******************************************************************/

.round_contents {
	margin:0 10px 0 10px;
}




.round_contents_box{
	border-radius:10px;
}

.round_contents_box .round_hedding {
	width:60%;
	height:80px;
	border-radius:10px 0 0 0;
	background-color:#FFF;
	margin-top:-60px;
	position:absolute;	
	z-index:0;
}

.round_contents_box .round_hedding:after {
	width:100px;
	height:60px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23FFFFFF' viewBox='0 0 10 6'%3E%3Cpath d='M 0 6 L 8 6 C 5 5 4 0 0 0 Z'/%3E%3C/svg%3E");			
	right:-100px;
	background-repeat:no-repeat;
}


.round_contents_box .round_hedding h3 {
	font-size:2.7rem;
	height:30px;
	line-height:30px;
	padding:15px 10px 10px 15px;
}

.round_contents_box .round_hedding h3 span {
	font-size:1.4rem;
	display:block;
}

@media screen and (max-width: 376px) {

.round_contents_box .round_hedding h3 span {
	font-size:1.2rem;
}

}


.round_contents_box .round_hedding h3 i {
	vertical-align:top;
	margin:5px 0 0 0;
}

.round_contents_box .round_hedding h3 p.pref_title {
	font-size:2.0rem;
	height:24px;
	line-height:24px;
	vertical-align:middle;
}

@media screen and (max-width: 400px) {

.round_contents_box .round_hedding h3 p.pref_title {
	font-size:1.8rem;
}

}


.round_contents_box .round_hedding h3 i img {
	width:50px;
}


/******************************************************************

    一覧ページ用 レイアウト

******************************************************************/

article.list_page ul li {
	width:calc(100% / 2)!important;
	padding:0.5rem!important;
}

#member_topics_page article.list_page ul li {
	width:calc(100% / 2)!important;
}



article.list_page ul li dl dd span {
	font-size:1.275rem!important;
}

article.list_page ul li dl dd p {
	font-size:1.4rem!important;
	overflow: hidden;
	display: -webkit-box;
	text-overflow: ellipsis;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;

}



/******************************************************************

    tabs タブコンテンツ

******************************************************************/

label.tab_label {
	padding:0.5rem;
		text-align:center;

}

#member_lists .tabs label.tab_label[for="tab01"] {
	border-radius:6px 0 0 6px!important;
	
}
#member_lists .tabs label.tab_label[for="tab02"] {
	border-radius:0 6px 6px 0!important;
}


label.tab_label span {
	position:relative;
	display:inline-block;
	height:25px;
	line-height:25px;
	font-size:1.5rem;
}


label.tab_label span em {
	position:relative;
	display:block;
}


/***** タブ 表示幅によって文字列変更用 *****/

label.tab_label span small.sp_view {
	display:none;
}

label.tab_label span small.sp_hide {
	display:inline-block;
}



@media screen and (max-width: 767px) {
label.tab_label span small.sp_view {
	display:inline-block;
}

label.tab_label span small.sp_hide {
	display:none;
}


}



/* # =================================================================
   #
   # ボタンデザイン
   #
   # ================================================================= */


.btn_area {
	width:100%;
}

/* 発注ボタン */



.order_btn a {
	font-size:1.6rem;
}















/* # =================================================================
   #
   # アコーディオン処理
   #
   # ================================================================= */

.ac_content {
	display:none;
}





/******************************************************************

    pagination ページ送り

******************************************************************/


.pagination {
	margin-left:0;
	margin-right:0;
	padding: 1.0rem 0;
	overflow-x:auto;
    -webkit-overflow-scrolling:touch;
}

.pagination ul {
	width:max-content;
    min-width:max-content;
    padding:0 1.0rem;
    display:flex;
    flex-wrap:nowrap;}

.pagination ul li {
	max-width:none;      /* ← PC側の12.5%を打ち消す */
    flex:0 0 auto;
}

.pagination ul li a,
.pagination ul li span {
    padding:0.5rem 1.0rem;
    white-space:nowrap;
}
















/******************************************************************

     スマートフォンであれば非表示・表示

******************************************************************/

.sp_hide {
	display:none;
}

.sp_view {
	display:block;
}


}