@charset "UTF-8"

/*
	Theme Name: buzz-agent
*/


/*base*/

*,*:before,*:after,li{
	box-sizing: border-box!important;
}

html,body {
	font-family: "LINE Seed JP", sans-serif;
	margin:0;
	padding:0;
	position: relative;
}

ul:not(.note){margin:0; padding:0; list-style-type: none;}
p{font-size:16px; line-height:1.6; color:var(--blk); margin:1em 0;}
p,li{font-size:16px; line-height:1.6;}
img {max-width: 100%;}
a,a:link,a:visited{text-decoration: none;}
a:hover {opacity:0.6;}


h2,h3,h4,h5,h2 span,h3 span,h4 span,h5 span{font-weight:bold;}

.pconly{display:none;}
.sponly{display:block;}

@media only screen and (min-width: 700px){
	.pconly{display:block;}
	.sponly{display:none;}
}

span.br{display:inline-block;}

.br-sp {display: block;}
.br-pc {display: none;}

@media screen and (min-width: 700px){
.br-sp {display: none;}
.br-pc {display: block;}
}

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

@media (max-width: 699px){
.center-sp{text-align:center;}
}

.flex,.flex-sp{
	display:flex;
	justify-content: center;
	align-content: center;
}
@media (max-width: 699px){
	.flex:not(.reverse){flex-direction: column;}
	.flex.reverse{flex-direction: column-reverse;}
	}

.note{
	color: var(--blk);
	margin:0; 
	padding:1rem 0;
	text-align: left;
	font-size:1rem;
	list-style-type: none;
}
.note li{
	position: relative;
	text-indent: -1em;
	padding-left: 1em;
	line-height: 2;
}
.note>li:before{
	content:"※";
	left:0;
}


:root{
	--pink:#e8138d;
	--grn:#06c755;
	--gray:#808080;
	--ppl:#784ecf;
	--ylw:#fff257;
	--org:#ff8b22;
	--size40:clamp(2rem, 1.786vw + 1.643rem, 2.5rem);
	--size42:clamp(1.375rem, 3.333vw + 0.583rem, 2.625rem);
	--size38:clamp(1.375rem, 2.424vw + 0.89rem, 2.375rem);
	--size36:clamp(1.25rem, 1.818vw + 0.886rem, 2.25rem);
	--size32:clamp(1.375rem, 1.136vw + 1.148rem, 2rem);
	--size24:clamp(1.125rem, 0.682vw + 0.989rem, 1.5rem);
	--size22:clamp(1.125rem, 0.455vw + 1.034rem, 1.375rem);
}


/*PC電話リンク*/
@media (min-width: 700px) {
a[href*="tel:"] {
pointer-events: none;
cursor: default;
text-decoration: none;
}
}


/*レイアウト*/

body:not(.home){
	display:flex;
	flex-flow:column;
	min-height:100vh;
}

main{overflow: hidden;}

main:not(.home main){
	flex:1;
	margin-top: 76px;
}


section .inner{
	max-width:980px;
	padding:60px 20px;
	margin:0 auto;
}

@media (min-width: 700px){
	section .inner{padding:80px 20px;}
}

section .inner:not(.home section .inner,.bread .inner){
	padding: 30px 20px;
}

@media (min-width: 700px){
	section .inner:not(.home section .inner,.bread .inner){padding:40px 20px;}
}

/*ヘッダー*/

.header{
	box-sizing: border-box;
	position: fixed;
	top: 0;
	left: 0;
	right:0;
	width: 100%;
	max-width:1980px;
	margin:auto;
	padding: 10px;
	z-index: 99;
	display:flex;
	justify-content: space-between;
	align-items: flex-start;
	transition: 0.5s;
}

.header:not(.home .header){
	background:#000;
	align-items: center;
}

header.scroll-nav{
	background:rgba(0 ,0 ,0, 0.7);
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
	align-items: center;
}

.h-logo{
	transition: 0.5s;
	text-align: center;
}

.h-logo img{
	width:clamp(13.75rem, 27.273vw + 8.295rem, 25rem);
	vertical-align:bottom;
}

.h-logo p{
	margin: 2rem 0 0 0;
	color: #fff;
	font-weight: bold;
	font-size: 18px;
}

header.scroll-nav .h-logo p,.header:not(.home .header) .h-logo p{display:none;}

header.scroll-nav .h-logo img,.header:not(.home .header) .h-logo img{width: 120px;}

.h-logo .logo{margin:0;}

.h-logo .logo a{
    width: 100%;
    height: 100%;
    display: inline-block;
}

.menu-btn {
	position: relative;
	display: flex;
	height: 40px;
	width: 40px;
	border-radius: 50%;
	justify-content: center;
	align-items: center;
	z-index: 90;
	transition: 0.5s;
	background: #fff;
}

@media (min-width: 700px){
	.menu-btn{
		height: 50px;
		width: 50px;
	}
}

.menu-btn span,
.menu-btn span:before,
.menu-btn span:after {
    content: '';
    display: block;
    height: 2px;
    width: 20px;
    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:hover,.menu-btn:active,.menu-btn:focus{background-color:rgba(255,255,255,0.6);}

#menu-btn-check:checked ~ .menu-btn{background-color:rgba(255,255,255,0.6);}

.menu-btn p{
    font-size: 12px;
    color: #fff;
	padding-top:36px;
}

.menu-inner {
	width: 80%;
	height: 100%;
	position: fixed;
	top: 0;
	right: -100%;
	z-index: 80;
	background-color: #000;
	transition: all 0.5s;
}

.menu-inner .btn{margin: 70px 20px 20px;}

.menu-inner .btn a{
    width: 100%;
    max-width: 230px;
    box-sizing: border-box;
}


.menu-inner ul {
    padding: 70px 1rem;
}
.menu-inner ul li {
    border-bottom: solid 1px #ffffff;
    list-style: none;
}
.menu-inner ul li a {
	display: block;
	width: 100%;
	font-size: 18px;
	box-sizing: border-box;
	color:#ffffff;
	text-decoration: none;
	padding: 15px 10px;
	margin: 6px 0;
	position: relative;
}
.menu-inner ul li a::before {
    content: "";
    width: 10px;
    height: 10px;
    border-top: solid 2px #ffffff;
    border-right: solid 2px #ffffff;
    transform: rotate(45deg);
    position: absolute;
    right: 10px;
    top: 21px;
}

.menu-inner ul li a:hover{
	background-color: rgba(0,0,0,0.3);
}

#menu-btn-check:checked ~ .menu-inner {
    right: 0;
}

.menu-inner ul li span{
	font-size:0.8rem;
	padding-left:10px;
}



/*btn*/

.btn a{
	text-align: center;
	display: inline-block;
	margin: 0 auto;
	border-radius: 50px;
	position: relative;
	color: #fff;
	padding: 14px 50px 14px 46px;
	margin-top: 10px;
	font-size: 18px;
	font-weight: bold;
}

.btn.grn a{background: var(--grn);}

.btn.pink a{background: var(--pink);}

.btn a::after{
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	right: 20px;
	width: 8px;
	height: 8px;
	margin: auto;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	transform: rotate(45deg);
}

.btn img{
    width: 20px;
    vertical-align: middle;
    margin-left: 6px;
    margin-bottom: 2px;
}

.btn span{
	display: block;
	font-size: 12px;
}

.two-btn.flex{
	justify-content: center;
	gap: 30px;
}

.single .two-btn.flex{margin: 3rem 0;}


/*mv*/

#mv{
	position: relative;
	background:#000;
}

#mv h1{margin:0;}

#mv::before{
	position:absolute;
	content:"";
	border:1px solid #fff;
	border-radius:20px;
	width:90%;
	height:90%;
	margin:auto;
	left:0;
	right:0;
	top:0;
	bottom:0;
	z-index: 1;
}

#mv .mv-inner{
	max-width:1980px;
	margin:0 auto;
	position:relative;
}

#mv .mv-inner::before{
	position:absolute;
	content:"";
	width:100%;
	height:100%;
	background: url(./img/mv-over.png) no-repeat center / cover;
	/*overflow:hidden;*/
	animation:scaleup 0.5s 0.6s ease-out forwards;
	opacity:0;
}

#mv .mv-inner img{
        height: 90vh;
        width: 100%;
        object-fit: cover;
}

#mv .mv-txt{
	position: absolute;
	padding: 0 2rem;
	margin: 0 auto;
	bottom: 10%;
	right: 0;
	left: 0;
	width: 80%;
	text-align: center;
}

@media (min-width: 700px){
	#mv .mv-txt{bottom: 20%;}
}

#mv .mv-txt h2{
	line-height: 1.4;
	color:#fff;
	font-size:clamp(2.375rem, 1.515vw + 2.072rem, 3rem);
	animation: scaleup 0.5s 0.3s ease-out forwards;
	opacity:0;
}

#mv .mv-txt ul{
	display: flex;
	gap: 1rem;
	justify-content: center;
	margin-bottom: 1rem;
	flex-wrap: wrap;
}

#mv .mv-txt ul li{
	background: #fff;
	border-radius: 8px;
	padding: 6px 10px;
	color: var(--pink);
	font-weight: bold;
}

#mv .fadein-box{
	opacity:0;
	animation: fadein 0.8s  0.3s ease-in-out forwards;
}


/*intro*/

#intro{
	/*background: #000;*/
	position: relative;
	overflow: hidden;
}

#intro .prob,#intro .merit,#intro .liver{
	position: relative;
	background: #fff;
	border: 3px solid #000;
	border-radius: 20px;
	padding: 4rem 1rem 3rem;
	margin-bottom: 3rem;
	z-index: 2;
}

#intro .prob{margin-bottom:5rem;}

#intro .tt-box{
	position: absolute;
	text-align:center;
	margin: auto;
	top: -20px;
	left: 0;
	right: 0;
}

#intro .tt-box h2{
	padding: 4px;
	margin: 0;
	color: #fff;
	font-size:var(--size32) ;
	background: var(--ppl);
	display: inline-block;
}

#intro .flex{gap: 20px;}

#intro ul{
	width: 100%;
	box-sizing: border-box;
}

@media (min-width: 700px){
	#intro ul{
	width: 50%;
	}
}

#intro ul li{
	position: relative;
	border-bottom: dashed 2px #000;
	margin-bottom: 1rem;
	padding: 0 0 0.4rem 2rem;
	text-indent: -1.8rem;
	font-size: var(--size22);
	font-weight: bold;
	line-height: 1.4;
}

#intro ul li::before{
	content:"";
	display: inline-block;
	width: 20px;
	height: 20px;
	margin-right: 10px;
	vertical-align: bottom;
}

.prob ul li::before{background: url(./img/icon_prob.png) no-repeat center / contain;}

.merit ul li::before{background: url(./img/icon_merit.png) no-repeat center / contain;}



#intro .img,#features .flex .img,#case .flex .img{
	width: 100%;
	text-align: center;
}

@media (min-width: 700px){
	#intro .img,#features .flex .img,#case .flex .img{width: 40%;}
}

#intro .img img,#features .flex .img img,#case .flex .img img{
	width: 100%;
	max-width: 480px;
	aspect-ratio: 8 / 5;
	object-fit: cover;
}

#intro .balloon-wrap{
	position:absolute;
	bottom:-30px;
	margin: auto;
	left: 0;
	right: 0;
	padding: 0 1rem;
}

.balloon{
	display: flex;
	justify-content: center;
	position: relative;
	max-width: 300px;
        margin: 0 auto;
	padding: .8em;
	border: 3px solid #000;
	border-radius: 50px;
	background-color: var(--pink);
	color: #fff;
	font-size: var(--size24);
	font-weight: bold;
}

.balloon::before,
.balloon::after{
	position: absolute;
	bottom: -15px;
	width: 30px;
	height: 15px;
	clip-path: polygon(0 0, 100% 0, 50% 100%);
	content: "";
}

.balloon::before {
	background-color: #000;
}

.balloon::after {
	bottom: -11px;
	background-color: var(--pink);
}


@media (min-width: 700px){
	#intro .liver{
	padding: 4rem 2rem 3rem;
	}
}

.liver h3{
	color: var(--pink);
	font-size: var(--size24);
}


/*bgimg*/

.bgimg1,.bgimg2,.bgimg3,.bgimg4,.bgimg5,.bgimg6{
	position:absolute;
}

.bgimg1{
	top: 0;
	right: -20px;
	opacity: 0.6;
	animation: pulse 3s ease-out infinite;
}

.bgimg2{
	top: 0;
	right: -20px;
	width:70%;
	opacity: 0.7;
	animation: pulse 2.4s ease-out infinite;
}

.bgimg3{
	top:40%;
	left:-20px;
	opacity: 0.5;
	animation: pulse 3s ease-out infinite;
}

.bgimg4{
	top:40%;
	left:-20px;
	opacity: 0.7;
	animation: pulse 2.4s ease-out infinite;
}

.bgimg5{
	bottom: 0;
	right: -20px;
	opacity: 0.4;
	animation: pulse 3s ease-out infinite;
}

.bgimg6{
	bottom: 0;
	right: -20px;
	opacity: 0.6;
	animation: pulse 2.4s ease-out infinite;
}


/*features*/

#features{
    background: var(--ylw);
    position: relative;
}

#features .inner{
    padding: 60px 20px 0;
}

@media (min-width: 700px){
	#features .inner{padding:80px 20px;}
}

#features .balloon-wrap{
	position:absolute;
	top:-30px;
	margin: auto;
	left: 0;
	right: 0;
	padding: 0 1rem;
}

#features h2{
	margin: 0;
	padding: 4rem 1rem 2rem;
	text-align: center;
	background: var(--ppl);
	color: #fff;
	position: relative;
}

#features h2::before {
	content: "";
	position: absolute;
	top: 100%;
	left: 20%;
	margin-left: -15px;
	border: 15px solid transparent;
	border-top: 15px solid var(--ppl);
}


#features ul li:not(.f-point li){
	position:relative;
	border: solid 3px #000;
	background: #fff;
	border-radius: 20px;
	padding: 1rem;
	margin: 0 auto 1rem;
	max-width: 800px;
}

#features ul li:not(.f-point li)::before{
	position:absolute;
	content:"";
	top:10px;
	right:10px;
	display: inline-block;
	width: clamp(5rem, 3.03vw + 4.394rem, 6.25rem);
	height: clamp(5rem, 3.03vw + 4.394rem, 6.25rem);
}

#features ul li.reason1::before{background: url(./img/reason1.png) no-repeat center / contain;}
#features ul li.reason2::before{background: url(./img/reason2.png) no-repeat center / contain;}
#features ul li.reason3::before{background: url(./img/reason3.png) no-repeat center / contain;}
#features ul li.reason4::before{background: url(./img/reason4.png) no-repeat center / contain;}
#features ul li.reason5::before{background: url(./img/reason5.png) no-repeat center / contain;}

#features h3{
	color:var(--pink);
	margin: 1rem 0 0 0;
	font-size: var(--size24);
}

#features p{
    position: relative;
    z-index: 2;
}

#features .flex{
	justify-content: space-evenly;
	align-items: center;
}

#features .f-point{
	text-align: center;
	margin: 1rem 0;
}

#features .f-point-sub{
	position:relative;
	display: flex;
	justify-content: center;
	align-items: center;
	font-weight: bold;
	font-size: var(--size32);
}

#features .f-point-sub::before, #features .f-point-sub::after {
	display: inline-block;
	width: 3px;
	height: 28px;
	border-radius:3px;
	content: "";
	background-color: #000;
}

#features .f-point-sub::before {
	margin-right: 0.5em;
	transform: rotate(-30deg);
}

#features .f-point-sub::after {
	margin-left: 0.5em;
	transform: rotate(30deg);
}

#features .f-point-tt{
	display: inline-block;
	background: var(--ppl);
	color: #fff;
	font-size: var(--size32);
	font-weight: bold;
	padding: 4px;
	margin: 1rem 0 2rem;
}

#features .f-point ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-bottom: 1rem;
}

#features .f-point ul li{
	background: var(--pink);
	border-radius: 8px;
	padding: 10px 20px;
	color: #fff;
	font-weight: bold;
	display: flex;
	align-items: center;
}

#features .f-point ul li span{font-size: var(--size24);}

#features .f-point{
	width: 100%;
	box-sizing: border-box;
}

@media (min-width: 700px){
	#features .f-point{
	width: 40%;
	}
}

#features img.sponly{width:100%;}



/*info*/

.info{
	background: var(--ppl);
	position: relative;
	color: #fff;
}

.info .inner{
    max-width: 600px;
    margin: 0 auto;
}

.info .balloon-wrap{
	position: absolute;
	margin: auto;
	top: -30px;
	left: 0;
	right: 0;
	padding: 0 2rem;
}

.info ul{
    display: flex;
    justify-content: center;
    gap: 10px;
}

.info ul li{
    background: #fff;
    color: var(--pink);
    font-weight: bold;
    padding: 8px;
    border-radius: 8px;
}


.info .btn{
	text-align: center;
	margin: 1rem 0 0;
}


/*case,flow,faq*/

#case,#flow,#faq{position: relative;}

#case .inner{
    padding: 40px 20px;
}

@media (min-width: 700px){
	#case .inner{padding:80px 20px;}
}

.balloon-pink{
	padding: 2rem 1rem;
	text-align: left;
	background: var(--pink);
	color: #fff;
	position: relative;
}

.balloon-pink::before{
	content: "";
	position: absolute;
	top: 100%;
	left: 20%;
	margin-left: -15px;
	border: 15px solid transparent;
	border-top: 15px solid var(--pink);
}

.balloon-pink h2{
	max-width:980px;
	margin: 0 auto;
}

.balloon-pink+.sub-tt{
	color: var(--ppl);
	font-weight: 900;
	font-size: clamp(3.75rem, 6.061vw + 2.538rem, 6.25rem);
	opacity: 0.6;
	position: absolute;
	top: 60px;
	right: 0;
	margin-right: 10px;
}

#case p{
    font-size: var(--size22);
    font-weight: bold;
}

#case .flex{
	justify-content: space-evenly;
	align-items: center;
}

#case ul{
	width: 100%;
	box-sizing: border-box;
}

@media (min-width: 700px){
	#case ul{
	width: 50%;
	}
}

#case ul li{
	display: flex;
	border: solid 3px #000;
	border-radius: 20px;
	padding: 1rem;
	align-items: center;
	margin-bottom: 1rem;
}

#case ul li img{
	background: var(--ppl);
	width: 40px;
	height: 40px;
	padding: 10px;
	border-radius: 50px;
	margin-right: 10px;
}

#case ul li h3{
	font-size: var(--size24);
	color: var(--pink);
	margin: 0;
}

#case ul li h3 span{
    font-size: var(--size22);
    color: #000;
    display: block;
    margin-bottom: 10px;
}

#case img.sponly{
	width: 100%;
}


/*flow*/

#flow ul{
display: flex;
    flex-direction: column;
    align-items: flex-start;
}

#flow ul li{
	flex-direction: row;
	align-items: flex-start;
	gap: 10px;
}

#flow .step{
	background: var(--ppl);
	border: solid 3px #000;
	border-radius: 100px;
	width: 80px;
	height: 80px;
	padding: 20px 10px 10px;
	color: #fff;
	font-weight: bold;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	position: relative;
	font-size: 13px;
}

#flow li:not(:last-child) .step::after{
	position: absolute;
	content:"";
	top: 100%;
	bottom: 0;
	height:120%;
	width:3px;
	background:#000;
}

#flow li:first-child .step::after{
	height:200%;
}

#flow .step span{
	font-size: var(--size32);
	margin-top: -6px;
}

#flow .step-r{
	width: calc(100% - 90px);
}

#flow h3{color: var(--pink);}

#flow .btn a{
	font-size: 16px;
	padding: 12px 40px 12px 20px;
}


/*faq*/

#faq{
	background: #e0e0e0;
}

#faq dl{
	background: #fff;
	border: solid 3px #000;
	border-radius: 20px;
	padding: 1rem;
	margin-bottom: 1rem;
}

#faq dt,#faq dd{
	position: relative;
}

#faq dt{
	color:var(--pink);
	font-weight:bold;
	font-size:var(--size22);
	margin-bottom: 1rem;
	padding-left: 3rem;
}

#faq dd{
	line-height: 1.6;
	margin: 0;
	padding-left: 3rem;
}

#faq dt::before,#faq dd::before{
	display: flex;
	justify-content: center;
	align-items: center;
	width:20px;
	height:20px;
	padding:6px;
	border-radius:30px;
	font-weight:bold;
	color:#fff;
	margin-right: 10px;
	position: absolute;
	left: 0;
}

#faq dt::before{
	content:"Q";
	background:var(--pink);
	top: -4px;
}

#faq dd::before{
	content:"A";
	background:var(--org);
}


/*app*/

#app h2{color: var(--ppl);}

#app ul{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(100px, 2fr));
	gap: 20px;
}

#app ul li{
    text-align: center;
}

#app ul li img{
	border-radius: 20px;
	box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
}

#app ul li p{
    margin: 0.5rem 0 0 0;
    color: var(--pink);
    font-weight: bold;
}


/*フッター*/

footer,#intro{
	width: 100%;
	height: 100%;
	background: linear-gradient(150deg, #ff2ba3, #c038ff, #38c9ff);
	background-size: 600% 600%;
	animation: Gra 10s ease infinite;
	-webkit-animation: Gra 10s ease infinite;
	padding: 1rem;
	box-sizing: border-box;
}

@keyframes Gra {
    0%{background-position:0% 83%}
    50%{background-position:100% 18%}
    100%{background-position:0% 83%}
}

@-webkit-keyframes Gra {
    0%{background-position:0% 83%}
    50%{background-position:100% 18%}
    100%{background-position:0% 83%}
}

.f-logo,.copy{text-align:center;}

.f-logo a{
	display: inline-block;
	width: 100%;
	height: 100%;
}

.f-logo img{
	width: 100%;
	max-width:300px;}

.sns img{
	width: 40px;
}

footer .flex-sp{
    gap: 10px;
    margin: 1rem;
}

footer .flex-sp a,footer .flex a{color:#fff;}

footer .flex{
	flex-direction: column;
	gap: 10px;
}

.copy{
	padding: 2rem 0 0;
}

.copy ul li a,.copy p{
	font-size:14px;
	color:#fff;
	margin: 0;
}


/*下層共通*/


/*ぱんくず*/

/*.bread{padding-bottom: 1rem;}*/

.bread{background: #eee;}

.bread .inner{padding: 0.5rem 1rem;}

.bread ul{list-style: none;}

.bread li{
	display: inline;
	font-size:13px;
	color:#666;
}

.bread li a{
    color: inherit;
    text-decoration: none;
  }
.bread li + li:before{
    content: ">";
    margin:.5em;
}

.bread li:last-child{color:var(--blk);}






/*singleページ、archiveページ共通*/

.single time,.archive time,.blog time{
	color:#999;
}

.archive .contents-header h2,.blog .contents-header h2{
	color:var(--ppl);
	padding-bottom: 2rem;
	font-size: 1.6rem;
}

.blog .btn,.archive .btn{
	margin-top: 3rem;
}


.archive ul{list-style-type: none;}


/*singleページ共通*/


.single .post-detail .img,.single .news-detail .img{
	position: relative;
	margin: 2rem auto;
	max-width: 600px;
}


.single main img{
	width: 100%;
	aspect-ratio: 8 / 5;
	object-fit: cover;
	border-radius: 20px;
	border: solid 3px #000;
}

.single h1{
	border-bottom: dashed 3px #000;
	padding-bottom: 8px;
	display: inline;
	line-height: 1.8;
}

@media (min-width: 700px){
	.single h1{display: block;}
}

.single .post-detail .sub,.single .news-detail .sub{
	justify-content: flex-start;
	margin: 2rem 0;
	gap: 10px;
}

@media (min-width: 700px){
	.single .post-detail .sub,.single .news-detail .sub{
	align-items: center;
	}
}

.single .cat{
    display: flex;
    gap: 16px 10px;
    flex-wrap: wrap;
}


.single .cat a{
	color: #454545;
	padding: 4px 12px;
	background: #e3e3e3;
	border-radius: 30px;
	font-size: 15px;
}




/*お知らせ（taxonomy）*/

.info-list li a,.post-list li a{
	position:relative;
	display:flex;
	align-items: start;
	border-bottom: 2px dashed #000;
	padding: .8rem 0;
	width:100%;
	height:100%;
}

.info-list li a:after,.post-list li a:after{
	content: "";
	position: absolute;
    top: 0;
    bottom: 0;
    right: 20px;
    width: 8px;
    height: 8px;
    margin: auto;
    border-top: 3px solid #000;
    border-right: 3px solid #000;
    transform: rotate(45deg);
}

.info-list li a:hover,.post-list li a:hover{
	background: rgba(0, 0, 0, 0.1);
}

.info-list time,.post-list time{
	margin: 5px 10px 0 0;
}

.info-list h3,.post-list h3{
	color:#000;
	font-size: 20px;
	margin: 0 3rem 0 0;
	line-height: 1.4;
}


@media (max-width: 700px){
	.info-list li a,.post-list li a{
	flex-direction: column;
	align-items: flex-start;
	}
	.info-list h3,.post-list h3{margin: 8px 3rem 0 0;}
}


/*アーカイブ　ページネーション*/

.pagination{
    padding: 2rem 0;
    text-align: center;
}

.page-numbers{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.page-numbers li a,.page-numbers span.current{
	padding: 10px;
	border-radius: 30px;
	width: 20px;
	height: 20px;
	display: inline-flex;
	justify-content: center;
	align-items: center;
}

.page-numbers span.current{
	background: #ddd;
}

.page-numbers li a{
	background: var(--ppl);
	color: #fff;
}




/*固定ページ*/

.page-header h2{
	color: var(--ppl);
	margin-bottom: 0;
}


/*私たちについて*/

table.tbl-1 {
	border-collapse: collapse;
	border-spacing: 0;
	width: 100%;
}

.tbl-1 tr {
	table-layout: fixed;
	display: flex;
	flex-direction:column;
	position: relative;
	border-bottom: 2px dashed #000;
}

.tbl-1 th {
	color: var(--pink);
	text-align: left;
	font-weight: bold;
}

.tbl-1 th,.tbl-1 td{
	padding: 16px 0 18px;
	line-height: 1.4;
}

.tbl-1 td{padding-top: 0;}

@media only screen and (min-width: 700px) {
	.tbl-1 th{width:20%;}
}



/*プライバシーポリシー*/

.policy h2{
    margin-top: 2rem;
    color: var(--pink);
}

.policy dt,.policy dd{
	line-height: 1.6;
}



/*404エラー*/

#error h2{
	font-size: var(--size36);
	color: var(--ppl);
}


/*Contactform用調整*/

.wpcf7 p,.wpcf7 label,.wpcf7,.wpcf7 select, .wpcf7 .wpcf7-list-item-label{font-size:16px!important;}

.wpcf7{
	padding: 2rem 0;
	background: unset!important;
	border: none!important;
}

.wpcf7 form{
	margin:0!important;
}

.wpcf7 input:not(.wpcf7-list-item input,.wpcf7-submit){
	width: 100%;
	height: 36px;
	margin-top: 6px;
	border: solid 1px #ccc;
}

.wpcf7 textarea{
    width: 100%;
    border: solid 1px #ccc;
    margin-top: 6px;
}

.wpcf7 form p:last-of-type{
	text-align:center;
	margin:2rem 0;
}

.wpcf7-submit{
    width: 200px;
    padding: 10px;
    background: var(--red);
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    border: 2px #fff solid;
    border-radius: 40px;
}


/*アニメーション*/

/*animation*/

@keyframes fadein{
	0% {opacity: 0;}
	100% {opacity: 1;}
}

@keyframes spreadup {
  0% {
    transform: scale(0.5) translateY(50px);
  }
  100% {
    transform: scale(1) translateY(0);
  }
}

@keyframes zoom {
	0% {transform: scale(1);}
	50% {transform: scale(1.1);}
	100% {transform: scale(1);}
}

@keyframes pulse {
	0% {transform: scale(1);}

	50% {transform: scale(1.05);}

	100% {transform: scale(1);}
}


@keyframes scaleup {
	0% {
		opacity: 0;
		transform: scale(0.2);
	}

	50%{transform: scale(1.3);}

	100% {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes shake {
	0%,100%{transform: rotate(0deg);}
	10% {transform: rotate(1deg);}
	20%,40%,60% {transform: rotate(-2deg);}
	30%,50%,70% {transform: rotate(2deg);}
	80% {transform: rotate(-1deg);}
	90% {transform: rotate(1deg);}
}

@keyframes slideout-bottom {
	0% {
		opacity: 1;
		transform: translateY(0);
	}

	100% {
		opacity: 0;
		transform: translateY(50px);
	}
}

@keyframes slideleft {
	0% {
		opacity: 0;
		transform: translateX(-100px) scale(0.5);
	}
	100% {
		opacity: 1;
		transform: translateX(0px) scale(1);
	}
}

/*親要素にoverflow: hidden;を入れる*/

.slide-right.fade{
	opacity: 0;
	transition: all 0.6s ease;
	transform: translate(100px, 0);
}

.slide-left.fade{
	opacity: 0;
	transition: all 0.6s ease;
	transform: translate(-100px, 0);
}

.fadein-center.fade{
	opacity: 0;
	transition: all 1.0s ease;
}

.slide-up.fade{
	opacity: 0;
	transition: all 0.6s ease;
	transform: translate(0, 100px);
}

.spread-up.fade{
	opacity: 0;
}

.slide-right.fade.active,.slide-left.fade.active,.fadein-center.fade.active,.slide-up.fade.active,.spread-up.fade.active{
	opacity: 1;
	transform: none;
}

.spread-up.fade.active{
	animation: spreadup 0.3s ease-out forwards;
}

.h-logo{
	animation: slideleft 0.4s ease-in-out forwards;
}