@charset "utf-8";

/*
Theme Name: nipponfc2021
Author: kazDone
Author URI: https://nippon-fc.jp/
Description: 自作テーマ2021
Version: 0.1
License: GPL
*/

/*@import url("css/fonts/style.css");
@import url("css/font-awesome.css");*/
* {
	box-sizing: border-box;
}

body { 
	color: #000;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 14px; font-weight: 400;
	line-height: 1.6; 
	-webkit-text-size-adjust: 100%; 
	-webkit-font-smoothing: subpixel-antialiased;
	word-wrap: break-word; 
	word-break: break-all; overflow-wrap : break-word;
}
.bold { font-weight: 400;}
.b400 {font-weight: 400;}
.b500 {font-weight: 500;}
.b600 {font-weight: 600;}
.b700 {font-weight: 700;}


a{color: #000; text-decoration: none;}
a:link {color: #000;}
a:visited {color: #000;}
a:hover{
color: #e45d93;
cursor : pointer;
}
a:active {color: #e45d93;}

.letterM1{letter-spacing: -1px;}
.letter0{letter-spacing: 0px;}
.letterP1{letter-spacing: 1px;}
.letter2 {letter-spacing: 2px;}
.letter1 {letter-spacing: 1px;}
.letterSm0 {letter-spacing: 0;}
.letterSm1 {letter-spacing: -1px;}
.letterSm2 {letter-spacing: -2px;}
.indent-1 {
	padding-left:1em;
	text-indent:-1em;
}

.font12 {font-size: 12px;}
.font13 {font-size: 13px;}
.font14 {font-size: 14px;}
.font14imp {font-size: 14px !important;}
.font15 {font-size: 15px;}
.font16 {font-size: 16px;}
.font18 {font-size: 18px;}
.font18imp {font-size: 18px !important;border-bottom:none !important;}
.font20 {font-size: 20px;}
.font22 {font-size: 22px;}
.font24 {font-size: 24px;}
.font25 {font-size: 25px;}
.font26 {font-size: 26px;}
.font28 {font-size: 28px;}
.font30 {font-size: 30px;}
.font36 {font-size: 36px;}

.red{color: #ff0000;}
.green{color: #65a34a;}

.lh1{line-height: 1;}
.lh12{line-height: 1.2;}
.lh13{line-height: 1.3;}
.lh14{line-height: 1.4;}
.lh15{line-height: 1.5;}
.lh16{line-height: 1.6;}
.lh17{line-height: 1.7;}
.lh18{line-height: 1.8;}
.lh2{line-height: 2; }
.lh22{line-height: 2.2; }

.font12bold {
	font-size: 12px;font-weight: 600;
}
.font14 {
	font-size: 14px;
}
.font15 {
	font-size: 15px;
}
.font16 {
	font-size: 16px;
}
.font18 {
	font-size: 18px;
}
.font18bold {
	font-size: 18px;font-weight: 600;
}
.content .col2 .side #nav a {
	font-weight: 500;
}
.content .col2 .side #nav a p.font16 {
	font-size: 14px;
}
.font20 {
	font-size: 20px;
}
.font22 {
	font-size: 22px;
}
.font22bold {
	font-size: 22px;font-weight: 600;
}
.font24bold{
	font-size: 24px;font-weight: 600;
}
.margin_t5 {margin-top: 5px;}
.margin_t10 {margin-top: 10px;}
.margin_t20 {margin-top: 20px;}
.margin_t30 {margin-top: 30px;}
.margin_t40 {margin-top: 40px;}
.margin_t50 {margin-top: 50px;}
.margin_b5 {margin-bottom: 5px;}
.margin_b10 {margin-bottom: 10px;}
.margin_b20 {margin-bottom: 20px;}
.margin_b30 {margin-bottom: 30px;}
.margin_b40 {margin-bottom: 40px;}
.margin_b50 {margin-bottom: 50px;}
.margin_l30 {margin-left: 30px;}
.margin_tb5 {margin: 5px 0;}
.margin_tb10 {margin: 10px 0;}
.margin_tb20 {margin: 20px 0;}
.margin_tb20L70 {margin: 20px 0px 20px 70px;}
.margin_tb30 {margin: 30px 0;}
.margin_tb40 {margin: 40px 0;}
.margin_tb50 {margin: 50px 0;}
.margin_tb80 {margin: 80px 0;}
.padding_t3 {padding-top: 3px;}
.padding_t5 {padding-top: 5px;}
.padding_t10 {padding-top: 10px;}
.padding_t20 {padding-top: 20px;}
.padding_t30 {padding-top: 30px;}
.padding_t40 {padding-top: 40px;}
.padding_t50 {padding-top: 50px;}
.padding_t80 {padding-top: 80px;}
.paddingL10 {padding-left: 10px;}
.paddingL20 {padding-left: 20px;}
.paddingL30 {padding-left: 30px;}
.paddingL50 {padding-left: 50px;}

.padLR55 {padding: 0 55px;}
.LR20{margin: 0 20px;}
.LR40{margin: 0 40px;}

.padding_b5 {padding-bottom: 5px;}
.padding_b10 {padding-bottom: 10px;}
.padding_b20 {padding-bottom: 20px;}
.padding_b30 {padding-bottom: 30px;}
.padding_b40 {padding-bottom: 40px;}
.padding_b50 {padding-bottom: 50px;}
.padding_tb10 {padding: 10px 0;}
.padding_tb20 {padding: 20px 0;}

.paddingT5{padding-top: 5px;}
.paddingT10{padding-top: 10px;}
.paddingT20{padding-top: 20px;}
.paddingT30{padding-top: 30px;}
.paddingT40{padding-top: 40px;}
.paddingT50{padding-top: 50px;}
.paddingT60{padding-top: 60px;}
.paddingT80{padding-top: 80px;}
.paddingT100{padding-top: 100px;}

.paddingTB10{padding: 10px 0;}
.paddingTB20{padding: 20px 0;}
.paddingTB30{padding: 30px 0;}
.paddingTB40{padding: 40px 0;}
.paddingTB60{padding: 60px 0;}

.paddingB10{padding-bottom: 10px;}
.paddingB20{padding-bottom: 20px;}
.paddingB30{padding-bottom: 30px;}
.paddingB40{padding-bottom: 40px;}
.paddingB50{padding-bottom: 50px;}
.paddingB60{padding-bottom: 60px;}
.paddingB80{padding-bottom: 80px;}
.paddingB100{padding-bottom: 100px;}
.paddingB120{padding-bottom: 120px;}

.marginTB10{
	margin: 10px 0;
}
.marginTB20{
	margin: 20px 0;
}
.marginTB50{
	margin: 50px 0;
}
.margin_t50 {margin-top: 50px;}
.margin_b50{margin-bottom: 50px;}
.marginL1em{
	margin-left: 1em;
}
.paddingL1em{
	padding-left: 1em;
}



.left{text-align: left;}
.center{text-align: center;}
.right{text-align: right;}

.w100 img{
	width: 100%; height: auto;
}
.w80{
	width: 80%; height: auto;
}
.w70{
	width: 70%; height: auto;
}
img.w100{
	width: 100%; height: auto;
}
.max200{
	max-width: 200px; width: 100%; height: auto;
}
.max250{
	max-width: 250px; width: 100%; height: auto;
}
.max300{
	max-width: 300px; width: 100%; height: auto;
}
.max350{
	max-width: 350px; width: 100%; height: auto;
}
.max600{
	max-width: 600px; width: 100%; height: auto;
}
br.sp767{display: none;}

.container {
	background-color: #ffd4d5;
}
.content .col2 {
	display: flex;
	justify-content: space-between;
}
.content .col2 .main {
	width: calc(100% - 250px);
}
.content .col2 .main.bg {
	background: #f0f3ef;
	padding: 50px 30px;
}
.h2ti{
	font-size: 18px; color: #078740;
	border-top: solid 5px #e45d93;
	border-bottom: solid 5px #e45d93;
	background: #fff; padding: 14px 10px;
	text-align: center;margin-bottom: 50px;
}
.h2ti p {
	font-size: 30px;font-weight: 400;
}
.h2ti p span{
	font-size: 20px;
}

.content .col2 .side {
	width: 250px; background: #fbe9ea;
	padding: 50px 28px 30px;
}
.content .col2 .side #nav{
	padding: 50px 0px 30px;
}
.content .col2 .side #nav a {
	font-size: 12px; 
	padding: 20px 0;line-height: 1.6;
	display: block; letter-spacing: 1px;
}
.content .col2 .side #nav a p {
	font-size: 19px; font-weight: 600; letter-spacing: 0px;
}
.content .col2 .side #sns a{
	display: block;
}

.w100 {
	width: 100%; height: auto;
}
.w1000 {
	max-width: 1000px;
	margin: 0 auto;
	padding: 60px 0px 60px;
}
.red{color: #ff0000;}

/* topics */
ul.col3topics {
	display: flex;
	padding: 5px 0; margin-top: 8px;
}
ul.col3topics li {font-size: 14px;}
ul.col3topics li.l {
	width: 100px;font-weight: 500;
}
ul.col3topics li.spa {
	width: 120px;
}
ul.col3topics li.r {
	width: calc(100% - 240px);
}
.excerpt{
	font-weight: 500;
}
.cate{
	background: #898989;
	display: inline-block;
	text-align: center;
	width: 9em;
	color: #fff;
	font-size: 12px; font-weight: 400;
}
.cate.info{background: #e45d93;}
.cate.kaki{background: #4eae60;}
.cate.press{background: #0071a1;}
.cateBox{
	position: relative;
}
.cateBox .cateLabel {
	position: absolute;
	bottom: 10px; right: 10px;
	display: flex;
}

.read{
	text-align: center;
	padding: 0px 0px 50px;
}
.read p.font18 {font-weight: 600;}
.read p.font14 {font-weight: 500;}

/* footer */
footer#bg{
	background: #e45d93;
	max-width: 1400px;
	margin: 0 auto;
	padding: 30px 0px 30px;
	font-size: 16px; 
	text-align: center;
	color: #fff;
}
footer#bg a {
	color: #fff;
}
footer#bg .flogo.f28 {
	font-weight: 500;font-size: 28px; 
}
footer#bg .flogo.f16 {
	font-weight: 500;font-size: 16px; 
}
footer#bg .copy{
	font-size: 14px; 
}



/* pagetop
--------------------------------------------------------- */
#pagetop {
	position: fixed;
	right: 20px;
}
#pagetop a {
	display: block;
	width: 50px; height: 50px;
	position: relative;
	background-color: rgba(255,255,255,0.7);
}
#pagetop a::after {
	position: absolute;
	content: '';
	width: 13px;
	height: 13px;
	/*background-repeat: no-repeat;
	background-size: contain;
	background-image: url(./img/pagetop.png);*/
	border-top: solid 2px #000;
	border-right: solid 2px #000;
	transform: translate(-50%, -50%) rotate(-45deg);
	top: calc(50% + 3px); left: 50%;
}


/* Hamburger menu */
.hamburger-menu{position: relative;}
header#headSp{display: none;}
#spLogo{position: absolute;left: 10px; top: 12px;}
.menu-btn {
    /*position: fixed;
    top: 10px;
    right: 10px;*/
	position: absolute; right: 0px;
    display: flex;
    height: 60px;
    width: 60px;
    justify-content: center;
    align-items: center;
    z-index: 90;
    background-color: #fbe9ea;
}
.menu-btn span,
.menu-btn span:before,
.menu-btn span:after {
    content: '';
    display: block;
    height: 3px;
    width: 25px;
    border-radius: 3px;
    background-color: #000;
    position: absolute;
}
.menu-btn span:before {
    bottom: 8px;
}
.menu-btn span:after {
    top: 8px;
}
#menu-btn-check:checked ~ .menu-btn span {
	background-color: rgba(255, 255, 255, 0);
	/*メニューオープン時は真ん中の線を透明にする*/
}
#menu-btn-check:checked ~ .menu-btn span::before {
	bottom: 0;
	transform: rotate(45deg);
}
#menu-btn-check:checked ~ .menu-btn span::after {
	top: 0;
	transform: rotate(-45deg);
}
#menu-btn-check {
	display: none;
}
#menu-btn-check:checked ~ .menu-content {
	left: 0;/*メニューを画面内へ*/
}

.menu-content {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 60px;
    left: 100%;/*leftの値を変更してメニューを画面外へ*/
    z-index: 80;
    background-color: #fbe9ea;
    transition: all 0.5s;/*アニメーション設定*/
}
.menu-content ul {
	padding: 0px 10px 0;
	border-top: solid 1px #000;
}
.menu-content ul li {
	border-bottom: solid 1px #000;
	list-style: none;
}
.menu-content ul li a {
	display: block;
	width: 100%;
	font-size: 12px;
	color:#000;
	text-decoration: none;
	padding: 10px 15px 10px 0;
	position: relative;
	line-height: 1.6;
	letter-spacing: 1px;
}
.menu-content ul li a::before {
	content: "";
	width: 7px; height: 7px;
	border-top: solid 2px #000;
	border-right: solid 2px #000;
	transform: rotate(45deg);
	position: absolute;
	right: 11px;
	top: 16px;
}
.menu-content ul li a p {
	font-size: 19px;
	font-weight: 600;
	letter-spacing: 0px;
}


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

@media screen and (max-width: 1000px){
	header#headSp{display: block;}
	.container {padding-top: 60px;border-top: none;background-color: #fbe9ea;}
	.content .col2 .main {width: 100%;border-top: 10px solid #e45d93;}
	.content .col2 .side {display: none;}
}
@media screen and (max-width: 768px){
	.content .col2 .main.bg {padding: 30px 10px;}
	.h2ti p {font-size: 26px;}
	.h2ti p span{font-size: 18px;}
	.h2ti {font-size: 16px;padding: 10px 10px;}
	.font24bold {font-size: 20px;}
	.LR20 {margin: 0 0px;}
	.LR40 {margin: 0 0px;}
	footer#bg {padding: 30px 10px 30px;font-size: 15px;}
	footer#bg .flogo.f28{font-size: 24px;}
	footer#bg .flogo.f16 {font-size: 14px;}
}

@media screen and (max-width: 640px){
	ul.col3topics {flex-wrap: wrap;}
	ul.col3topics li.r {width: 100%;}
	.cateBox .cateLabel {position: static;justify-content: flex-end;}
	body#topics_single .h2ti {margin-bottom: 10px;}
	.cateBox {margin-bottom: 50px;}
}
@media screen and (max-width: 414px){
	.menu-content ul li a{padding: 8px 15px 8px 0;}
	.menu-content ul li a{line-height: 1.5;padding: 7px 15px 7px 0;}
	.menu-content ul li a p {font-size: 17px;}
	.h2ti p {font-size: 22px;}
	.h2ti p span{font-size: 17px;}
}
@media screen and (max-width: 375px){
	#spLogo {left: 10px; top: 14px;}
	#spLogo img {width: 260px; height: auto;}
	.menu-content ul li a p {font-size: 16px;}
	.menu-content ul li a p.font16.padding_b5 {font-size: 14px;}
}
@media screen and (max-width: 320px){
	#spLogo {left: 10px; top: 15px;}
	#spLogo img {width: 230px;}
	footer#bg .copy {font-size: 13px;}
	.menu-content ul li a {line-height: 1.4;padding: 6px 15px 6px 0;}
}