@charset "UTF-8";
/* ===================================================
	Case Studies 予約番 導入事例 CSS
====================================================== */

/* ---------------------------------------------------
Global Header Overwrite
------------------------------------------------------ */
#g_header { position: absolute;}

/* ---------------------------------------------------
	Sub Header Overwrite
------------------------------------------------------ */
@media screen and (max-width: 600px) {
.sub_header .sub_box_01 .sub_btn_01{ width: 100%; padding: 0; margin: 0;}
}

/* ---------------------------------------------------
Contents Overwrite
------------------------------------------------------ */
#contents { padding: 200px 0 0 !important;}

@media screen and (max-width: 600px) {
#contents { padding: 200px 0 0 !important;}
}

/* ---------------------------------------------------
Wrapper Cases
------------------------------------------------------ */
.wrap_cases{ background: #f1f1f1; padding: 60px 0;}
.wrap_cases .cmn_tit_02{ padding: 0 0 30px;}

@media screen and (max-width: 600px) {
.wrap_cases .cmn_tit_02{ padding: 0 0 15px;}
}

/* ---------------------------------------------------
Word Search
------------------------------------------------------ */
.wordsearch{ width: 290px; border-bottom: solid 1px #000; margin: 0 0 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 0 0 5px;}
.wordsearch input[type="text"]{ width: calc( 100% - 35px ); height: 26px; font-size: 16px; line-height: 1.2; padding: 0 0 0 5px; border: none; border-radius: 0; outline: none; background: none; }
.wordsearch input:-internal-autofill-selected { background-color: transparent !important;}
.wordsearch input[type="submit"]{ display: block; width: 26px; height: 26px; border-radius: 0; -webkit-box-sizing: content-box; -webkit-appearance: button; appearance: button; border: none; box-sizing: border-box; cursor: pointer; outline:none; background: url("../img/ico_loupe_02.svg") no-repeat 0 0; background-size: 26px; text-indent: 26px; white-space: nowrap; overflow: hidden;}

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

/* ---------------------------------------------------
Word Search
------------------------------------------------------ */
.box_tags{ padding: 10px 0 30px;}
.box_tags .tit_tags{ font-size: 20px; font-weight: bold; line-height: 1; padding: 0 0 5px;}
.box_tags ul{ display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: flex-start;}
.box_tags ul li{ font-size: 14px; line-height: 1.2; margin: 10px 10px 0 0; background: #f5f5f5; border-radius: 20px;}
.box_tags ul li a{ display: block; background: #fff; padding: 5px 10px; border-radius: 20px; transition: all 0.5s;}
.box_tags ul li a:hover{ background: #f77900; color: #fff; text-decoration: none;}

@media screen and (max-width: 600px) {
.box_tags{ padding: 30px 0;}
.box_tags .tit_tags{ font-size: 16px; padding: 0 0 5px;}
.box_tags ul li{ margin: 5px 5px 0 0; font-size: 11px; padding: 0; border-radius: 20px;}
}

/* ---------------------------------------------------
記事一覧(3件横並び／縦並び画像あり)
------------------------------------------------------ */
.postlist_01{ display: flex; justify-content: flex-start; flex-wrap: wrap; padding: 0; border-bottom: solid 1px #e4e4e4;}
.postlist_01 article{ width: 31%; margin: 0 3.5% 50px 0; border-radius: 10px; background: #fff; overflow: hidden;}
.postlist_01 article:nth-of-type(3n){ margin: 0 0 50px 0;}
.postlist_01 article a{ display: block; height: 100%;}
.postlist_01 article a:hover{ text-decoration: none;}
.postlist_01 article .box_img{ overflow: hidden; width: 100%;}
.postlist_01 article .box_img img{ width: 100%; height: auto; transition: all 0.5s; aspect-ratio: 16 / 9;}
.postlist_01 article a:hover .box_img img{ transform: scale(1.1); transform-origin: center center;}
.postlist_01 article .box_txt{ display: flex; flex-wrap: wrap; justify-content: space-between; padding: 15px 20px 30px;}
.postlist_01 article .box_txt .name{ padding: 5px 0 0; font-size: 15px; font-weight: 700; line-height: 1.5;}
.postlist_01 article .box_txt .area{ padding: 5px 0 0; font-size: 15px; line-height: 1.5;}
.postlist_01 article .box_txt .tit{ width: 100%; padding: 15px 0 0; font-size: 16px; font-weight: 700; line-height: 1.5;}
.postlist_01 article a:hover .box_txt .tit{ color: #ff7200;}

@media screen and (max-width: 600px) {
.postlist_01{ flex-direction: column; width: 100%; margin: 0; padding: 0;}
.postlist_01 article{ width: 100%; margin: 0 0 30px;}
.postlist_01 article:nth-of-type(3n){ margin: 0 0 30px;}
.postlist_01 article a{ display: flex; flex-direction: column;}
.postlist_01 article .box_img{ width: 100%;}
.postlist_01 article .box_txt{ width: 100%; padding: 3% 5% 5%;}
.postlist_01 article .box_txt .name{ padding: 2% 0 0; font-size: 13px;}
.postlist_01 article .box_txt .area{ padding: 2% 0 0; font-size: 13px;}
.postlist_01 article .box_txt .tit{ width: 100%; padding: 4% 0 0; font-size: 16px; line-height: 1.3;}
}

/* ---------------------------------------------------
Post Single
------------------------------------------------------ */
.cmn_postsingle{ background: #fff; border-radius: 20px; width: 100%; margin: 30px 0 0; padding: 60px; box-sizing: border-box;}
.cmn_postsingle article .tags .tag{ margin: 10px 0 0 10px;}
.cmn_postsingle article .box_txt{ padding: 20px 0 0; font-size: 16px; line-height: 2.25;}
.cmn_postsingle article .box_profile{ background: #f5f5f5; margin: 40px 0 0; padding: 40px; box-sizing: border-box; display: flex; justify-content: space-between; flex-wrap: wrap;}
.cmn_postsingle article .box_profile .box_01{ width: 40%; max-width: 330px;}
.cmn_postsingle article .box_profile .box_02{ width: 54%; max-width: 440px; font-size: 16px; line-height: 2.25;}
.cmn_postsingle article .box_profile .box_03{ width: 100%; font-size: 16px; line-height: 2.25; padding: 20px 0 0;}
.cmn_postsingle article .box_profile .logo{ width: 200px; padding: 0 0 30px;}
.cmn_postsingle article .box_profile .logo img{ width: 100%; height: auto;}
.cmn_postsingle article .box_profile .web a{ color: #ff8b1b; text-decoration: underline;}
.cmn_postsingle article .box_profile .web a:hover{ text-decoration: none;}

.cmn_postsingle article .box_profile .box_01 img { width:100%;}

@media screen and (max-width: 600px) {
.cmn_postsingle{ border-radius: 10px; margin: 20px 0 0; padding: 5%;}
.cmn_postsingle article .tags .tag{ margin: 5px 0 0 5px;}
.cmn_postsingle article .box_txt{ padding: 10px 0 0;}
.cmn_postsingle article .box_profile{ background: #f5f5f5; margin: 40px 0 0; padding: 5%; box-sizing: border-box; display: flex; justify-content: space-between; flex-wrap: wrap; flex-direction: column;}
.cmn_postsingle article .box_profile .box_01{ width: 100%; max-width: 100%; padding: 0 0 20px;}
.cmn_postsingle article .box_profile .box_02{ width: 100%; max-width: 100%;}
.cmn_postsingle article .box_profile .box_03{ width: 100%; padding: 10px 0 0;}
.cmn_postsingle article .box_profile .logo{ padding: 0 0 15px;}
}

/* ---------------------------------------------------
Box Demo
------------------------------------------------------ */
.box_demo{ height: 310px; background-color: #ffeba7; border-radius: 10px; background-image: url("../img/demo_img_01.webp"); background-repeat: no-repeat; background-position: left 40px bottom; background-size: 354px; margin: 50px 0 0;}
.box_demo .demo_txt_01{ font-size: 26px; font-weight: 700; line-height: 1.1; text-align: center; padding: 50px 0 60px;}
.box_demo .demo_txt_02{ display: block; width: 270px; margin: 0 100px 20px auto; font-size: 20px; font-weight: 700; line-height: 1.1; text-align: center; position: relative;}
.box_demo .demo_txt_02::before,
.box_demo .demo_txt_02::after{ content: ""; display: block; width: 26px; height: 2px; background: #000; position: absolute; bottom: 0; top: 0; margin: auto 0;}
.box_demo .demo_txt_02::before{ transform: rotate(45deg); left: 0;}
.box_demo .demo_txt_02::after{ transform: rotate(-45deg); right: 0;}
.box_demo .demo_btn{ display: block; width: 350px; margin: 0 60px 0 auto;}
.box_demo .demo_btn a{ display: block; width: 100%;}

@media screen and (max-width: 600px) {
.box_demo{ height: auto; background-position: center bottom; background-size: 80%; margin: 40px 0 0; padding: 0 0 150px;}
.box_demo .demo_txt_01{ font-size: 18px; line-height: 1.5; padding: 30px 0 20px;}
.box_demo .demo_txt_02{ width: 90%; margin: 0 auto 20px; font-size: 16px;}
.box_demo .demo_btn{ width: 90%; margin: 0 auto;}
}