@charset "UTF-8";

/*!
Theme Name: Present21
Description: Cocoon専用の子テーマ
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/* Cocoon デザイン調整 */
.toc-title:before{font-family:Font Awesome\ 5 Free;content:'\f0cb';margin-right:.3em;font-size: 18px;font-weight:900;font-style:normal}.widget_categories ul li a:before{content:"\f65d";padding-right:6px}.widget_categories ul li a:before,.widget_categories ul li ul li a:before{font-family:Font Awesome\ 5 Free;color:#fe619a;font-size: 18px;font-weight:900}.widget_categories ul li ul li a:before{content:"\f65e";padding:0 6px 0 2px}.post-date:before{content:"\f093"}.post-date:before,.post-update:before{font-family:Font Awesome\ 5 Free;padding-right:4px;font-weight:900}.post-update:before{content:"\f044"}
.home.page .author-info,.home.page .entry-title,.home.page .post-date,.home.page .post-update,.home.page .sns-follow,.home.page .sns-share{display:none}
.lzb-content-title { padding: 20px; margin: 0; }
.lazyblock { margin-bottom: 2.1em; box-shadow: 0 0 0 1px #000; border-radius: 1px; }
.lazyblock .lzb-content-title>span+h6 { margin: 0; text-decoration: none; border-bottom: none; }
.lazyblock .lzb-content-controls { padding: 20px; }
.lazyblock .components-color-palette__item-wrapper { margin: 5px 10px 5px 0; }
.lzb-gutenberg-repeater-options { margin-top: 10px; }
.article h2 { font-size: 40px; border-left: 10px solid; margin: 50px auto 20px; padding: 25px!important; font-feature-settings: "palt" 1; letter-spacing: 0.05em; }
.article h2:first-of-type { margin-top: 35px; }
.wp-block-group__inner-container > h2:first-child { margin-top: 0; }
.article h3, .comment-reply-title { font-size: 32px; margin: 50px auto 20px; padding: 12px 20px; border-left: none; border-right: none; border-top: 2px solid #bbb; border-bottom: 2px solid #bbb; border-width: 2px; line-height: 1.2; }
.article h4 { font-size: 28px; margin: 50px auto 20px; border-top: none; border-bottom: 1px dashed #bbb; }
h1.has-background, h2.has-background, h3.has-background, h4.has-background, h5.has-background, h6.has-background { padding: inherit; }
img { vertical-align: bottom; }
.logo-image { padding: 0; }
.navi-in>ul li { border-left: 1px solid rgba(255,255,255,0.3); }
.navi-in>ul li:last-child { border-right: 1px solid rgba(255,255,255,0.3); }
.wp-block-lazyblock-link { overflow: hidden; }
.hover_img a img { position: relative; transition: ease 0.4s; }
.hover_img a:hover img { transform: scale(1.15); filter: brightness(1.2); }

.related-entry-heading { border-bottom: 2px solid #ccc; }
.related-list a { background: #fff; border: 1px solid #ddd; border-radius: 3px; margin-bottom: 10px; }
.related-entry-card { display: flex; -ms-align-items: center; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.related-entry-card::after { display: none; }
.related-entry-card-thumb { width: 30%; margin-top: 0; margin-right: 0; }
.related-entry-card-content { width: 68%; margin-left: 0; margin-bottom: 0; padding: 0; }

/* BASIC
---------------------------------- */
html:not(.wp-toolbar) { font-size: 62.5%; }
body:not(.wp-admin) { font-size: 22px; text-align: justify; }
.pc { display: block; }
.sp { display: none; }
.small { font-size: 70%; }

/* HEADLINE
---------------------------------- */
.timeleft { display: inline-block; }
.timer { font-size: 22px; padding: 10px 0; text-align: center; font-weight: bold; line-height: 1.2; }
.count_num { font-size: 150%; display: inline-block; padding: 0 3px; margin: 0 3px; border-radius: 5px; }
.header-in { display: table; width: auto; flex-direction: initial; }
.header-in img { max-width: 100%; height: auto; }
#header-mv { position: absolute; }
#header-mv video { width: 100%; height: auto; }
#header-arrow { position: absolute; }

.navi-in>ul .sub-menu li { height: auto; line-height: 1.5; }
.navi-in>ul .sub-menu li + li { border-top: 1px dashed rgba(255,255,255,0.2); }
.navi-in>ul .sub-menu li a { padding-top: 1rem; padding-bottom: 1rem; font-size: 1.4rem; }

/* CONTENTS
---------------------------------- */
.cat-label { background: #fff; }
.page .article .article-header { display: none; }
.banner { display: table; margin: 0 auto; }
.iconlist-box { margin-left: 0; margin-right: 0; margin-bottom: 0!important; }
.iconlist-box ul { display: table; margin: 0 auto; padding: 0; font-size: 22px; }
.iconlist-box ul li { position: relative; margin: 0; padding: 0.3em 0 0.3em 1.5em; }
.iconlist-box ul li:before { position: absolute; left: 20px; }
.iconlist-title { font-size: 28px; margin-bottom: 10px; }
.banner { transition: ease 0.2s all; }
.banner:hover { filter: brightness(1.3);}
.btn_spark { position: relative; overflow: hidden; z-index: 1; }
.btn_spark::before { position: absolute; content: ''; display: inline-block; top: -180px; left: 0; width: 30px; height: 100%; background-color: #fff; animation: shiny 2s ease-out infinite; pointer-events: none; }
.ect-2-columns .entry-card-title { font-size: 1.6rem; line-height: 1.3; margin-bottom: 1rem; }
.ect-2-columns .entry-card-content { padding: 1rem 0; }
.ect-2-columns .entry-card-snippet { font-size: 1.3rem; }
@-webkit-keyframes shiny {
	0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
	60% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
	61% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
	100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}

.step .article-header.entry-header { display: none; }
.step .step_headline { position: relative; left: -50px; width: calc(100% + 100px);}
.step h2 { font-size: 30px; }

.widget-entry-card-thumb { display: none; }
.widget-entry-card-content { padding: 0.5em 0; margin: 0; margin-right: 40px!important; }

/* VIDEO
---------------------------------- */
.video-group { position: relative; padding-top: 56.25%; }
.video-group iframe { position: absolute; width: 100%; height: 100%; top: 0; }
.video-group-id { display: none; }
.chapter { position: relative; background: #333; padding-bottom: 10px; }
.chapter_sub { margin-bottom: 0!important; padding: 10px; text-align: center; color: #fff; font-weight: bold; line-height: 1.3; }
.chapter_inner { width: 90%; margin: 0 auto; padding: 10px 0; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; margin-bottom: 0!important; }
.chapter_item { display: inline-block; background: #fff; width: 180px; margin: 0 5px!important; list-style: none; vertical-align: bottom; top:0; position: relative; transition: 0.3s ease; }
.chapter_item:hover { top: -10px; }
.chapter_item a { cursor: pointer; color: inherit; }
.chapter_item a img { transition: ease 0.3s; }
.chapter_item a:hover img { filter: brightness(1.3); }
.chapter_thumb { position: relative; overflow: hidden; background: #fff; }
.ribbon_wrap { width: 120px; height: 120px; position: absolute; left: 0; top: 0; transform:rotate(-45deg); z-index: 10; pointer-events: none; }
.ribbon_txt { width: 100%; background: #d33; padding: 5px 0; font-size: 1.3rem; font-weight: bold; color: #fff; text-align: center; line-height: 1; pointer-events: none; }
.chapter_item.nowplay .chapter_thumb img { filter: brightness(0.6) blur(3px); }
.chapter_item.nowplay .chapter_thumb:after { content: "▶︎ 再生中"; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); border-radius: 5px; background: #fff; color: #cf2626; font-size: 18px; font-weight: bold; padding: 5px 10px; pointer-events: none; }
.chapter_meta { padding: 12px; }
.chapter_time { display: table; background: rgba(0,0,0,0.7); margin: 0 auto!important; padding: 0.3em 0.5em; font-size: 13px; color: #fff; line-height: 1; position: absolute; bottom: 3px; right: 3px; pointer-events: none; }
.chapter_title { margin-bottom: 0!important; font-size: 13px; line-height: 1.3; white-space: normal; }
.chapter_btn { display: block; background: #fff; color: #ff8000; border: 2px solid #ff8000; border-radius: 5px; margin: 12px 0 0; padding: 5px 0; font-size: 16px; font-weight: bold; text-align: center; cursor: pointer; transition: 0.2s ease; }
.chapter_btn:hover { background: #ff8000; color: #fff; }
.lbtn { cursor: pointer; padding: 1.5%; width: 5%; position: absolute; left: 0; top: 50%; color: #fff; font-size: 30px; }
.rbtn { cursor: pointer; padding: 1.5%; width: 5%; position: absolute; right: 0; top: 50%; color: #fff; font-size: 30px; }
.video_link { text-align: center; }
.video_link a { display: inline-block; background: #ddd; padding: 5px 20px; margin: 10px auto; border-radius: 30px; font-size: 16px; text-decoration: none; text-align: center; color: inherit; }
.comingsoon_bg {content: "";background: rgba(0,0,0,0.8);display: block;position: absolute;top: 0;border-radius: 5px;width: 100%;height: 100%;z-index: 1;}
.comingsoon_txt { display: table; position: relative; top: 50%; left: 50%; transform: translate(-50%,-50%); background: #d94243; }
.comingsoon_txt p { margin: 2rem; font-size: 4rem; font-weight: bold; color: #fff; line-height: 1; }

.video-container{max-width: 100%;}

/* LINE
---------------------------------- */
.line_wrap { border-radius: 5px; margin: 50px auto; padding: 50px; box-shadow: 0 0 30px #9cd29d; }
.line { display: flex; flex-wrap: wrap; justify-content: space-between; }
.line_item { position: relative; width: 48%; border: 1px solid #777; margin-top: 50px; }
.line_item h3 { display: table; position: relative; transform: translateY(-50%); background: #fff; border: none; margin: 0 auto; padding: 0 20px; font-size: 25px; text-align: center; line-height: 1; }
.line_qr { width: 40%; margin: 20px auto 0; }
.line_btn { margin: 20px auto 0; }
.line_btn p { margin: 0 0 10px; text-align: center; }
.line_btn a { display: table; margin: 20px auto 0; text-align: center; }
.line_id { font-size: 120%; font-weight: bold; }
.line_step { background: #f5f5f5; margin: 30px!important; padding: 10px 10px 10px 30px; font-size: 14px; }

/* COMMENT
---------------------------------- */
.special_wrap { border-radius: 5px; margin: 50px auto; padding: 50px; box-shadow: 0 0 30px #ffc800; }
.step_inner { display: flex; justify-content: space-between; }
.step_item { position: relative; width: 30%; list-style: none; }
.step_item + .step_item::before { position: absolute; top: 30%; left: -35px; content: "\f054"; font-family: "Font Awesome 5 Free"; font-size: 50px; font-weight: 700; }
.step_img { margin: 20px auto; text-align: center; }
.step_txt { font-size: 14px; text-align: center; }
.qa_item { display: flex; border-bottom: 1px dashed #ccc; -ms-align-items: center; align-items: center; padding: 10px; }
.qa_num { width: 10%; font-size: 50px; font-weight: bold; text-align: center; }
.qa_txt { width: 90%; font-size: 22px; }
#comment_area h3 { text-align: center; margin-top: 0; }
.comment-form-cookies-consent { display: none; }
.comment-body { border-bottom: 1px dashed #aaa; padding: 20px 0; font-size: 80%; }
.comment-author { display: inline-block; font-size: 1.6rem; }
.comment-author img { display: inline-block; margin: 0; }
cite.fn { font-style: normal; font-weight: bold; }
cite.fn:after { content: "さん："!important; }
span.says { display: none; }
.comment-meta { display: inline-block; font-size: 1.6rem; }
.commentlist { padding: 20px 0; }
.commentlist .children{ padding-left: 50px; background: url(img/reply.png) no-repeat 10px 20px; }
.commentlist .reply { display: none; }
.commentlist li { list-style: none; }
.page-numbers.current { background: #555; color: #fff; }
.page-numbers.next, .page-numbers.prev { width: 5em; }
/* .commentlist .bypostauthor,.comment-author-sugiura,comment-author-kato2018,.comment-author-ishii2018 { background: #f7ffee; color: #144c29; } */
.commentlist .bypostauthor cite.fn:after, .commentlist .comment.byuser cite.fn:after { content: "："!important; }
#comment_area input[type=text],#comment_area input[type=email], #comment_area textarea { width: 100%; font-size: 2.2rem; font-family: inherit; padding: 10px; margin: 0 0 10px; border-radius: 5px; border: 1px solid #ccc; }
#comment_area label p { font-weight: bold; margin: 1em 0 0.5em; }
#comment_area .commentNotesAfter { text-align: center; }
#comment_area .form-submit { text-align: center; }
#comment_area input[type=submit],#comment_area button { display: table; font-size: 25px; font-weight: bold; font-family: inherit; padding: 20px 50px; margin: 20px auto!important; border-radius: 5px; color: #fff!important; background: #0277BD; border-radius: 10px; transition: 0.2s; -webkit-box-shadow: 0 1px 2px 1px rgba(0,0,0,0.2); box-shadow: 0 3px 5px 1px rgba(0,0,0,0.2); border: none; cursor: pointer; line-height: 1.2;}
#comment_area input[type=submit]:hover,#comment_area button:hover { background: #039BE5; -webkit-box-shadow: 0 2px 7px 1px rgba(0,0,0,0.3); box-shadow: 0 10px 20px 1px rgba(0,0,0,0.2); }
#comment_area button .small { font-size: 70%; }
.comment-awaiting-moderation { display: block; font-style: normal; background: #c8f2ff; border: 1px solid #7eb7e8; font-size: 80%; color: #004682; padding: 10px; }
.comment-awaiting-moderation + br { display: none; }
.comment-awaiting-moderation:before { content:"コメント頂き有難うございます。" }
.comment-awaiting-moderation:after { display: block; content:"しばらくしてから反映されます。" }
.children li{list-style: none;}
.pickup-comment { margin-bottom: 10px; background: #fff8d4; border: 2px solid #ffe9a6; border-radius: 10px; list-style: none; padding: 0 20px 20px; }
.pickup-comment .comment-body { border-bottom: none; margin: 0; padding: 0; }
.pickup-comment .comment-meta { text-decoration: underline; }
.pickup-img {position: relative; left: -15px; margin-bottom: 10px;}
.comcount { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; justify-content: center; -ms-align-items: center; align-items: center; border-bottom: 1px solid; font-weight: bold; font-size: 3rem; line-height: 1; padding: 1rem; }
.comcount p { margin: 0 0.5rem; }
.comcountnum { padding: 1rem; background: #333; font-size: 200%; color: #fff; border-radius: 5px; }
.submited { display: none; background: #fff; }
.submited-inner { text-align: center; padding: 30px 0; }
.submited-sub { display: table; font-size: 4rem; font-weight: bold; border-bottom: 2px dotted #aaa; margin: 0 auto 20px; }
.comment-form input, .comment-form textarea { font-family: inherit; }

.comlist { width: 100%; word-break: break-all; font-size: 1.3rem; }
.comlist-name { width: 15%; }
.comlist-date { width: 20%; }
.comlist-txt { width: 65%; }

.com-count { display: flex; justify-content: center; background: #fff7cb; padding: 0; -ms-align-items: center; align-items: center; }
.com-count_sub { font-size: 1.2em; font-weight: bold; margin: 3rem!important; line-height: 1; }
.com-count_num { font-size: 1.7em; margin: 3rem!important; line-height: 1; font-family: sans-serif; font-weight: 800; }

.go-to-top-button span { color: #ccc; }


/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
	/* BASIC
	---------------------------------- */
	.pc { display: none; }
	.sp { display: block; }
	html { font-size: 4.5vw; }
	img { max-width: auto; height: auto; }
	
	/* HEADLINE
	---------------------------------- */
	.timer { font-size: 4vw; }
	.timeleft { margin-top: 1vw; }
	.breadcrumb .sp { display: inline-block; }
	.header-in { align-items: flex-start; }
	.header-in img { width: 100%; height: auto; }
	#header-arrow { display: none; }
	
	/* CONTENTS
	---------------------------------- */
	main.main, div.sidebar { padding: 3vw; }
	.entry-content { margin-top: 1rem; }
	.article h2:first-of-type { margin-top: 0; }
	.article h2 { padding: 3vw 1vw!important; border-left-width: 5px; font-size: 4.5vw; letter-spacing: -0.03em; }
	.article h3, .comment-reply-title { margin: 10vw auto 5vw; font-size: 4.5vw; }
	.wp-block-image { margin-bottom: 5vw!important; }
	figure { margin-bottom: 5vw!important; }
	.memo-box { font-size: 3.5vw; }
	
	.mobile-menu-buttons { background: rgba(0,0,0,0.8); box-shadow: none; }
	.mobile-menu-buttons .menu-button, .mobile-menu-buttons .menu-button a { color: #fff;text-decoration: none; }
	.mobile-menu-buttons .menu-caption { font-size: 3vw; }
	
	.fz-28px { font-size: 5vw; }
	
	.column-wrap, .column-wrap>div { margin-bottom: 0!important; }
	
	.step .step_headline { left: 0; width: 100%; }
	.step h2 { font-size: 6vw; }
	
	.related-list { display: flex; justify-content: space-between; }
	.related-list a { width: 49%; }
	.related-entry-card-thumb { width: 100%; margin-bottom: 5px!important; }
	.related-entry-card-content { width: 100%; }
	.related-entry-card-title { font-size: 3.5vw; }
	
	/* VIDEO
	---------------------------------- */
	.lbtn, .rbtn { font-size: 4vw; }
	.chapter_sub { font-size: 4.7vw; }
	.chapter_inner { padding: 0!important; }
	.chapter_item { width: 50vw; }
	.chapter_meta { padding: 3vw; }
	.chapter_title { font-size: 3vw; }
	.chapter_btn { font-size: 4vw; }
	.video_link a { font-size: 3.5vw; }
	.ytp-watermark { display: none; }
	
	/* LINE
	---------------------------------- */
	.line { margin-top: 3rem; }
	.line_wrap { padding: 5vw; }
	.line_item { width: 100%; margin-top: 0; font-size: 3.5vw; }
	.line_item h3 { font-size: 4.5vw; margin: 0 auto; }
	.line_btn { margin: 0 auto; }
	.line_btn p { margin: 3vw 0; }
	.line_btn a { width: 60%; margin: 3vw auto 0; }
	.line_step { margin: 3vw!important; font-size: 3.5vw; }
	
	/* COMMENT
	---------------------------------- */
	.special_wrap { padding: 5vw; }
	/*.special_wrap h2 { font-size: 4vw; }*/
	.iconlist-title { font-size: 4vw; margin-bottom: 0; }
	.iconlist-box { padding: 5%; }
	.iconlist-box ul { font-size: 4vw; }
	.step_inner { padding-left: 0!important; flex-wrap: wrap; }
	.step_item { width: 100%; display: flex; flex-wrap: wrap; align-items: center; }
	.step_item+.step_item { margin-top: 10vw; }
	.step_item+.step_item:before { content: "\f078"; transform: translateX(-50%); font-size: 10vw; left: 50%; top: -10vw; line-height: 1; }
	.step_img { width: 30%; margin: 0 auto 0 0; }
	.step_txt { width: 60%; text-align: left; }
	.qa_item { justify-content: space-between; padding: 2vw 0; }
	.qa_num { width: 10%; font-size: 10vw; }
	.qa_txt { width: 85%; font-size: 4vw; text-align: left; }
	#comment_area label p { font-size: 4.5vw; }
	#comment_area input[type=text], #comment_area input[type=email], #comment_area textarea { font-size: 4.5vw; }
	.commentNotesAfter { font-size: 3vw; }
	#comment_area input[type=submit], #comment_area button { width: 100%; padding: 5vw 0; font-size: 6vw; }
	.comment-author, .comment-meta { font-size: 3.2vw; }
	.comment-edit-link { display: none; }
	.comment-body > p { font-size: 4vw; }
	
	.com-count_sub { font-size: 4vw; }
	.com-count_num { font-size: 7vw; }
	
	/* FOOTER
	---------------------------------- */
	.footer-bottom { margin-top: 0; }
	.copyright { font-size: 2.5vw; }
}