@charset "utf-8"; /* ------------------------------------------------------------------------------ */ @media print, screen and (min-width: 769px) { /* #pageColumn */ #pageColumn{} #pageColumn header.pageHeader{ height: 458px; background: #EEE url("../img/column/header.bg.jpg") no-repeat no-repeat; padding: 170px 0 0 60px; } #pageColumn header.pageHeader .title{ margin: 0; padding: 0 0 10px 28px; border-left: 5px solid #FFF; } #pageColumn header.pageHeader .title span:first-child{ color: #FFF; font-size: 24px; line-height: 1.5; font-weight: var(--font-sans-bold); display: block; } #pageColumn header.pageHeader .title span:last-child{ color: #FFF; font-size: 50px; line-height: 1.3; font-weight: var(--font-sans-bold); display: block; } #pageColumn header.pageHeader p{ margin: 0; padding: 20px 0 20px 28px; border-left: 5px solid rgba(255,255,255,0.32); color: #FFF; width: 620px; font-size: 18px; line-height: 1.8; } #pageColumn div.panelMain section.categoryList{} #pageColumn div.panelMain section.categoryList > ul{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; } #pageColumn div.panelMain section.categoryList > ul > li{ width: 48%; background: #FFF; border-radius: 10px; margin-bottom: 24px; padding: 20px; box-shadow: 10px 10px 10px rgba(0,0,0,0.07); position: relative; } #pageColumn div.panelMain section.categoryList > ul > li:nth-child(even){ margin-left: 4%; } #pageColumn div.panelMain section.categoryList > ul > li.homes{ background: #FFF url("../img/column/icon.category.homes.svg") no-repeat right top; } #pageColumn div.panelMain section.categoryList > ul > li.money{ background: #FFF url("../img/column/icon.category.money.svg") no-repeat right top; } #pageColumn div.panelMain section.categoryList > ul > li.insurance{ background: #FFF url("../img/column/icon.category.insurance.svg") no-repeat right top; } #pageColumn div.panelMain section.categoryList > ul > li.health{ background: #FFF url("../img/column/icon.category.health.svg") no-repeat right top; } #pageColumn div.panelMain section.categoryList > ul > li.life-planning{} #pageColumn div.panelMain section.categoryList > ul > li.senior-item{ background: #FFF url("../img/column/icon.category.senior-item.svg") no-repeat right top; } #pageColumn div.panelMain section.categoryList > ul > li.inside{ background: #FFF url("../img/column/icon.category.inside.svg") no-repeat right top; } #pageColumn div.panelMain section.categoryList > ul > li.other{ background: #FFF url("../img/column/icon.category.other.svg") no-repeat right top; } #pageColumn div.panelMain section.categoryList > ul > li.special{ background: #FFF url("../img/column/icon.category.special.svg") no-repeat right top; } #pageColumn div.panelMain section.categoryList > ul > li.biz{ background: #FFF url("../img/column/icon.category.biz.svg") no-repeat right top; } #pageColumn div.panelMain section.categoryList > ul > li h2{ font-size: 20px; line-height: 1.4; font-weight: var(--font-sans-bold); margin: 0 80px 20px 0; padding: 0 0 20px 0; position: relative; } #pageColumn div.panelMain section.categoryList > ul > li h2::before{ content: ''; display: block; border-bottom: 3px solid #1C4A6D; width: 32px; height: 0; position: absolute; bottom: 3px; left: 0; } #pageColumn div.panelMain section.categoryList > ul > li ul.subCategory{ list-style: none; margin: 0; padding: 0; } #pageColumn div.panelMain section.categoryList > ul > li ul.subCategory li{ background: url("../img/common/list.icon.arrow.02.svg") no-repeat left top 9px; padding: 0 0 0 13px; margin: 0 0 3px 0; } #pageColumn div.panelMain section.categoryList > ul > li ul.subCategory li:first-child{ padding-right: 100px; } #pageColumn div.panelMain section.categoryList > ul > li ul.subCategory li a{ font-size: 16px; line-height: 1.4; font-weight: var(--font-sans-medium); } #pageColumn div.panelMain section.categoryList > ul > li ul.tags{ list-style: none; margin: 20px 0 0px -5px; padding: 0; display: flex; flex-wrap: wrap; } #pageColumn div.panelMain section.categoryList > ul > li ul.tags li{ font-weight: var(--font-sans-medium); font-size: 12px; margin: 0 0 5px 5px; } #pageColumn div.panelMain section.categoryList > ul > li ul.tags li a{ display: inline-block; background: #F5F0ED; color: #63636D; border-radius: 3px; text-decoration: none; padding: 5px 10px; } #pageColumn div.panelMain section.categoryList > ul > li a.more{ display: block; width: 100px; height: 30px; background: #FFF url("../img/common/btn.icon.arrow.01.svg") no-repeat right 10px center; font-weight: var(--font-sans-medium); padding: 0 0 0 13px; line-height: 24px; text-decoration: none; font-size: 12px; position: absolute; top: 90px; right: 20px; color: #BF2424; border: 2px solid #BF2424; border-radius: 20px; } #pageColumn div.panelMain section.entryList.latest{ margin-top: 60px; } #pageColumn div.panelMain section.entryList{ margin: 0 0 70px; } #pageColumn div.panelMain section.entryList a.more{ display: block; width: 280px; height: 60px; background: #FFF url("../img/common/btn.icon.arrow.01.svg") no-repeat right 28px center; font-weight: var(--font-sans-medium); line-height: 53px; text-decoration: none; text-align: center; font-size: 18px; color: #BF2424; border: 2px solid #BF2424; border-radius: 30px; margin: 40px auto 0 auto; } #pageColumn div.panelMain section.columnist{ margin: 0 0 60px 0; } #pageColumn div.panelMain section.columnist ul{ list-style: none; margin: 40px 0 40px -2%; padding: 0; display: flex; flex-wrap: wrap; justify-content: space-between; } #pageColumn div.panelMain section.columnist ul li{ width: 46%; margin: 0 0 10px 2%; } #pageColumn div.panelMain section.columnist ul li a{ position: relative; text-decoration: none; border-bottom: 2px dashed #FFF; display: block; } #pageColumn div.panelMain section.columnist ul li a article{ display: flex; flex-direction: column; min-height: 120px; padding: 0 0 0 140px; } #pageColumn div.panelMain section.columnist ul li a article div.image{ width: 110px; height: 110px; border-radius: 60px; background: #FFF; border: 8px solid #FFF; overflow: hidden; position: absolute; left: 0; top: 0; } #pageColumn div.panelMain section.columnist ul li a article div.image img{ object-fit: cover; width: 100%; height: 100%; } #pageColumn div.panelMain section.columnist ul li a article h3{ color: #000; font-size: 14px; line-height: 1.5; font-weight: var(--font-sans-bold); order: 2; margin: 0; padding: 0; } #pageColumn div.panelMain section.columnist ul li a article p{ color: #707070; font-size: 14px; line-height: 1.5; order: 1; margin: 0 0 10px; } #pageColumn div.panelMain section.columnist a.more{ display: block; width: 328px; height: 60px; background: #FFF url("../img/common/btn.icon.arrow.01.svg") no-repeat right 28px center; font-weight: var(--font-sans-medium); line-height: 53px; text-decoration: none; text-align: center; font-size: 18px; color: #BF2424; border: 2px solid #BF2424; border-radius: 30px; margin: 0 auto; } /* #pageColumnTheme */ #pageColumnTheme{} #pageColumnTheme header.pageHeader{ height: 243px; background: #EEE url("../img/column/header.bg.jpg") no-repeat; padding: 150px 0 0 60px; } #pageColumnTheme header.pageHeader .title{ margin: 0; padding: 0; } #pageColumnTheme header.pageHeader .title{ color: #FFF; font-size: 30px; line-height: 1.5; font-weight: var(--font-sans-bold); display: block; } #pageColumnTheme h1.title{ border-left: 5px solid #1C4A6D; font-size: 30px; line-height: 1.5; margin: 40px 0 40px 40px; padding: 5px 0 5px 20px; font-weight: var(--font-sans-black); } /* #pageColumnSeries */ #pageColumnSeries{} #pageColumnSeries header.pageHeader{ height: 243px; background: #EEE url("../img/column/header.bg.jpg") no-repeat; padding: 150px 0 0 60px; } #pageColumnSeries header.pageHeader .title{ margin: 0; padding: 0; } #pageColumnSeries header.pageHeader .title{ color: #FFF; font-size: 30px; line-height: 1.5; font-weight: var(--font-sans-bold); display: block; } #pageColumnSeries h1.title{ border-left: 5px solid #1C4A6D; font-size: 30px; line-height: 1.5; margin: 40px 0 40px 40px; padding: 5px 0 5px 20px; font-weight: var(--font-sans-black); } #pageColumnSeries ul.seriesList{ list-style: none; margin: 0 0 0 -2%; padding: 0; display: flex; flex-wrap: wrap; } #pageColumnSeries ul.seriesList li{ margin: 0 0 20px 2%; width: 48%; } #pageColumnSeries ul.seriesList li a{} #pageColumnSeries ul.seriesList li a img{ max-width: 100%; } /* #pageColumnSeriesEntry */ #pageColumnSeriesEntry{} #pageColumnSeriesEntry header.pageHeader{ height: 243px; background: #EEE url("../img/column/header.bg.jpg") no-repeat; padding: 150px 0 0 60px; } #pageColumnSeriesEntry header.pageHeader .title{ margin: 0; padding: 0; } #pageColumnSeriesEntry header.pageHeader .title{ color: #FFF; font-size: 30px; line-height: 1.5; font-weight: var(--font-sans-bold); display: block; } #pageColumnSeriesEntry h1.title{ border-left: 5px solid #1C4A6D; font-size: 30px; line-height: 1.5; margin: 40px 0 40px 40px; padding: 5px 0 5px 20px; font-weight: var(--font-sans-black); } #pageColumnSeriesEntry div.headerImage{ margin: 0 0 30px; } #pageColumnSeriesEntry div.headerImage img{ max-width: 100%; } #pageColumnSeriesEntry p.headerDescription{ font-size: 15px; line-height: 1.6; margin: 0 0 30px 0; background: #FFF; padding: 15px 20px; } /* #pageColumnEntry */ #pageColumnEntry{} #pageColumnEntry div.layout2column div.panelMain{ padding: 20px 30px 30px; } #pageColumnEntry header.pageHeader{ height: 243px; background: #EEE url("../img/column/header.bg.jpg") no-repeat; padding: 150px 0 0 60px; } #pageColumnEntry header.pageHeader .title{ margin: 0; padding: 0; } #pageColumnEntry header.pageHeader .title{ color: #FFF; font-size: 30px; line-height: 1.5; font-weight: var(--font-sans-bold); display: block; } #pageColumnEntry div.layout2column > p.title{ border-left: 5px solid #1C4A6D; font-size: 30px; line-height: 1.5; margin: 40px 0 40px 40px; padding: 5px 0 5px 20px; font-weight: var(--font-sans-black); } #pageColumnEntry nav.entryNavi{ margin: 0 0 20px 0; } #pageColumnEntry nav.entryNavi ul{ list-style: none; margin: 0; padding: 0; display: flex; justify-content: space-between; align-items: center; } #pageColumnEntry nav.entryNavi ul li{ width: 33%; margin: 0; } #pageColumnEntry nav.entryNavi ul li.prev{ text-align: left; background: url("../img/common/icon.arrow.01.left.svg") no-repeat left top 2px; font-size: 15px; line-height: 20px; height: 20px; padding: 0 0 0 25px; display: inline-block; } #pageColumnEntry nav.entryNavi ul li.index{ width: 34%; text-align: center; } #pageColumnEntry nav.entryNavi ul li.index a{ display: block; width: 159px; height: 40px; line-height: 35px; font-size: 14px; font-weight: var(--font-sans-medium); background: #FFF url("../img/common/btn.icon.arrow.02.svg") no-repeat left 15px center; padding: 0 0 0 7px; text-align: center; color: #BF2424; border: 2px solid #BF2424; border-radius: 20px; text-decoration: none; margin: 0 auto; } #pageColumnEntry nav.entryNavi ul li.next{ text-align: right; background: url("../img/common/icon.arrow.01.right.svg") no-repeat right top 2px; font-size: 15px; line-height: 20px; height: 20px; padding: 0 25px 0 0; display: inline-block; } #pageColumnEntry article.entry{ background: #FFF; padding: 40px 22px; } #pageColumnEntry article.entry header{ margin: 0 0 30px; } #pageColumnEntry article.entry header h1{ font-size: 30px; line-height: 1.4; font-weight: var(--font-sans-bold); border-left: 5px solid #1C4A6D; padding: 5px 0 5px 26px; margin: 0 0 0 0; } #pageColumnEntry article.entry header ul.info{ list-style: none; margin: 0; padding: 15px 0 15px 26px; border-left: 5px solid #E4E4E4; } #pageColumnEntry article.entry header ul.info li{ font-size: 16px; line-height: 1.6; margin: 0 0 3px; } #pageColumnEntry article.entry footer section.related{ margin: 0 0 50px; } #pageColumnEntry article.entry footer section.related h2{ font-size: 21px; font-weight: normal; line-height: 1; margin: 0 0 20px; background: #1C4A6D; padding: 5px 10px; color: #FFF; } #pageColumnEntry article.entry footer section.related ul{ list-style: none; margin: 0; padding: 0; } #pageColumnEntry article.entry footer section.related ul li{ font-size: 16px; line-height: 1.4; margin: 0 0 9px; background: url("../img/common/list.icon.arrow.02.svg") no-repeat left top 7px; padding: 0 0 0 13px; } #pageColumnEntry article.entry footer section.series{ margin: 0 0 50px; } #pageColumnEntry article.entry footer section.series h2{ font-size: 21px; font-weight: normal; line-height: 1; margin: 0 0 20px; background: #1C4A6D; padding: 5px 10px; color: #FFF; } #pageColumnEntry article.entry footer section.series div.banner{ margin: 0 0 20px; } #pageColumnEntry article.entry footer section.series div.banner img{ max-width: 100%; text-align: center; } #pageColumnEntry article.entry footer section.comment{ margin: 0 0 50px; } #pageColumnEntry article.entry footer section.comment h2{ font-size: 21px; font-weight: normal; line-height: 1; margin: 0 0 20px; background: #1C4A6D; padding: 5px 10px; color: #FFF; } #pageColumnEntry article.entry footer section.comment p{} #pageColumnEntry article.entry footer section.comment table, #pageColumnEntry article.entry footer section.comment tbody{ width: 100%; display: block; } #pageColumnEntry article.entry footer section.comment tr{ width: 100%; display: flex; align-items: center; } #pageColumnEntry article.entry footer section.comment tr td:first-child{ width: 80%; margin: 0 10px 0 0; } #pageColumnEntry article.entry footer section.comment tr td textarea{ width: 100%; height: 90px; } #pageColumnEntry article.entry footer section.comment tr td button[type="submit"]{ display: block; width: 80px; height: 40px; line-height: 35px; font-size: 14px; font-weight: var(--font-sans-medium); background: #FFF; padding: 0; text-align: center; color: #BF2424; border: 2px solid #BF2424; border-radius: 20px; margin: 0 auto; cursor: pointer; } #pageColumnEntry article.entry footer section.info{ margin: 0 0 50px; } #pageColumnEntry article.entry footer section.info ul{ list-style: none; margin: 0; padding: 15px 0 15px 26px; border-left: 5px solid #E4E4E4; } #pageColumnEntry article.entry footer section.info ul li{ font-size: 16px; line-height: 1.6; margin: 0 0 3px; } #pageColumnEntry article.entry footer section.social{ margin: 0 0 50px; } #pageColumnEntry article.entry footer section.social ul{ list-style: none; display: flex; margin: 0; padding: 0; } #pageColumnEntry article.entry footer section.social ul li{ margin: 0 10px 0 0; } #pageColumnEntry article.entry footer section.writer{ margin: 0 0 50px; } #pageColumnEntry article.entry footer section.writer h2{ font-size: 21px; font-weight: normal; line-height: 1; margin: 0 0 20px; background: #1C4A6D; padding: 5px 10px; color: #FFF; } #pageColumnEntry article.entry footer section.writer div.profile{ display: flex; align-items: flex-start; margin: 0 0 30px; } #pageColumnEntry article.entry footer section.writer div.profile > a{ margin: 0 15px 15px 0; max-width: 210px; } #pageColumnEntry article.entry footer section.writer div.profile > a img{ margin: 0 15px 15px 0; border-radius: 150px; } #pageColumnEntry article.entry footer section.writer div.profile h3{ margin: 0 0 20px; padding: 0; font-size: 19px; line-height: 1.5; } #pageColumnEntry article.entry footer section.writer div.profile p{ font-size: 15px; line-height: 1.7; margin: 0; padding: 0; } #pageColumnEntry article.entry footer section.writer section.writer_related{} #pageColumnEntry article.entry footer section.writer section.writer_related h3{ position: relative; margin: 0 0 20px 0; padding: 0 0 15px 0; border-bottom: 1px solid #DDD; font-size: 21px; font-weight: normal; line-height: 1; } #pageColumnEntry article.entry footer section.writer section.writer_related h3:before{ content: ''; border-bottom: 3px solid #1C4A6D; width: 100px; position: absolute; left: 0; bottom: -2px; } #pageColumnEntry article.entry footer section.writer section.writer_related ul{ list-style: none; margin: 0; padding: 0; } #pageColumnEntry article.entry footer section.writer section.writer_related ul li{ margin: 0 0 10px; text-align: center; } #pageColumnEntry article.entry footer section.writer section.writer_related ul li img{ max-width: 100%; } /* #pageColumnEntryComment */ #pageColumnEntryComment{} #pageColumnEntryComment header.pageHeader{ height: 243px; background: #EEE url("../img/column/header.bg.jpg") no-repeat; padding: 150px 0 0 60px; } #pageColumnEntryComment header.pageHeader .title{ margin: 0; padding: 0; } #pageColumnEntryComment header.pageHeader .title{ color: #FFF; font-size: 30px; line-height: 1.5; font-weight: var(--font-sans-bold); display: block; } #pageColumnEntryComment div.panelMain{ background: #F4F5F6; padding: 40px 42px; border-top: 1px solid #D2D2D2; } #pageColumnEntryComment div.panelMain article{ background: #FFF; padding: 30px; } #pageColumnEntryComment div.panelMain h1.title{ border-left: 5px solid #1C4A6D; font-size: 30px; line-height: 1.5; margin: 0px 0 40px 0px; padding: 5px 0 5px 20px; font-weight: var(--font-sans-bold); } #pageColumnEntryComment div.panelMain p{ font-size: 16px; line-height: 1.9; margin: 0 0 70px; } #pageColumnEntryComment div.panelMain a{ display: block; width: 328px; height: 60px; background: #FFF url("../img/common/btn.icon.arrow.01.svg") no-repeat right 28px center; font-weight: var(--font-sans-medium); line-height: 53px; text-decoration: none; text-align: center; font-size: 18px; color: #BF2424; border: 2px solid #BF2424; border-radius: 30px; margin: 0 auto 100px; } /* #pageColumnist */ #pageColumnist{} #pageColumnist div.panelMain{ background: #F4F5F6; padding: 40px 42px; border-top: 1px solid #D2D2D2; } #pageColumnist div.panelMain p.intro{ font-size: 16px; line-height: 1.9; margin: 0 0 30px; } #pageColumnist div.panelMain section.columnist{ margin: 0 0 60px 0; } #pageColumnist div.panelMain section.columnist ul{ list-style: none; margin: 40px 0 40px -2%; padding: 0; display: flex; flex-wrap: wrap; } #pageColumnist div.panelMain section.columnist ul li{ width: 31%; margin: 0 0 10px 2%; } #pageColumnist div.panelMain section.columnist ul li a{ position: relative; text-decoration: none; border-bottom: 2px dashed #FFF; display: block; } #pageColumnist div.panelMain section.columnist ul li a article{ display: flex; flex-direction: column; min-height: 120px; padding: 0 0 0 130px; } #pageColumnist div.panelMain section.columnist ul li a article div.image{ width: 110px; height: 110px; border-radius: 60px; background: #FFF; border: 8px solid #FFF; overflow: hidden; position: absolute; left: 0; top: 0; } #pageColumnist div.panelMain section.columnist ul li a article div.image img{ object-fit: cover; width: 100%; height: 100%; } #pageColumnist div.panelMain section.columnist ul li a article h3{ color: #000; font-size: 14px; line-height: 1.5; font-weight: var(--font-sans-bold); order: 2; margin: 0; padding: 0; } #pageColumnist div.panelMain section.columnist ul li a article p{ color: #707070; font-size: 15px; line-height: 1.5; order: 1; margin: 0 0 5px; } /* #pageColumnistDetail */ #pageColumnistDetail{} #pageColumnistDetail div.panelMain{ background: #F4F5F6; padding: 40px 42px; border-top: 1px solid #D2D2D2; } #pageColumnistDetail div.panelMain > article{ margin: 0 0 40px; padding-bottom: 1px; } #pageColumnistDetail div.panelMain section.profile{ display: flex; align-items: flex-start; margin: -10px 0 0px 0; padding-bottom: 50px; } #pageColumnistDetail div.panelMain section.profile img{ min-width: 200px; width: 200px; height: 200px; border-radius: 100px; object-fit: cover; margin: 10px 20px 20px 0; } #pageColumnistDetail div.panelMain section.profile p{ margin: 0 0 30px; font-size: 16px; line-height: 1.9; } #pageColumnistDetail div.panelMain section.career{ padding: 0 0 50px; } #pageColumnistDetail div.panelMain section.appearance{ padding: 0 0 50px; } #pageColumnistDetail div.panelMain section.book{ padding: 0 0 50px; } #pageColumnistDetail div.panelMain section.column{ padding: 0 0 50px; } #pageColumnistDetail div.panelMain section.related_web{ padding: 0 0 50px; } #pageColumnistDetail div.panelMain section.related_web ul{ list-style: none; margin: 0; padding: 0; } #pageColumnistDetail div.panelMain section.related_web ul li{ margin: 0 0 10px; font-size: 15px; line-height: 1.5; text-align: center; background: #FFF; padding: 5px 0; } #pageColumnistDetail div.panelMain section.related_web ul li a{ display: block; } #pageColumnistDetail div.panelMain section.related_link{ padding: 0 0 50px; } #pageColumnistDetail div.panelMain section.related_link ul{ list-style: none; margin: 0; padding: 0; } #pageColumnistDetail div.panelMain section.related_link ul li{ margin: 0 0 10px; font-size: 15px; line-height: 1.5; } #pageColumnistDetail div.panelMain section.related_link ul li a{ display: block; } #pageColumnistDetail div.panelMain ul.entryList{ list-style: none; margin: 0 0 30px; padding: 0; display: flex; flex-wrap: wrap; gap: 25px 3%; } #pageColumnistDetail div.panelMain ul.entryList li{ background: #FFF; border-radius: 10px; box-shadow: 10px 10px 10px rgba(0,0,0,0.07); width: 48.5%; } #pageColumnistDetail div.panelMain ul.entryList li a{ display: flex; padding: 20px 20px 15px 20px; text-decoration: none; height: 100%; } #pageColumnistDetail div.panelMain ul.entryList li a article{ display: flex; flex-direction: column; height: 100%; position: relative; padding-bottom: 30px; } #pageColumnistDetail div.panelMain ul.entryList li a article p.category{ order: 1; background: #A5C654; color: #FFF; font-size: 16px; line-height: 1.5; font-weight: var(--font-sans-bold); margin: 0 0 13px; padding: 5px 13px; } #pageColumnistDetail div.panelMain ul.entryList li a article div.body{ order: 2; display: flex; flex-wrap: wrap; position: relative; padding: 0 0 0 calc(150px + 15px); margin: 0 0 0 0; min-height: 150px; } #pageColumnistDetail div.panelMain ul.entryList li a article div.body div.image{ order: 1; width: 150px; min-width: 150px; margin: 0; position: absolute; left: 0; top: 0; } #pageColumnistDetail div.panelMain ul.entryList li a article div.body div.image img{ width: 100%; margin: 5px 0 0 0; } #pageColumnistDetail div.panelMain ul.entryList li a article div.body .title{ order: 2; font-size: 20px; line-height: 1.4; color: #000; font-weight: var(--font-sans-bold); margin: 0 0 12px; padding: 0; } #pageColumnistDetail div.panelMain ul.entryList li a article div.body p{ order: 3; font-size: 16px; line-height: 1.5; color: #000; margin: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; } #pageColumnistDetail div.panelMain ul.entryList li a article p.date{ order: 3; margin: 0; color: #707070; position: absolute; left: 0; bottom: 0; } } @media screen and (max-width: 768px) { /* #pageColumn */ #pageColumn{ background: #F4F5F6; } #pageColumn header.pageHeader{ background: #1C4A6D url("../img/column/header.bg.sp.jpg") no-repeat left -15.23vw top -7.55vw; background-size: 107.68vw auto; padding: 66.95vw 0 8vw 5.33vw; } #pageColumn header.pageHeader .title{ margin: 0; padding: 0 0 10px 5.33vw; border-left: 5px solid #FFF; } #pageColumn header.pageHeader .title span:first-child{ color: #FFF; font-size: 3.47vw; line-height: 1.5; font-weight: var(--font-sans-bold); display: block; } #pageColumn header.pageHeader .title span:last-child{ color: #FFF; font-size: 6.51vw; line-height: 1.3; font-weight: var(--font-sans-bold); display: block; } #pageColumn header.pageHeader p{ margin: 0; padding: 2.6vw 7vw 2.6vw 5.33vw; border-left: 5px solid rgba(255,255,255,0.32); color: #FFF; font-size: max(3.47vw,var(--font-size-min)); line-height: 1.8; } #pageColumn div.panelMain section.categoryList{ padding: 9.62vw 0 0 0; } #pageColumn div.panelMain section.categoryList > ul{ list-style: none; margin: 0 5.33vw; padding: 0; } #pageColumn div.panelMain section.categoryList > ul > li{ background: #FFF; border-radius: 10px; margin-bottom: 5.33vw; padding: 3.25vw; box-shadow: 10px 10px 10px rgba(0,0,0,0.07); position: relative; } #pageColumn div.panelMain section.categoryList > ul > li.homes{ background: #FFF url("../img/column/icon.category.homes.svg") no-repeat right top; background-size: 16.93vw auto; } #pageColumn div.panelMain section.categoryList > ul > li.money{ background: #FFF url("../img/column/icon.category.money.svg") no-repeat right top; background-size: 16.93vw auto; } #pageColumn div.panelMain section.categoryList > ul > li.insurance{ background: #FFF url("../img/column/icon.category.insurance.svg") no-repeat right top; background-size: 16.93vw auto; } #pageColumn div.panelMain section.categoryList > ul > li.health{ background: #FFF url("../img/column/icon.category.health.svg") no-repeat right top; background-size: 16.93vw auto; } #pageColumn div.panelMain section.categoryList > ul > li.life-planning{} #pageColumn div.panelMain section.categoryList > ul > li.senior-item{ background: #FFF url("../img/column/icon.category.senior-item.svg") no-repeat right top; background-size: 16.93vw auto; } #pageColumn div.panelMain section.categoryList > ul > li.inside{ background: #FFF url("../img/column/icon.category.inside.svg") no-repeat right top; background-size: 16.93vw auto; } #pageColumn div.panelMain section.categoryList > ul > li.other{ background: #FFF url("../img/column/icon.category.other.svg") no-repeat right top; background-size: 16.93vw auto; } #pageColumn div.panelMain section.categoryList > ul > li.special{ background: #FFF url("../img/column/icon.category.special.svg") no-repeat right top; background-size: 16.93vw auto; } #pageColumn div.panelMain section.categoryList > ul > li.biz{ background: #FFF url("../img/column/icon.category.biz.svg") no-repeat right top; background-size: 16.93vw auto; } #pageColumn div.panelMain section.categoryList > ul > li h2{ font-size: 5.21vw; line-height: 1.5; font-weight: var(--font-sans-bold); margin: 0 18vw 5vw 0; padding: 0 0 5vw 0; position: relative; } #pageColumn div.panelMain section.categoryList > ul > li h2::before{ content: ''; display: block; border-bottom: 3px solid #1C4A6D; width: 11.52vw; height: 0; position: absolute; bottom: 3px; left: 0; } #pageColumn div.panelMain section.categoryList > ul > li ul.subCategory{ list-style: none; margin: 0 0 5vw 0; padding: 0; } #pageColumn div.panelMain section.categoryList > ul > li ul.subCategory li{ background: url("../img/common/list.icon.arrow.02.svg") no-repeat left center; padding: 0 0 0 13px; margin: 0 0 1vw 0; } #pageColumn div.panelMain section.categoryList > ul > li ul.subCategory li a{ font-size: max(3.47vw,var(--font-size-min)); line-height: 1.4; font-weight: var(--font-sans-medium); } #pageColumn div.panelMain section.categoryList > ul > li ul.tags{ list-style: none; margin: 0px 0 0px 0; padding: 0; display: flex; flex-wrap: wrap; gap: 3vw; } #pageColumn div.panelMain section.categoryList > ul > li ul.tags li{ font-weight: var(--font-sans-medium); font-size: max(3.47vw,var(--font-size-min)); margin: 0; } #pageColumn div.panelMain section.categoryList > ul > li ul.tags li a{ display: inline-block; background: #F5F0ED; color: #63636D; border-radius: 3px; text-decoration: none; padding: 5px 10px; } #pageColumn div.panelMain section.categoryList > ul > li a.more{ display: block; width: 40.36vw; height: 9.11vw; margin: 0 auto 5vw; background: #FFF url("../img/common/btn.icon.arrow.01.svg") no-repeat right 4vw center; font-weight: var(--font-sans-medium); padding: 0 2vw 0 0; line-height: 8.2vw; text-align: center; text-decoration: none; font-size: max(3.47vw,var(--font-size-min)); color: #BF2424; border: 2px solid #BF2424; border-radius: 5vw; } #pageColumn div.panelMain section.entryList.latest{ margin-top: 10vw; } #pageColumn div.panelMain section.entryList{ margin: 0 0 10vw; } #pageColumn div.panelMain section.entryList h2{ margin-left: 5.33vw; margin-right: 5.33vw; } #pageColumn div.panelMain section.entryList a.more{ display: block; width: 57.29vw; height: 11.72vw; background: #FFF url("../img/common/btn.icon.arrow.01.svg") no-repeat right 4vw center; font-weight: var(--font-sans-medium); line-height: 10.5vw; text-decoration: none; text-align: center; font-size: max(3.47vw,var(--font-size-min)); color: #BF2424; border: 2px solid #BF2424; border-radius: 6vw; margin: 0 auto; } #pageColumn div.panelMain section.columnist{ margin: 0 5.33vw; padding: 0 0 10vw; } #pageColumn div.panelMain section.columnist ul{ list-style: none; margin: 0px 0 8vw; padding: 0; } #pageColumn div.panelMain section.columnist ul li{ margin: 0 0 3vw; } #pageColumn div.panelMain section.columnist ul li a{ position: relative; text-decoration: none; border-bottom: 2px dashed #FFF; display: block; padding: 0 0 3vw; } #pageColumn div.panelMain section.columnist ul li a article{ display: flex; flex-direction: column; min-height: 23.33vw; padding: 0 0 0 26.33vw; } #pageColumn div.panelMain section.columnist ul li a article div.image{ width: 23.33vw; height: 23.33vw; border-radius: 15vw; background: #FFF; border: 6px solid #FFF; overflow: hidden; position: absolute; left: 0; top: 0; } #pageColumn div.panelMain section.columnist ul li a article div.image img{ object-fit: cover; width: 100%; height: 100%; } #pageColumn div.panelMain section.columnist ul li a article h3{ color: #000; font-size: max(3.47vw,var(--font-size-min)); line-height: 1.5; font-weight: var(--font-sans-bold); order: 2; margin: 0; padding: 0; } #pageColumn div.panelMain section.columnist ul li a article p{ color: #707070; font-size: max(3.47vw,var(--font-size-min)); line-height: 1.5; order: 1; margin: 0 0 2vw; } #pageColumn div.panelMain section.columnist a.more{ display: block; width: 57.29vw; height: 11.72vw; background: #FFF url("../img/common/btn.icon.arrow.01.svg") no-repeat right 4vw center; font-weight: var(--font-sans-medium); line-height: 10.5vw; text-decoration: none; text-align: center; font-size: max(3.47vw,var(--font-size-min)); color: #BF2424; border: 2px solid #BF2424; border-radius: 6vw; margin: 0 auto; } /* #pageColumnTheme */ #pageColumnTheme{ background: #F4F5F6; } #pageColumnTheme header.pageHeader{ background: #1C4A6D url("../img/column/header.bg.sp.jpg") no-repeat left -15.23vw top -7.55vw; background-size: 107.68vw auto; padding: 55.95vw 0 8vw 5.33vw; } #pageColumnTheme header.pageHeader .title{ display: none; } #pageColumnTheme h1.title{ background: #1C4A6D; width: 100%; margin: 0 0 5vw 0; padding: 1vw 5.33vw 1vw 11vw; color: #FFF; font-size: 6.67vw; line-height: 1.5; font-weight: var(--font-sans-bold); display: block; position: relative; } #pageColumnTheme h1.title::before{ content: ''; width: 5px; height: 100%; display: block; background: #FFF; position: absolute; left: 5.33vw; top: 0; } #pageColumnTheme h1.title::after{ content: ''; width: 100%; height: 5vw; display: block; background: #1C4A6D; position: absolute; left: 0; bottom: -5vw; } #pageColumnTheme div.panelMain{ padding: 10vw 0 0; } #pageColumnTheme div.layout2column{ display: flex; flex-wrap: wrap; } #pageColumnTheme div.layout2column div.panelMain{ order: 1; width: 100%; } #pageColumnTheme div.layout2column aside.panelSub{ order: 2; width: 100%; padding-bottom: 20vw; } /* #pageColumnSeries */ #pageColumnSeries{ border-top: 4vw solid #1C4A6D; } #pageColumnSeries header.pageHeader{ display: none; } #pageColumnSeries h1.title{ border-left: 5px solid #1C4A6D; font-size: max(5.33vw,var(--font-size-min)); line-height: 1.5; margin: 5.33vw; padding: 1vw 0 1vw 4vw; font-weight: var(--font-sans-bold); } #pageColumnSeries ul.seriesList{ list-style: none; margin: 0 5.33vw 0; padding: 0; } #pageColumnSeries ul.seriesList li{ margin: 0 0 2vw; } #pageColumnSeries ul.seriesList li a{} #pageColumnSeries ul.seriesList li a img{ max-width: 100%; } /* #pageColumnSeriesEntry */ #pageColumnSeriesEntry{ border-top: 4vw solid #1C4A6D; } #pageColumnSeriesEntry header.pageHeader{ display: none; } #pageColumnSeriesEntry h1.title{ border-left: 5px solid #1C4A6D; font-size: max(5.33vw,var(--font-size-min)); line-height: 1.5; margin: 5.33vw; padding: 1vw 0 1vw 4vw; font-weight: var(--font-sans-bold); } #pageColumnSeriesEntry div.headerImage{ margin: 0 5.33vw 5vw; } #pageColumnSeriesEntry div.headerImage img{ max-width: 100%; } #pageColumnSeriesEntry p.headerDescription{ font-size: max(3.47vw,var(--font-size-min)); line-height: 1.6; margin: 0 0 5vw 0; background: #FFF; padding: 3vw; } /* #pageColumnEntry */ #pageColumnEntry{ background: #F4F5F6; border-top: 4vw solid #1C4A6D; } #pageColumnEntry header.pageHeader{ display: none; } #pageColumnEntry div.layout2column > p.title{ border-left: 5px solid #1C4A6D; font-size: 5.21vw; line-height: 1.5; margin: 5.33vw 5.33vw; padding: 1vw 0 1vw 3vw; font-weight: var(--font-sans-bold); } #pageColumnEntry nav.entryNavi{ margin: 0 5.33vw 5vw; } #pageColumnEntry nav.entryNavi ul{ list-style: none; margin: 0; padding: 0; display: flex; justify-content: space-between; align-items: center; } #pageColumnEntry nav.entryNavi ul li{ width: 33%; margin: 0; } #pageColumnEntry nav.entryNavi ul li.prev{ text-align: left; background: url("../img/common/icon.arrow.01.left.sp.svg") no-repeat left center; background-size: 4.13vw auto; font-size: max(3.47vw,var(--font-size-min)); line-height: 9vw; height: 9.33vw; padding: 0 0 0 5.5vw; display: inline-block; } #pageColumnEntry nav.entryNavi ul li.index{ width: 34%; text-align: center; } #pageColumnEntry nav.entryNavi ul li.index a{ display: block; width: 31.6vw; height: 9.33vw; line-height: 9vw; font-size: max(3.47vw,var(--font-size-min)); font-weight: var(--font-sans-medium); background: #FFF url("../img/common/btn.icon.arrow.02.sp.svg") no-repeat left 3vw center; background-size: 1.47vw auto; padding: 0 0 0 3vw; text-align: center; color: #BF2424; border: 2px solid #BF2424; border-radius: 5vw; text-decoration: none; margin: 0 auto; } #pageColumnEntry nav.entryNavi ul li.next{ text-align: right; background: url("../img/common/icon.arrow.01.right.sp.svg") no-repeat right center; background-size: 4.13vw auto; font-size: max(3.47vw,var(--font-size-min)); line-height: 9vw; height: 9.33vw; padding: 0 5.5vw 0 0; display: inline-block; } #pageColumnEntry article.entry{ background: #FFF; padding: 4vw; margin: 0 5.33vw; } #pageColumnEntry article.entry header{ margin: 0 0 5vw; } #pageColumnEntry article.entry header h1{ font-size: 5.21vw; line-height: 1.4; font-weight: var(--font-sans-bold); border-left: 5px solid #1C4A6D; padding: 1vw 0 1vw 3vw; margin: 0 0 0 0; } #pageColumnEntry article.entry header ul.info{ list-style: none; margin: 0; padding: 1vw 0 1vw 3vw; border-left: 5px solid #E4E4E4; } #pageColumnEntry article.entry header ul.info li{ font-size: max(3.47vw,var(--font-size-min)); line-height: 1.6; margin: 0 0 1vw; } #pageColumnEntry article.entry footer section.related{ margin: 0 0 6vw; } #pageColumnEntry article.entry footer section.related h2{ font-size: max(4vw,var(--font-size-min)); font-weight: normal; line-height: 1; margin: 0 0 5vw; background: #1C4A6D; padding: 1vw 3vw; color: #FFF; } #pageColumnEntry article.entry footer section.related ul{ list-style: none; margin: 0; padding: 0; } #pageColumnEntry article.entry footer section.related ul li{ font-size: max(3.47vw,var(--font-size-min)); line-height: 1.4; margin: 0 0 9px; background: url("../img/common/list.icon.arrow.02.svg") no-repeat left top 7px; padding: 0 0 0 13px; } #pageColumnEntry article.entry footer section.series{ margin: 0 0 6vw; } #pageColumnEntry article.entry footer section.series h2{ font-size: max(4vw,var(--font-size-min)); font-weight: normal; line-height: 1; margin: 0 0 5vw; background: #1C4A6D; padding: 1vw 3vw; color: #FFF; } #pageColumnEntry article.entry footer section.series div.banner{ margin: 0 0 20px; } #pageColumnEntry article.entry footer section.series div.banner img{ max-width: 100%; text-align: center; } #pageColumnEntry article.entry footer section.comment{ margin: 0 0 6vw; } #pageColumnEntry article.entry footer section.comment h2{ font-size: max(4vw,var(--font-size-min)); font-weight: normal; line-height: 1; margin: 0 0 4vw; background: #1C4A6D; padding: 1vw 3vw; color: #FFF; } #pageColumnEntry article.entry footer section.comment p{ font-size: max(3.47vw,var(--font-size-min)); line-height: 1.4; } #pageColumnEntry article.entry footer section.comment table, #pageColumnEntry article.entry footer section.comment tbody{ width: 100%; display: block; } #pageColumnEntry article.entry footer section.comment tr{ width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 5vw; } #pageColumnEntry article.entry footer section.comment tr td:first-child{ width: 80vw; margin: 0; } #pageColumnEntry article.entry footer section.comment tr td textarea{ width: 100%; height: 17vw; } #pageColumnEntry article.entry footer section.comment tr td button[type="submit"]{ display: block; width: 13vw; height: 5.5vw; line-height: 4.5vw; font-size: max(3.47vw,var(--font-size-min)); font-weight: var(--font-sans-medium); background: #FFF; padding: 0; text-align: center; color: #BF2424; border: 2px solid #BF2424; border-radius: 3vw; margin: 0 auto; cursor: pointer; } #pageColumnEntry article.entry footer section.info{ margin: 0 0 6vw; } #pageColumnEntry article.entry footer section.info ul{ list-style: none; margin: 0; padding: 1vw 0 1vw 3vw; border-left: 5px solid #E4E4E4; } #pageColumnEntry article.entry footer section.info ul li{ font-size: max(3.47vw,var(--font-size-min)); line-height: 1.6; margin: 0 0 3px; } #pageColumnEntry article.entry footer section.social{ margin: 0 0 6vw; } #pageColumnEntry article.entry footer section.social ul{ list-style: none; display: flex; margin: 0; padding: 0; gap: 0 3vw; } #pageColumnEntry article.entry footer section.social ul li{ margin: 0 0 0 0; } #pageColumnEntry article.entry footer section.writer{ margin: 0 0 6vw; } #pageColumnEntry article.entry footer section.writer h2{ font-size: max(4vw,var(--font-size-min)); font-weight: normal; line-height: 1; margin: 0 0 5vw; background: #1C4A6D; padding: 1vw 3vw; color: #FFF; } #pageColumnEntry article.entry footer section.writer div.profile{ display: flex; align-items: flex-start; justify-content: space-between; margin: 0 0 5vw; gap: 3vw; } #pageColumnEntry article.entry footer section.writer div.profile > a{ margin: 0 0 3vw 0; min-width: 26vw; width: 26vw; } #pageColumnEntry article.entry footer section.writer div.profile > a img{ margin: 0 0; border-radius: 20vw; } #pageColumnEntry article.entry footer section.writer div.profile h3{ margin: 0 0 3vw; padding: 0; font-size: max(3.47vw,var(--font-size-min)); line-height: 1.5; } #pageColumnEntry article.entry footer section.writer div.profile p{ font-size: max(3.47vw,var(--font-size-min)); line-height: 1.7; margin: 0; padding: 0; } #pageColumnEntry article.entry footer section.writer section.writer_related{} #pageColumnEntry article.entry footer section.writer section.writer_related h3{ position: relative; margin: 0 0 3vw 0; padding: 0 0 3vw 0; border-bottom: 1px solid #DDD; font-size: max(4vw,var(--font-size-min)); font-weight: normal; line-height: 1; } #pageColumnEntry article.entry footer section.writer section.writer_related h3:before{ content: ''; border-bottom: 3px solid #1C4A6D; width: 100px; position: absolute; left: 0; bottom: -2px; } #pageColumnEntry article.entry footer section.writer section.writer_related ul{ list-style: none; margin: 0; padding: 0; } #pageColumnEntry article.entry footer section.writer section.writer_related ul li{ margin: 0 0 2vw; text-align: center; } #pageColumnEntry article.entry footer section.writer section.writer_related ul li img{ max-width: 100%; } /* #pageColumnEntryComment */ #pageColumnEntryComment{ border-top: 4vw solid #1C4A6D; } #pageColumnEntryComment header.pageHeader{ display: none; } #pageColumnEntryComment div.panelMain{ padding: 5.33vw; } #pageColumnEntryComment div.panelMain article{ background: #FFF; padding: 4vw; } #pageColumnEntryComment div.panelMain h1.title{ border-left: 5px solid #1C4A6D; font-size: max(4vw,var(--font-size-min)); line-height: 1.5; margin: 0px 0 5vw 0px; padding: 1vw 0 1vw 4vw; font-weight: var(--font-sans-bold); } #pageColumnEntryComment div.panelMain p{ font-size: max(3.47vw,var(--font-size-min)); line-height: 1.9; margin: 0 0 7vw; } #pageColumnEntryComment div.panelMain a{ display: block; width: 43.73vw; height: 10vw; background: #FFF url("../img/common/btn.icon.arrow.01.svg") no-repeat right 4vw center; background-size: 1.3vw auto; font-weight: var(--font-sans-medium); line-height: 9vw; text-decoration: none; text-align: center; font-size: max(3.47vw,var(--font-size-min)); color: #BF2424; border: 2px solid #BF2424; border-radius: 30px; margin: 0 auto 10vw; } /* #pageColumnist */ #pageColumnist{ border-top: 4vw solid #1C4A6D; } #pageColumnist div.panelMain{ background: #F4F5F6; } #pageColumnist div.panelMain p.intro{ font-size: max(3.47vw,var(--font-size-min)); line-height: 1.8; margin: 0 5.33vw 7vw; } #pageColumnist div.panelMain section.columnist{ margin: 0 5.33vw 0; padding: 0 0 10vw; } #pageColumnist div.panelMain section.columnist ul{ list-style: none; margin: 0px 0; padding: 0; } #pageColumnist div.panelMain section.columnist ul li{ margin: 0 0 3vw; } #pageColumnist div.panelMain section.columnist ul li a{ position: relative; text-decoration: none; border-bottom: 2px dashed #FFF; display: block; padding: 0 0 3vw; } #pageColumnist div.panelMain section.columnist ul li a article{ display: flex; flex-direction: column; min-height: 23.33vw; padding: 0 0 0 26.33vw; } #pageColumnist div.panelMain section.columnist ul li a article div.image{ width: 23.33vw; height: 23.33vw; border-radius: 15vw; background: #FFF; border: 6px solid #FFF; overflow: hidden; position: absolute; left: 0; top: 0; } #pageColumnist div.panelMain section.columnist ul li a article div.image img{ object-fit: cover; width: 100%; height: 100%; } #pageColumnist div.panelMain section.columnist ul li a article h3{ color: #000; font-size: max(3.47vw,var(--font-size-min)); line-height: 1.5; font-weight: var(--font-sans-bold); order: 2; margin: 0; padding: 0; } #pageColumnist div.panelMain section.columnist ul li a article p{ color: #707070; font-size: max(3.47vw,var(--font-size-min)); line-height: 1.5; order: 1; margin: 0 0 2vw; } /* #pageColumnistDetail */ #pageColumnistDetail{ border-top: 4vw solid #1C4A6D; } #pageColumnistDetail div.panelMain{ background: #F4F5F6; } #pageColumnistDetail div.panelMain section.profile{ margin: 0px 5.33vw 5vw; } #pageColumnistDetail div.panelMain section.profile img{ width: 50vw; height: 50vw; border-radius: 25vw; border: 6px solid #FFF; object-fit: cover; margin: 0px auto 5vw; display: block; } #pageColumnistDetail div.panelMain section.profile p{ margin: 0 0 5vw; font-size: max(3.47vw,var(--font-size-min)); line-height: 1.9; } #pageColumnistDetail div.panelMain section.parts{ margin-left: 5.33vw; margin-right: 5.33vw; } #pageColumnistDetail div.panelMain section.career{ margin: 0 0 5vw; } #pageColumnistDetail div.panelMain section.appearance{ margin: 0 0 5vw; } #pageColumnistDetail div.panelMain section.book{ margin: 0 0 5vw; } #pageColumnistDetail div.panelMain section.column{ margin: 10vw 0 5vw; } #pageColumnistDetail div.panelMain section.related_web{ margin: 0 0 5vw; } #pageColumnistDetail div.panelMain section.related_web ul{ list-style: none; margin: 0 5.33vw; padding: 0; } #pageColumnistDetail div.panelMain section.related_web ul li{ margin: 0 0 10px; font-size: max(3.47vw,var(--font-size-min)); line-height: 1.5; text-align: center; background: #FFF; padding: 5px 0; } #pageColumnistDetail div.panelMain section.related_web ul li a{ display: block; } #pageColumnistDetail div.panelMain section.related_link{ margin: 0 0 5vw; } #pageColumnistDetail div.panelMain section.related_link ul{ list-style: none; margin: 0 5.33vw; padding: 0; } #pageColumnistDetail div.panelMain section.related_link ul li{ margin: 0 0 10px; font-size: max(3.47vw,var(--font-size-min)); line-height: 1.5; } #pageColumnistDetail div.panelMain section.related_link ul li a{ display: block; } #pageColumnistDetail div.panelMain ul.entryList{ list-style: none; margin: 0 5.33vw 10vw; padding: 0; } #pageColumnistDetail div.panelMain ul.entryList li{ background: #FFF; border-radius: 10px; box-shadow: 10px 10px 10px rgba(0,0,0,0.07); margin: 0 0 3vw; } #pageColumnistDetail div.panelMain ul.entryList li a{ display: flex; padding: 4vw 4vw; text-decoration: none; height: 100%; } #pageColumnistDetail div.panelMain ul.entryList li a article{ display: flex; flex-direction: column; height: 100%; position: relative; padding-bottom: 30px; } #pageColumnistDetail div.panelMain ul.entryList li a article p.category{ order: 1; background: #A5C654; color: #FFF; font-size: max(3.47vw,var(--font-size-min)); line-height: 1.5; font-weight: var(--font-sans-bold); margin: 0 0 13px; padding: 5px 13px; } #pageColumnistDetail div.panelMain ul.entryList li a article div.body{ order: 2; display: flex; flex-wrap: wrap; position: relative; padding: 0 0 0 calc(30.13vw + 3vw); margin: 0 0 0 0; min-height: 30.13vw; } #pageColumnistDetail div.panelMain ul.entryList li a article div.body div.image{ order: 1; width: 30.13vw; min-width: 30.13vw; margin: 0; position: absolute; left: 0; top: 0; } #pageColumnistDetail div.panelMain ul.entryList li a article div.body div.image img{ width: 100%; margin: 5px 0 0 0; } #pageColumnistDetail div.panelMain ul.entryList li a article div.body .title{ order: 2; font-size: max(3.73vw,var(--font-size-min)); line-height: 1.4; color: #000; font-weight: var(--font-sans-bold); margin: 0 0 12px; padding: 0; } #pageColumnistDetail div.panelMain ul.entryList li a article div.body p{ order: 3; font-size: max(3.47vw,var(--font-size-min)); line-height: 1.5; color: #000; margin: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; } #pageColumnistDetail div.panelMain ul.entryList li a article p.date{ order: 3; margin: 0; color: #707070; position: absolute; left: 0; bottom: 0; } #pageColumnistDetail div.panelMain section.box08{ margin: 10vw 5.33vw; padding: 0 0 10vw; } #pageColumnistDetail div.panelMain section.box08 h2{ font-size: 22px; font-weight: bold; line-height: 33px; margin: 0 auto 25px; padding: 10px 0px; background: #FFF; text-align: center; color: #1F89A7; border: 2px solid #1F89A7; width: 245px; position: relative; } #pageColumnistDetail div.panelMain section.box08 h2:after{ content: ''; width: 0px; height: 0px; border-width: 8px 5px; border-style: solid; border-color: #1F89A7 transparent transparent transparent; position: absolute; bottom: -18px; left: 0px; right: 0px; margin: 0 auto; } #pageColumnistDetail div.panelMain section.box08 p.intro{ margin: 0 0 20px; font-size: 22px; line-height: 35px; text-align: center; font-weight: 500; } #pageColumnistDetail div.panelMain section.box08 p.intro br{ display: none; } #pageColumnistDetail div.panelMain section.box08 a.button{ display: block; padding: 3vw 0; width: 90vw; margin: 0 auto; background: #E36747; font-size: max(4vw,var(--font-size-min)); line-height: 27px; text-decoration: none; color: #FFF; text-align: center; font-weight: bold; border-radius: 9px; border-bottom: 3px solid #C94826; } #pageColumnistDetail div.panelMain section.box08 a.button span{ font-size: max(3.47vw,var(--font-size-min)); font-weight: 500; } } /* ------------------------------------------------------------------------------ */ @media print, screen and (min-width: 769px) { #pageNews{ padding: 0; } #pageNews header.pageHeader{ height: 458px; background: url("../img/news/header.bg.jpg") no-repeat; padding: 170px 0 0 60px; } #pageNews header.pageHeader .title{ margin: 0; padding: 25px 0 25px 28px; border-left: 5px solid #FFF; color: #FFF; font-size: 50px; line-height: 1.3; font-weight: var(--font-sans-bold); display: block; } #pageNews header.pageHeader p.intro{ margin: 0 0 25px; padding: 20px 0 20px 28px; border-left: 5px solid rgba(255,255,255,0.32); color: #FFF; width: 780px; font-size: 18px; line-height: 1.8; } #pageNews header.pageHeader p.intro a{ color: #FFF; } #pageNews div.panelMain{ background: #F4F5F6; padding: 40px 42px; } #pageNews div.panelMain ul.newsList{ list-style: none; margin: 0 0 40px; padding: 0; border-top: 1px solid #D2D2D2; } #pageNews div.panelMain ul.newsList li{ border-bottom: 1px solid #D2D2D2; } #pageNews div.panelMain ul.newsList li a{ display: flex; min-height: 75px; align-items: center; text-decoration: none; padding: 15px 0; } #pageNews div.panelMain ul.newsList li a span.date{ font-size: 16px; color: #000; white-space: nowrap; margin: 0 37px 0 10px; } #pageNews div.panelMain ul.newsList li a span.category{ font-size: 16px; line-height: 1; padding: 7px 0; display: block; white-space: nowrap; margin: 0 33px 0 0; background: #FFF; width: 87px; text-align: center; } #pageNews div.panelMain ul.newsList li a span.category.news{ background: #E5C213; color: #000; } #pageNews div.panelMain ul.newsList li a span.category.seminar{ background: #108EE8; color: #FFF; } #pageNews div.panelMain ul.newsList li a span.category.job{ background: #F65C5C; color: #FFF; } #pageNews div.panelMain ul.newsList li a span.text{ font-size: 16px; color: #000; text-decoration: underline; } #pageNews div.panelMain ul.newsList li a:hover span.text{ text-decoration: none; } #pageNewsEntry{} #pageNewsEntry div.panelMain{ background: #F4F5F6; padding: 40px 42px; border-top: 1px solid #D2D2D2; } #pageNewsEntry div.panelMain section.relatedLink{} #pageNewsEntry div.panelMain section.relatedLink ul{ } #pageNewsEntry div.panelMain section.relatedLink ul li{ font-size: 16px; line-height: 1.6; } #pageNewsEntry div.panelMain nav.entryNavi{ margin: 50px 0 80px 0; } #pageNewsEntry div.panelMain nav.entryNavi ul{ display: flex; justify-content: space-between; list-style: none; margin: 0; padding: 0; align-items: center; } #pageNewsEntry div.panelMain nav.entryNavi ul li{ width: 33%; } #pageNewsEntry div.panelMain nav.entryNavi ul li.prev{ text-align: left; background: url("../img/common/icon.arrow.01.left.svg") no-repeat left top 2px; font-size: 15px; line-height: 20px; height: 20px; padding: 0 0 0 25px; display: inline-block; } #pageNewsEntry div.panelMain nav.entryNavi ul li.index{ width: 34%; text-align: center; } #pageNewsEntry div.panelMain nav.entryNavi ul li.index a{ display: block; width: 159px; height: 40px; line-height: 35px; font-size: 14px; font-weight: var(--font-sans-medium); background: #FFF url("../img/common/btn.icon.arrow.02.svg") no-repeat left 15px center; padding: 0 0 0 7px; text-align: center; color: #BF2424; border: 2px solid #BF2424; border-radius: 20px; text-decoration: none; margin: 0 auto; } #pageNewsEntry div.panelMain nav.entryNavi ul li.next{ text-align: right; background: url("../img/common/icon.arrow.01.right.svg") no-repeat right top 2px; font-size: 15px; line-height: 20px; height: 20px; padding: 0 25px 0 0; display: inline-block; } } @media screen and (max-width: 768px) { #pageNews{} #pageNews header.pageHeader{ background: #1C4A6D url("../img/news/header.bg.sp.jpg") no-repeat left -15.23vw top -7.55vw; background-size: 107.68vw auto; padding: 66vw 0 8vw 5.33vw; } #pageNews header.pageHeader .title{ margin: 0; padding: 1vw 0 1vw 4vw; border-left: 5px solid #FFF; color: #FFF; font-size: 6.67vw; line-height: 1.3; font-weight: var(--font-sans-bold); display: block; } #pageNews header.pageHeader p.intro{ margin: 0; padding: 2vw 0 2vw 4vw; border-left: 5px solid rgba(255,255,255,0.32); color: #FFF; font-size: max(3.47vw,var(--font-size-min)); line-height: 1.8; } #pageNews header.pageHeader p.intro a{ color: #FFF; } #pageNews div.panelMain{ background: #F4F5F6; padding: 5.33vw 5.33vw; } #pageNews div.panelMain ul.newsList{ list-style: none; margin: 0 0 40px; padding: 0; border-top: 1px solid #D2D2D2; } #pageNews div.panelMain ul.newsList li{ border-bottom: 1px solid #D2D2D2; } #pageNews div.panelMain ul.newsList li a{ display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; text-decoration: none; padding: 3vw 0; } #pageNews div.panelMain ul.newsList li a span.date{ font-size: max(3.47vw,var(--font-size-min)); line-height: 1; padding: 1vw 0; color: #000; white-space: nowrap; margin: 0 5vw 0 0; } #pageNews div.panelMain ul.newsList li a span.category{ font-size: max(3.47vw,var(--font-size-min)); line-height: 1; padding: 1vw 0; display: block; white-space: nowrap; margin: 0; background: #FFF; min-width: 80px; width: 20vw; text-align: center; } #pageNews div.panelMain ul.newsList li a span.category.news{ background: #E5C213; color: #000; } #pageNews div.panelMain ul.newsList li a span.category.seminar{ background: #108EE8; color: #FFF; } #pageNews div.panelMain ul.newsList li a span.category.job{ background: #F65C5C; color: #FFF; } #pageNews div.panelMain ul.newsList li a span.text{ font-size: max(3.47vw,var(--font-size-min)); color: #000; line-height: 1.6; text-decoration: underline; display: block; margin: 3vw 0 0 0; width: 100%; } #pageNews div.panelMain ul.newsList li a:hover span.text{ text-decoration: none; } #pageNewsEntry{ border-top: 4vw solid #1C4A6D; } #pageNewsEntry div.panelMain > article{ background: #FFF; margin: 3.07vw 5.33vw; } #pageNewsEntry div.panelMain section.parts{ padding: 0 5.33vw; } #pageNewsEntry div.panelMain section.relatedLink{ margin: 0; padding: 0 0 8vw; } #pageNewsEntry div.panelMain section.relatedLink ul{ margin: 0 3vw; } #pageNewsEntry div.panelMain section.relatedLink ul li{ font-size: max(3.47vw,var(--font-size-min)); line-height: 1.6; } #pageNewsEntry div.panelMain nav.entryNavi{ margin: 0 5.33vw 8vw; } #pageNewsEntry div.panelMain nav.entryNavi ul{ display: flex; justify-content: space-between; list-style: none; margin: 0; padding: 0; align-items: center; } #pageNewsEntry div.panelMain nav.entryNavi ul li{ width: 33%; } #pageNewsEntry div.panelMain nav.entryNavi ul li.prev{ text-align: left; background: url("../img/common/icon.arrow.01.left.sp.svg") no-repeat left center; background-size: 4.13vw auto; font-size: max(3.47vw,var(--font-size-min)); line-height: 9vw; height: 9.33vw; padding: 0 0 0 5.5vw; display: inline-block; } #pageNewsEntry div.panelMain nav.entryNavi ul li.index{ width: 34%; text-align: center; } #pageNewsEntry div.panelMain nav.entryNavi ul li.index a{ display: block; width: 31.6vw; height: 9.33vw; line-height: 8.5vw; font-size: max(3.47vw,var(--font-size-min)); font-weight: var(--font-sans-medium); background: #FFF url("../img/common/btn.icon.arrow.02.sp.svg") no-repeat left 3vw center; background-size: 1.47vw auto; padding: 0 0 0 3vw; text-align: center; color: #BF2424; border: 2px solid #BF2424; border-radius: 5vw; text-decoration: none; margin: 0 auto; } #pageNewsEntry div.panelMain nav.entryNavi ul li.next{ text-align: right; background: url("../img/common/icon.arrow.01.right.sp.svg") no-repeat right center; background-size: 4.13vw auto; font-size: max(3.47vw,var(--font-size-min)); line-height: 9vw; height: 9.33vw; padding: 0 5.5vw 0 0; display: inline-block; } } /* ------------------------------------------------------------------------------ */ @media print, screen and (min-width: 769px) { #pageTerms{} #pageTerms div.panelMain{ background: #F4F5F6; padding: 40px 42px; } #pageTerms div.panelMain section.sec1{ margin: 0 0 50px 0; } #pageTerms div.panelMain section.sec2{ margin: 0 0 50px 0; } #pageTerms div.panelMain section.sec3{} #pageTerms div.panelMain section p{ font-size: 16px; line-height: 1.7; margin: 0 0 20px; } #pageTerms div.panelMain section p.sign{ text-align: right; margin-top: 40px; } #pageTerms div.panelMain section h3{ margin-top: 50px; } #pageTerms div.panelMain section h4{ margin-top: 30px; } #pageTerms div.panelMain section ol{ margin: 0 0 25px; padding: 0 0 0 20px; } #pageTerms div.panelMain section ol li{ font-size: 16px; line-height: 1.7; margin: 0 0 15px; } #pageTerms div.panelMain section ul{ margin: 0 0 25px; padding: 0 0 0 20px; } #pageTerms div.panelMain section ul li{ font-size: 16px; line-height: 1.7; margin: 0 0 10px; } #pageTerms div.panelMain section dl{ margin: 0 0 25px; padding: 0px; } #pageTerms div.panelMain section dl dt{ margin: 15px 0 0 0; padding: 0px; font-size: 16px; line-height: 1.7; } #pageTerms div.panelMain section dl dd{ margin: 0 0 0 1em; padding: 0px; font-size: 16px; line-height: 1.7; } } @media screen and (max-width: 768px) { #pageTerms{ border-top: 4vw solid #1C4A6D; } #pageTerms div.panelMain{ background: #F4F5F6; padding: 5.33vw 0; } #pageTerms div.panelMain section.sec1{ margin: 0 0 10vw 0; } #pageTerms div.panelMain section.sec2{ margin: 0 0 10vw 0; } #pageTerms div.panelMain section.sec3{} #pageTerms div.panelMain section p{ font-size: max(3.47vw,var(--font-size-min)); line-height: 1.7; margin: 0 5.33vw 4vw; } #pageTerms div.panelMain section p.sign{ text-align: right; margin-top: 5vw; } #pageTerms div.panelMain section h3{ margin: 5vw 5.33vw 4vw; } #pageTerms div.panelMain section h4{ margin: 4vw 5.33vw 4vw; } #pageTerms div.panelMain section ol{ margin: 0 5.33vw 6vw; padding: 0 0 0 4vw; } #pageTerms div.panelMain section ol li{ font-size: max(3.47vw,var(--font-size-min)); line-height: 1.7; margin: 0 0 2vw; } #pageTerms div.panelMain section ul{ margin: 0 5.33vw 6vw; padding: 0 0 0 4vw; } #pageTerms div.panelMain section ul li{ font-size: max(3.47vw,var(--font-size-min)); line-height: 1.7; margin: 0 0 2vw; } #pageTerms div.panelMain section dl{ margin: 0 5.33vw 6vw; padding: 0px; } #pageTerms div.panelMain section dl dt{ margin: 3vw 0 0 0; padding: 0px; font-size: max(3.47vw,var(--font-size-min)); line-height: 1.7; } #pageTerms div.panelMain section dl dd{ margin: 0 0 0 1em; padding: 0px; font-size: max(3.47vw,var(--font-size-min)); line-height: 1.7; } } /* ------------------------------------------------------------------------------ */ @media print, screen and (min-width: 769px) { #pagePolicy{} #pagePolicy div.panelMain{ background: #F4F5F6; padding: 40px 42px; } #pagePolicy div.panelMain section{ margin-bottom: 50px; } #pagePolicy div.panelMain section p{ font-size: 16px; line-height: 1.7; margin: 0 0 20px; } #pagePolicy div.panelMain section p.intro{ margin: 0; } #pagePolicy div.panelMain section p.sign{ text-align: right; margin-top: 40px; } #pagePolicy div.panelMain section h2{ margin-top: 50px; } #pagePolicy div.panelMain section h3{ margin-top: 40px; } #pagePolicy div.panelMain section .h4{ margin-top: 10px; } #pagePolicy div.panelMain section ol.list{ margin: 0 0 25px; padding: 0 0 0 20px; list-style: none; text-indent: -1.2em; } #pagePolicy div.panelMain section ol.list li{ font-size: 16px; line-height: 1.7; margin: 0 0 15px; } #pagePolicy div.panelMain section ul.list{ margin: 0 0 25px; padding: 0 0 0 20px; } #pagePolicy div.panelMain section ul.list li{ font-size: 16px; line-height: 1.7; margin: 0 0 10px; } #pagePolicy div.panelMain section dl{ margin: 0 0 25px; padding: 0px; } #pagePolicy div.panelMain section dl dt{ margin: 15px 0 0 0; padding: 0px; font-size: 16px; line-height: 1.7; } #pagePolicy div.panelMain section dl dd{ margin: 0 0 0 1em; padding: 0px; font-size: 16px; line-height: 1.7; } #pagePolicy div.panelMain nav.internalLink{ margin: 80px 0 50px 0; } #pagePolicy div.panelMain nav.internalLink ul{ list-style: none; margin: 0; padding: 0; display: flex; gap: 0 20px; } #pagePolicy div.panelMain nav.internalLink ul li{} #pagePolicy div.panelMain nav.internalLink ul li a{ color: #666; text-decoration: none; } #pagePolicy div.panelMain nav.internalLink ul li a:hover{ text-decoration: underline; } } @media screen and (max-width: 768px) { #pagePolicy{ border-top: 4vw solid #1C4A6D; } #pagePolicy div.panelMain{ background: #F4F5F6; padding: 5.33vw 0; } #pagePolicy div.panelMain section{ margin: 0 0 10vw; } #pagePolicy div.panelMain section p{ font-size: max(3.47vw,var(--font-size-min)); line-height: 1.7; margin: 0 5.33vw 4vw; } _#pagePolicy div.panelMain section p.intro{ margin: 0; } #pagePolicy div.panelMain section p.sign{ text-align: right; margin-top: 5vw; } #pagePolicy div.panelMain section h2{ margin: 5vw 5.33vw 4vw; } #pagePolicy div.panelMain section h3{ margin: 5vw 5.33vw 4vw; } #pagePolicy div.panelMain section .h4{ margin: 4vw 5.33vw 4vw; } #pagePolicy div.panelMain section ol.list{ margin: 0 5.33vw 6vw; padding: 0 0 0 4vw; list-style: none; text-indent: -1.2em; } #pagePolicy div.panelMain section ol.list li{ font-size: max(3.47vw,var(--font-size-min)); line-height: 1.7; margin: 0 0 2vw; } #pagePolicy div.panelMain section ul.list{ margin: 0 5.33vw 6vw; padding: 0 0 0 4vw; } #pagePolicy div.panelMain section ul.list li{ font-size: max(3.47vw,var(--font-size-min)); line-height: 1.7; margin: 0 0 2vw; } #pagePolicy div.panelMain section dl{ margin: 0 5.33vw 6vw; padding: 0px; } #pagePolicy div.panelMain section dl dt{ margin: 3vw 0 0 0; padding: 0px; font-size: max(3.47vw,var(--font-size-min)); line-height: 1.7; } #pagePolicy div.panelMain section dl dd{ margin: 0 0 0 1em; padding: 0px; font-size: max(3.47vw,var(--font-size-min)); line-height: 1.7; } #pagePolicy div.panelMain nav.internalLink{ margin: 15vw 5.33vw 15vw; } #pagePolicy div.panelMain nav.internalLink ul{ list-style: none; margin: 0; padding: 0; } #pagePolicy div.panelMain nav.internalLink ul li{ margin: 0 0 1vw 0 } #pagePolicy div.panelMain nav.internalLink ul li a{ color: #666; text-decoration: none; font-size: max(3.47vw,var(--font-size-min)); } } /* ------------------------------------------------------------------------------ */ @media print, screen and (min-width: 769px) { #pagePolicySocial{} #pagePolicySocial div.panelMain{ background: #F4F5F6; padding: 40px 42px; } #pagePolicySocial div.panelMain article header{ margin: 0 0 -20px; } #pagePolicySocial div.panelMain section p{ font-size: 16px; line-height: 1.7; margin: 0 0 20px; } #pagePolicySocial div.panelMain section h2{ margin-top: 60px; } #pagePolicySocial div.panelMain section h3{ margin-top: 30px; } #pagePolicySocial div.panelMain section ul.list{ margin: 0 0 25px; padding: 0 0 0 20px; } #pagePolicySocial div.panelMain section ul.list li{ font-size: 16px; line-height: 1.7; margin: 0 0 10px; } #pagePolicySocial div.panelMain section ul.list.cube{ margin: 0 0 40px 0; padding: 0 0 0 25px; list-style: none; text-indent: -1.2em; } #pagePolicySocial div.panelMain section ul.list.dot{ margin: 0 0 40px 5px; padding: 0 0 0 25px; } #pagePolicySocial div.panelMain section dl{ margin: 0 0 25px; padding: 0px; } #pagePolicySocial div.panelMain section dl dt{ margin: 15px 0 0 0; padding: 0px; font-size: 16px; line-height: 1.7; } #pagePolicySocial div.panelMain section dl dd{ margin: 0 0 0 1em; padding: 0px; font-size: 16px; line-height: 1.7; } #pagePolicySocial div.panelMain section p.footerDate{ text-align: right; margin: 50px 0 50px 0; } } @media screen and (max-width: 768px) { #pagePolicySocial{ border-top: 4vw solid #1C4A6D; } #pagePolicySocial div.panelMain{ background: #F4F5F6; padding: 5.33vw 0; } #pagePolicySocial div.panelMain article header{ margin: 0 5.33vw; } #pagePolicySocial div.panelMain section p{ font-size: max(3.47vw,var(--font-size-min)); line-height: 1.7; margin: 0 5.33vw 4vw; } #pagePolicySocial div.panelMain section h2{ margin: 5vw 5.33vw 4vw; } #pagePolicySocial div.panelMain section h3{ margin: 5vw 5.33vw 4vw; } #pagePolicySocial div.panelMain section ul.list{ margin: 0 5.33vw 6vw; padding: 0 0 0 4vw; } #pagePolicySocial div.panelMain section ul.list li{ font-size: max(3.47vw,var(--font-size-min)); line-height: 1.7; margin: 0 0 2vw; } #pagePolicySocial div.panelMain section ul.list.cube{ margin: 0 5.33vw 6vw; padding: 0 0 0 4vw; list-style: none; text-indent: -1.2em; } #pagePolicySocial div.panelMain section ul.list.dot{ margin: 0 5.33vw 6vw; padding: 0 0 0 4vw; } #pagePolicySocial div.panelMain section dl{ margin: 0 5.33vw 6vw; padding: 0px; } #pagePolicySocial div.panelMain section dl dt{ margin: 3vw 0 0 0; padding: 0px; font-size: max(3.47vw,var(--font-size-min)); line-height: 1.7; } #pagePolicySocial div.panelMain section dl dd{ margin: 0 0 0 1em; padding: 0px; font-size: max(3.47vw,var(--font-size-min)); line-height: 1.7; } #pagePolicySocial div.panelMain section p.footerDate{ text-align: right; margin: 5vw 5.33vw 5vw; } } /* ------------------------------------------------------------------------------ */ @media print, screen and (min-width: 769px) { #pageSearch{} #pageSearch div.panelMain{ background: #F4F5F6; padding: 40px 42px; } #pageSearch div.panelMain form.gsc-search-box{ margin: 0 0 20px; display: block; } #pageSearch div.panelMain form.gsc-search-box input{ width: calc(100% - 90px); height: 40px !important; border: none; line-height: 1; padding: 3px 0 !important; } #pageSearch div.panelMain form.gsc-search-box input:focus{ box-shadow: none; } #pageSearch div.panelMain form.gsc-search-box button{ width: 90px; height: 40px; font-size: 14px; line-height: 1; border-radius: 2px; background: #1C4A6D; border: none; color: #FFF; } #pageSearch div.panelMain form.gsc-search-box button svg{ width: 18px; height: 18px; } #pageSearch div.panelMain form.gsc-search-box .gsc-search-box{ margin: 0; border-collapse: collapse; } #pageSearch div.panelMain form.gsc-search-box .gsc-input{ padding: 0; } #pageSearch div.panelMain form.gsc-search-box .gsc-input-box{ border: none; } #pageSearch div.panelMain form.gsc-search-box .gsc-search-button{ margin: 0; } #pageSearch div.panelMain form.gsc-search-box .gsib_a{ padding: 0 12px; } #pageSearch div.panelMain form.gsc-search-box .gsst_b{ padding: 0; } #pageSearch div.panelMain .gsc-control-cse{ padding: 10px 20px; } #pageSearch div.panelMain .gsc-results{} #pageSearch div.panelMain .gsc-results a.gs-title{ font-size: 18px; } #pageSearch div.panelMain .gsc-results a.gs-title b{ font-size: 18px; } #pageSearch div.panelMain .gsc-results div.gsc-webResult.gsc-result{ padding: 15px 0; border-bottom: 1px dotted #DDD; } #pageSearch div.panelMain .gsc-results div.gsc-thumbnail-inside{ padding: 0; } #pageSearch div.panelMain .gsc-results div.gsc-url-top{ font-size: 14px; line-height: 1.6; padding: 6px 0 6px 0; } #pageSearch div.panelMain .gsc-results div.gsc-table-result{ font-size: 15px; line-height: 1.7; padding: 0; } #pageSearch div.panelMain .gsc-results div.gs-web-image-box{ width: 115px; float: left; margin: 0; } #pageSearch div.panelMain .gsc-results a.gs-image{ display: block; width: 100px; height: auto; max-width: 100px; max-height: 100px; object-fit: cover; overflow: hidden; } #pageSearch div.panelMain .gsc-results a.gs-image img{ max-width: 100%; max-height: 100%; width: 100%; } #pageSearch div.panelMain .gsc-wrapper{ margin: 0 0 20px; } #pageSearch div.panelMain .gsc-selected-option-container{ max-width: 100%; } } @media screen and (max-width: 768px) { #pageSearch{ border-top: 4vw solid #1C4A6D; } #pageSearch div.panelMain{ background: #F4F5F6; padding: 5.33vw 0; } #pageSearch div.panelMain form.gsc-search-box{ margin: 0 0 3vw; display: block; } #pageSearch div.panelMain form.gsc-search-box td.gsc-input{ width: calc(100vw - 14.93vw); } #pageSearch div.panelMain form.gsc-search-box input{ height: 7.13vw !important; font-size: max(3.81vw,var(--font-size-min)); border: 1px solid #CCC; line-height: 1; border-radius: 2px 0 0 2px; padding: 1vw 2vw; } #pageSearch div.panelMain form.gsc-search-box input:focus{ box-shadow: none; } #pageSearch div.panelMain form.gsc-search-box button{ width: 14.93vw; _height: 7.13vw; font-size: max(3.81vw,var(--font-size-min)); line-height: 1; border-radius: 0 2px 2px 0; background: #1C4A6D; border: none; color: #FFF; } #pageSearch div.panelMain form.gsc-search-box button svg{ width: 4vw; height: auto; } #pageSearch div.panelMain form.gsc-search-box .gsc-search-box{ margin: 0; border-collapse: collapse; } #pageSearch div.panelMain form.gsc-search-box td.gsc-input{ padding: 0; } #pageSearch div.panelMain form.gsc-search-box .gsc-input-box{ border: none; } #pageSearch div.panelMain form.gsc-search-box td.gsc-search-button{ width: auto; } #pageSearch div.panelMain form.gsc-search-box .gsc-search-button{ margin: 0; } #pageSearch div.panelMain form.gsc-search-box .gsib_a{ padding: 0 3vw; } #pageSearch div.panelMain form.gsc-search-box .gsst_b{ padding: 0; } #pageSearch div.panelMain .gsc-results a.gs-title{ font-size: max(3.91vw,var(--font-size-min)); } #pageSearch div.panelMain .gsc-results a.gs-title b{ font-size: max(3.91vw,var(--font-size-min)); } #pageSearch div.panelMain .gsc-results div.gsc-webResult.gsc-result{ padding: 3vw 0; border-bottom: 1px dotted #DDD; } #pageSearch div.panelMain .gsc-results div.gsc-thumbnail-inside{ padding: 0; } #pageSearch div.panelMain .gsc-results div.gsc-url-top{ font-size: max(3.2vw,var(--font-size-min)); line-height: 1.6; padding: 6px 0 1vw 0; } #pageSearch div.panelMain .gsc-results div.gsc-table-result{ font-size: max(3.47vw,var(--font-size-min)); line-height: 1.7; padding: 0; } #pageSearch div.panelMain .gsc-results div.gs-web-image-box{ width: 23vw; padding-top: 2vw; } #pageSearch div.panelMain .gsc-results a.gs-image{ display: block; max-width: 20vw; max-height: 20vw; object-fit: cover; overflow: hidden; } #pageSearch div.panelMain .gsc-results a.gs-image img{ max-width: 100%; max-height: 100%; } #pageSearch div.panelMain .gsc-wrapper{ margin: 0 0 5vw; } #pageSearch div.panelMain .gsc-selected-option-container{ max-width: 100%; } } /* ------------------------------------------------------------------------------ */ @media print, screen and (min-width: 769px) { #pagePageEntry{} #pagePageEntry div.panelMain{ background: #F4F5F6; padding: 40px 42px; } #pagePageEntry div.panelMain article header ul.info{ padding: 0; margin: 20px 0 0; list-style: none; display: flex; justify-content: space-between; flex-wrap: wrap; } #pagePageEntry div.panelMain article header ul.info li{ font-size: 16px; line-height: 1; } } @media screen and (max-width: 768px) { #pagePageEntry{ border-top: 4vw solid #1C4A6D; } #pagePageEntry div.panelMain{ background: #F4F5F6; padding: 5.33vw 0; } #pagePageEntry div.panelMain article header ul.info{ padding: 0; margin: 5vw 0 0; list-style: none; display: flex; justify-content: space-between; flex-wrap: wrap; } #pagePageEntry div.panelMain article header ul.info li{ font-size: max(3.47vw,var(--font-size-min)); line-height: 1; } #pagePageEntry div.panelMain article section.parts{ margin: 0 5.33vw; } } /* ------------------------------------------------------------------------------ */ @media print, screen and (min-width: 769px) { #pageLpEntry{ background: #F4F5F6; } #pageLpEntry div.panelMain{ background: #F4F5F6; padding: 40px 42px; } #pageLpEntry div.panelMain article header ul.info{ padding: 0; margin: 20px 0 0; list-style: none; display: flex; justify-content: space-between; flex-wrap: wrap; } #pageLpEntry div.panelMain article header ul.info li{ font-size: 16px; line-height: 1; } #pageLpEntry div.panelMain section.inquiry{ margin: 50px 0 50px 0; } #pageLpEntry div.panelMain section.inquiry p.intro{ margin: 0 0 30px; font-size: 16px; line-height: 23px; } #pageLpEntry div.panelMain section.inquiry label.accept{ margin: 0px; padding: 0 0 0 30px; position: relative; line-height: 17px; font-size: 16px; } #pageLpEntry div.panelMain section.inquiry label.accept input{ position: absolute; top: 0px; bottom: 0px; left: 0px; margin: auto; } #pageLpEntryCheck{ background: #F4F5F6; } #pageLpEntryCheck div.panelMain{ background: #F4F5F6; padding: 40px 42px; } #pageLpEntryCheck div.panelMain article{ padding-bottom: 80px; } #pageLpEntryCheck div.panelMain article p.intro{ margin: 0 0 30px; font-size: 16px; line-height: 23px; } #pageLpEntryThanks{ background: #F4F5F6; } #pageLpEntryThanks div.panelMain{ background: #F4F5F6; padding: 40px 42px; } #pageLpEntryThanks div.panelMain article{ padding-bottom: 80px; } #pageLpEntryThanks div.panelMain article p{ margin: 0 0 30px; font-size: 16px; line-height: 2; } } @media screen and (max-width: 768px) { #pageLpEntry{ background: #F4F5F6; } #pageLpEntry div.panelMain{ background: #F4F5F6; padding: 0 0 5.33vw; } #pageLpEntry div.panelMain article header ul.info{ padding: 0; margin: 5vw 0 0; list-style: none; display: flex; justify-content: space-between; flex-wrap: wrap; } #pageLpEntry div.panelMain article header ul.info li{ font-size: max(3.47vw,var(--font-size-min)); line-height: 1; } #pageLpEntry div.panelMain article section.parts{ margin: 0 5.33vw; } #pageLpEntry div.panelMain section.inquiry{ margin: 10vw 5.33vw 10vw; } #pageLpEntry div.panelMain section.inquiry p.intro{ margin: 0 0 3vw; font-size: max(3.47vw,var(--font-size-min)); line-height: 1.6; } #pageLpEntry div.panelMain section.inquiry label.accept{ margin: 0px; padding: 0 0 0 6vw; position: relative; line-height: 1; font-size: max(3.47vw,var(--font-size-min)); } #pageLpEntry div.panelMain section.inquiry label.accept input{ position: absolute; top: 0px; bottom: 0px; left: 0px; margin: auto; } #pageLpEntryCheck{ background: #F4F5F6; } #pageLpEntryCheck div.panelMain{ background: #F4F5F6; padding: 5.33vw 0; } #pageLpEntryCheck div.panelMain article{ padding: 0 0 10vw; } #pageLpEntryCheck div.panelMain article p.intro{ margin: 0 5.33vw 5vw; font-size: max(3.47vw,var(--font-size-min)); line-height: 1.7; } #pageLpEntryCheck div.panelMain article div.boxForm{ margin: 0 5.33vw 5vw; } #pageLpEntryThanks{ background: #F4F5F6; } #pageLpEntryThanks div.panelMain{ background: #F4F5F6; padding: 5.33vw 0; } #pageLpEntryThanks div.panelMain article{ padding: 0 0 10vw; } #pageLpEntryThanks div.panelMain article p{ margin: 0 5.33vw 5vw; font-size: max(3.47vw,var(--font-size-min)); line-height: 2; } } /* ------------------------------------------------------------------------------ */ @media print, screen and (min-width: 769px) { main.page.contact{} main.page.contact div.panelMain nav.step{ margin: 0 auto 50px; width: 842px; } main.page.contact div.panelMain nav.step ol{ list-style: none; margin: 0; padding: 0; display: flex; justify-content: space-around; position: relative; } main.page.contact div.panelMain nav.step ol li{ position: relative; width: 130px; text-align: center; margin: 0 0px; padding: 60px 0 0 0; font-size: 14px; line-height: 1.3; font-weight: var(--font-sans-bold); color: rgba(112,112,112,0.5); } main.page.contact div.panelMain nav.step ol li::before{ position: absolute; left: 0; right: 0; top: 10px; margin: 0 auto; content: ''; width: 9px; height: 9px; background: #85A7BF; border-radius: 20px; display: block; border: 7px solid #FFF; } main.page.contact div.panelMain nav.step.step1 ol::before{ content: ''; width: 226px; height: 4px; background: #FFF; display: block; position: absolute; left: 175px; top: 20px; } main.page.contact div.panelMain nav.step.step1 ol::after{ content: ''; width: 226px; height: 4px; background: #FFF; display: block; position: absolute; right: 165px; top: 20px; } main.page.contact div.panelMain nav.step.step1 ol li:nth-child(1){ color: #85A7BF; } main.page.contact div.panelMain nav.step.step1 ol li:nth-child(1)::before{ content: '1'; position: absolute; left: 0; right: 0; top: 0; margin: 0 auto; width: 47px; height: 47px; background: #85A7BF; border: none; border-radius: 25px; display: flex; align-items: center; justify-content: center; color: #FFF; font-family: "Lato"; font-size: 22px; font-weight: var(--font-lato-bold); } main.page.contact div.panelMain nav.step.step1 ol li:nth-child(2){ margin-left: 10px; } main.page.contact div.panelMain nav.step.step2 ol::before{ content: ''; width: 226px; height: 4px; background: #FFF; display: block; position: absolute; left: 160px; top: 20px; } main.page.contact div.panelMain nav.step.step2 ol::after{ content: ''; width: 226px; height: 4px; background: #FFF; display: block; position: absolute; right: 160px; top: 20px; } main.page.contact div.panelMain nav.step.step2 ol li:nth-child(2){ color: #85A7BF; } main.page.contact div.panelMain nav.step.step2 ol li:nth-child(2)::before{ content: '2'; position: absolute; left: 0; right: 0; top: 0; margin: 0 auto; width: 47px; height: 47px; background: #85A7BF; border: none; border-radius: 25px; display: flex; align-items: center; justify-content: center; color: #FFF; font-family: "Lato"; font-size: 22px; font-weight: var(--font-lato-bold); } _main.page.contact div.panelMain nav.step.step2 ol li:nth-child(2){ margin-left: 10px; } _main.page.contact div.panelMain nav.step.step2 ol li:nth-child(2){ margin-right: 10px; } main.page.contact div.panelMain nav.step.step3 ol::before{ content: ''; width: 226px; height: 4px; background: #FFF; display: block; position: absolute; left: 165px; top: 20px; } main.page.contact div.panelMain nav.step.step3 ol::after{ content: ''; width: 226px; height: 4px; background: #FFF; display: block; position: absolute; right: 175px; top: 20px; } main.page.contact div.panelMain nav.step.step3 ol li:nth-child(3){ color: #85A7BF; } main.page.contact div.panelMain nav.step.step3 ol li:nth-child(3)::before{ content: '3'; position: absolute; left: 0; right: 0; top: 0; margin: 0 auto; width: 47px; height: 47px; background: #85A7BF; border: none; border-radius: 25px; display: flex; align-items: center; justify-content: center; color: #FFF; font-family: "Lato"; font-size: 22px; font-weight: var(--font-lato-bold); } main.page.contact div.panelMain nav.step.step3 ol li:nth-child(2){ margin-right: 10px; } #pageContactInput{} #pageContactInput header.pageHeader{ height: 416px; padding: 156px 0 0 42px; background: #F4F5F6; } #pageContactInput header.pageHeader .title{ font-size: 50px; line-height: 1.3; font-weight: var(--font-sans-bold); margin: 0 0 0px 0; padding: 25px 0 25px 23px; border-left: 5px solid #1C4A6D; position: relative; } #pageContactInput header.pageHeader p.intro{ margin: 0 0 25px; padding: 20px 0 20px 28px; border-left: 5px solid #E4E4E4; width: 900px; font-size: 18px; line-height: 1.8; } #pageContactInput div.panelMain{ background: #F4F5F6; padding: 40px 42px 80px; } #pageContactInput div.panelMain td.dl{} #pageContactInput div.panelMain td.dl dl{ margin: 0; padding: 0; font-size: 16px; line-height: 1.6; } #pageContactInput div.panelMain td.dl dl dt{ margin: 0 0 10px; padding: 0; font-weight: var(--font-sans-bold); } #pageContactInput div.panelMain td.dl dl dd{ margin: 0 0 10px; padding: 0; } #pageContactInput div.panelMain td.dl dl dd ul{ list-style: none; margin: 0 0; padding: 0; display: flex; flex-wrap: wrap; } #pageContactInput div.panelMain td.dl dl dd ul li{ margin-bottom: 10px; } #pageContactInput div.panelMain td.dl dl dd:last-of-type{ margin: 0; } #pageContactInput div.panelMain td.dl.category dl dd ul{ gap: 0 20px; } #pageContactInput div.panelMain td.dl.category dl dd ul li{ width: calc(calc(100% - 20px) / 2); } #pageContactInput div.panelMain td.dl.gender dl dd ul li{ margin: 0 50px 0 0; } #pageContactInput div.panelMain td.ul{} #pageContactInput div.panelMain td.ul ul{ list-style: none; margin: 0 0; padding: 0; display: flex; flex-wrap: wrap; } #pageContactInput div.panelMain td.ul ul li{ margin-bottom: 10px; } #pageContactInput div.panelMain td.ul ul li:last-of-type{ margin: 0; } #pageContactInput div.panelMain td.ul.category ul{ gap: 0 20px } #pageContactInput div.panelMain td.ul.category ul li{ width: calc(calc(100% - 20px) / 2); } #pageContactInput div.panelMain #cnt_comment{ height: 200px; } #pageContactInput div.panelMain td div.term{ width: 100%; background: #FFF; height: 200px; font-size: 13px; overflow-y: scroll; white-space: pre-wrap; padding: 15px; line-height: 19px; margin: 20px 0 30px; word-break: break-all; } #pageContactInput div.panelMain td p.guide{ margin: 5px 0 0; } #pageContactInput div.panelMain section.byTel{ background: #DEDEDE; border-radius: 6px; width: 800px; height: 238px; padding: 47px 0 0; margin: 66px auto 0; display: flex; flex-direction: column; align-items: center; } #pageContactInput div.panelMain section.byTel h2{ margin: 0 0 32px; padding: 0; font-size: 30px; line-height: 1; font-weight: var(--font-sans-bold); } #pageContactInput div.panelMain section.byTel a.tel{ margin: 0 auto 8px; padding: 0; width: 390px; height: 48px; display: block; font-family: "Lato"; font-size: 46px; line-height: 1; font-weight: var(--font-sans-bold); text-align: right; text-decoration: none; color: #000; letter-spacing: 2px; background: url("../img/contact/icon.tel.svg") no-repeat left center; } #pageContactInput div.panelMain section.byTel p{ margin: 0 auto; padding: 0; font-size: 16px; line-height: 1; text-align: center; } #pageContactInput div.panelMain div.addField p{ text-align: center; font-size: 16px; line-height: 1; margin: -10px 0 30px; } #pageContactThanks{} #pageContactThanks header.pageHeader{ height: 330px; padding: 156px 0 0 42px; background: #F4F5F6; } #pageContactThanks header.pageHeader .title{ font-size: 50px; line-height: 1.3; font-weight: var(--font-sans-bold); margin: 0 0 0px 0; padding: 25px 0 25px 23px; border-left: 5px solid #1C4A6D; position: relative; } #pageContactThanks div.panelMain{ background: #F4F5F6; padding: 40px 42px; } #pageContactThanks div.panelMain p{ margin: 0 0 30px; padding: 30px 30px 80px; font-size: 16px; line-height: 2; background: #FFF; } } @media screen and (max-width: 768px) { main.page.contact{} main.page.contact .breadcrumbs{ display: none; } main.page.contact div.panelMain nav.step{ margin: 0 6vw 5.33vw; } main.page.contact div.panelMain nav.step ol{ list-style: none; margin: 0; padding: 0; display: flex; justify-content: space-between; position: relative; } main.page.contact div.panelMain nav.step ol li{ position: relative; width: 18vw; text-align: center; margin: 0 0px; padding: 10vw 0 0 0; font-size: max(3.47vw,var(--font-size-min)); line-height: 1.3; font-weight: var(--font-sans-bold); color: rgba(112,112,112,0.5); } main.page.contact div.panelMain nav.step ol li::before{ position: absolute; left: 0; right: 0; top: 1.8vw; margin: 0 auto; content: ''; width: 2vw; height: 2vw; background: #85A7BF; border-radius: 3vw; display: block; border: 7px solid #FFF; } main.page.contact div.panelMain nav.step.step1 ol::before{ content: ''; width: 23vw; height: 6px; background: #FFF; display: block; position: absolute; left: 51vw; top: 3.5vw; } main.page.contact div.panelMain nav.step.step1 ol::after{ content: ''; width: 23vw; height: 6px; background: #FFF; display: block; position: absolute; right: 48vw; top: 3.5vw; } main.page.contact div.panelMain nav.step.step1 ol li:nth-child(1){ color: #85A7BF; } main.page.contact div.panelMain nav.step.step1 ol li:nth-child(1)::before{ content: '1'; position: absolute; left: 0; right: 0; top: -0.5vw; margin: 0 auto; width: 9vw; height: 9vw; background: #85A7BF; border: none; border-radius: 5vw; display: flex; align-items: center; justify-content: center; color: #FFF; font-family: "Lato"; font-size: 4.5vw; line-height: 1; font-weight: var(--font-lato-bold); } main.page.contact div.panelMain nav.step.step1 ol li:nth-child(2){ margin-left: 3vw; } main.page.contact div.panelMain nav.step.step2 ol::before{ content: ''; width: 23vw; height: 6px; background: #FFF; display: block; position: absolute; left: 51.3vw; top: 3.5vw; } main.page.contact div.panelMain nav.step.step2 ol::after{ content: ''; width: 23vw; height: 6px; background: #FFF; display: block; position: absolute; right: 51.3vw; top: 3.5vw; } main.page.contact div.panelMain nav.step.step2 ol li:nth-child(2){ color: #85A7BF; } main.page.contact div.panelMain nav.step.step2 ol li:nth-child(2)::before{ content: '2'; position: absolute; left: 0; right: 0; top: -0.5vw; margin: 0 auto; width: 9vw; height: 9vw; background: #85A7BF; border: none; border-radius: 5vw; display: flex; align-items: center; justify-content: center; color: #FFF; font-family: "Lato"; font-size: 4.5vw; line-height: 1; font-weight: var(--font-lato-bold); } main.page.contact div.panelMain nav.step.step3 ol::before{ content: ''; width: 23vw; height: 6px; background: #FFF; display: block; position: absolute; left: 48vw; top: 3.5vw; } main.page.contact div.panelMain nav.step.step3 ol::after{ content: ''; width: 23vw; height: 6px; background: #FFF; display: block; position: absolute; right: 51vw; top: 3.5vw; } main.page.contact div.panelMain nav.step.step3 ol li:nth-child(3){ color: #85A7BF; } main.page.contact div.panelMain nav.step.step3 ol li:nth-child(3)::before{ content: '3'; position: absolute; left: 0; right: 0; top: -0.5vw; margin: 0 auto; width: 9vw; height: 9vw; background: #85A7BF; border: none; border-radius: 5vw; display: flex; align-items: center; justify-content: center; color: #FFF; font-family: "Lato"; font-size: 4.5vw; line-height: 1; font-weight: var(--font-lato-bold); } main.page.contact div.panelMain nav.step.step3 ol li:nth-child(2){ margin-right: 3vw; } #pageContactInput{} #pageContactInput header.pageHeader{ padding: 8vw 5.33vw 5vw; background: #F4F5F6; } #pageContactInput header.pageHeader .title{ font-size: 6.67vw; line-height: 1.3; font-weight: var(--font-sans-bold); margin: 0 0 0px 0; padding: 1vw 0 1vw 4vw; border-left: 5px solid #1C4A6D; position: relative; } #pageContactInput header.pageHeader p.intro{ margin: 0 0; padding: 2vw 0 2vw 4vw; border-left: 5px solid rgba(28,74,109,0.32); font-size: max(3.47vw,var(--font-size-min)); line-height: 1.8; } #pageContactInput div.panelMain{ background: #F4F5F6; padding: 5vw 0vw 5vw; } #pageContactInput div.panelMain div.boxForm{ margin: 0 5.33vw 10vw; } #pageContactInput div.panelMain td.dl{} #pageContactInput div.panelMain td.dl dl{ margin: 0; padding: 0; font-size: max(3.47vw,var(--font-size-min)); line-height: 1.6; } #pageContactInput div.panelMain td.dl dl dt{ margin: 0 0 2vw; padding: 0; font-weight: var(--font-sans-bold); } #pageContactInput div.panelMain td.dl dl dd{ margin: 0 0 3vw; padding: 0; } #pageContactInput div.panelMain td.dl dl dd ul{ list-style: none; margin: 0 0; padding: 0; display: flex; flex-wrap: wrap; } #pageContactInput div.panelMain td.dl dl dd ul li{ margin-bottom: 2vw; } #pageContactInput div.panelMain td.dl dl dd:last-of-type{ margin: 0; } #pageContactInput div.panelMain td.dl.category dl dd ul li{ width: 100%; } #pageContactInput div.panelMain td.dl.gender dl dd ul li{ margin: 0 13vw 0 0; } #pageContactInput div.panelMain td.ul{} #pageContactInput div.panelMain td.ul ul{ list-style: none; margin: 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2vw 0; } #pageContactInput div.panelMain td.ul ul li{ width: 100%; } #pageContactInput div.panelMain td.ul.category dl dd ul li{ width: 100%; } #pageContactInput div.panelMain #cnt_comment{ height: 40vw; } #pageContactInput div.panelMain td div.term{ width: 100%; background: #FFF; height: 60vw; font-size: max(3.47vw,var(--font-size-min)); overflow-y: scroll; white-space: pre-wrap; padding: 3vw; line-height: 1.4; margin: 3vw 0 5vw; word-break: break-all; } #pageContactInput div.panelMain section.byTel{ display: none; } #pageContactInput div.panelMain div.attachment td p{ margin: 0 0 3vw; } #pageContactInput div.panelMain div.addField p{ text-align: center; font-size: max(3.47vw,var(--font-size-min)); line-height: 1.6; margin: 0px 0 3vw; } #pageContactThanks{} #pageContactThanks header.pageHeader{ padding: 8vw 5.33vw 5vw; background: #F4F5F6; } #pageContactThanks header.pageHeader .title{ font-size: 6.67vw; line-height: 1.3; font-weight: var(--font-sans-bold); margin: 0 0 0px 0; padding: 1vw 0 1vw 4vw; border-left: 5px solid #1C4A6D; position: relative; } #pageContactThanks div.panelMain{ background: #F4F5F6; padding: 5vw 0; } #pageContactThanks div.panelMain p{ margin: 0 5.33vw 5vw; padding: 5vw 5vw 10vw; font-size: max(3.47vw,var(--font-size-min)); line-height: 2; background: #FFF; } } /* ------------------------------------------------------------------------------ */ @media print, screen and (min-width: 769px) { #pageMitsuboshiAbout{} #pageMitsuboshiAbout header.pageHeader{ height: 458px; background: #F4F5F6 url("../img/mitsuboshi/about/header.bg.jpg"); padding: 160px 0 0 42px; } #pageMitsuboshiAbout header.pageHeader .title{ font-size: 50px; line-height: 1.3; font-weight: var(--font-sans-bold); color: #FFF; margin: 0 0 0px 0; padding: 25px 0 25px 23px; border-left: 5px solid #FFF; position: relative; } #pageMitsuboshiAbout header.pageHeader p.intro{ margin: 0 0 25px; padding: 20px 0 20px 28px; border-left: 5px solid rgba(255,255,255,0.32); color: #FFF; width: 900px; font-size: 18px; line-height: 1.8; } #pageMitsuboshiAbout header.pageHeader p.intro a{ color: #FFF; } #pageMitsuboshiAbout div.panelMain{} #pageMitsuboshiAbout div.panelMain div.intro{ background: url("../img/mitsuboshi/about/bg.grid.svg") no-repeat; height: 358px; padding: 40px 0 0 0; margin: 0 0 110px 0; } #pageMitsuboshiAbout div.panelMain div.intro h2{ margin: 0 auto; padding: 0; background: url("../img/mitsuboshi/about/intro.png") no-repeat; width: 613px; height: 273px; text-indent: 100%; overflow: hidden; white-space: nowrap; } #pageMitsuboshiAbout div.panelMain section.sec1{ margin: 0 0 100px 0; padding: 0 40px 93px; position: relative; } #pageMitsuboshiAbout div.panelMain section.sec1::before{ content: ''; width: 896px; height: 374px; background: #F4F5F6; z-index: -1; position: absolute; bottom: 0; right: 0; } #pageMitsuboshiAbout div.panelMain section.sec1 span.book{ width: 295px; height: 495px; background: url("../img/mitsuboshi/about/sec1.book.jpg?2024") no-repeat; position: absolute; top: 0; right: 118px; } #pageMitsuboshiAbout div.panelMain section.sec1 h3{ font-size: 30px; line-height: 1.4; font-weight: var(--font-sans-black); margin: 0; padding: 10px 0 10px 27px; border-left: 5px solid #1C4A6D; position: relative; } #pageMitsuboshiAbout div.panelMain section.sec1 p{ margin: 0 0 65px; padding: 10px 0 10px 28px; border-left: 5px solid #E4E4E4; font-size: 16px; line-height: 2.1; width: 550px; } #pageMitsuboshiAbout div.panelMain section.sec1 a.more{ display: block; width: 280px; height: 60px; background: #FFF url("../img/common/btn.icon.arrow.01.svg") no-repeat right 28px center; font-weight: var(--font-sans-medium); line-height: 53px; text-decoration: none; text-align: center; font-size: 18px; color: #BF2424; border: 2px solid #BF2424; border-radius: 30px; margin: 0; } #pageMitsuboshiAbout div.panelMain section.sec2{ margin: 0 0 100px 0; padding: 0 40px 93px; position: relative; } #pageMitsuboshiAbout div.panelMain section.sec2::before{ content: ''; width: 896px; height: 408px; background: #F4F5F6; z-index: -1; position: absolute; bottom: 0; left: 0; } #pageMitsuboshiAbout div.panelMain section.sec2 span.image{ width: 501px; height: 342px; background: url("../img/mitsuboshi/about/sec2.image.jpg") no-repeat; position: absolute; top: 100px; right: 40px; } #pageMitsuboshiAbout div.panelMain section.sec2 h3{ font-size: 30px; line-height: 1.4; font-weight: var(--font-sans-black); margin: 0; padding: 10px 0 10px 27px; border-left: 5px solid #1C4A6D; position: relative; } #pageMitsuboshiAbout div.panelMain section.sec2 p{ margin: 0 0 65px; padding: 10px 0 10px 28px; border-left: 5px solid #E4E4E4; font-size: 16px; line-height: 2.1; width: 45%; } #pageMitsuboshiAbout div.panelMain section.sec2 a.more{ display: block; width: 280px; height: 60px; background: #FFF url("../img/common/btn.icon.arrow.01.svg") no-repeat right 28px center; font-weight: var(--font-sans-medium); line-height: 53px; text-decoration: none; text-align: center; font-size: 18px; color: #BF2424; border: 2px solid #BF2424; border-radius: 30px; margin: 0; } #pageMitsuboshiAbout div.panelMain section.sec3{ margin: 0 0 100px 0; padding: 0 40px 140px; position: relative; } #pageMitsuboshiAbout div.panelMain section.sec3::before{ content: ''; width: 896px; height: 342px; background: #F4F5F6; z-index: -1; position: absolute; bottom: 0; right: 0; } #pageMitsuboshiAbout div.panelMain section.sec3::after{ content: ''; width: 501px; height: 342px; background: url("../img/mitsuboshi/about/sec3.image.jpg") no-repeat; position: absolute; top: 110px; right: 40px; } #pageMitsuboshiAbout div.panelMain section.sec3 h3{ font-size: 30px; line-height: 1.4; font-weight: var(--font-sans-black); margin: 0; padding: 10px 0 10px 27px; border-left: 5px solid #1C4A6D; position: relative; } #pageMitsuboshiAbout div.panelMain section.sec3 p{ margin: 0 0 65px; padding: 10px 0 10px 28px; border-left: 5px solid #E4E4E4; font-size: 16px; line-height: 2.1; width: 45%; } #pageMitsuboshiAbout div.panelMain section.sec3 a.more{ display: block; width: 280px; height: 60px; background: #FFF url("../img/common/btn.icon.arrow.01.svg") no-repeat right 28px center; font-weight: var(--font-sans-medium); line-height: 53px; text-decoration: none; text-align: center; font-size: 18px; color: #BF2424; border: 2px solid #BF2424; border-radius: 30px; margin: 0; } #pageMitsuboshiAbout div.panelMain section.sec4{ margin: 0 0 100px 0; padding: 0 40px 40px; position: relative; } #pageMitsuboshiAbout div.panelMain section.sec4::before{ content: ''; width: 896px; height: 282px; background: #F4F5F6; z-index: -1; position: absolute; bottom: 0; left: 0; } #pageMitsuboshiAbout div.panelMain section.sec4 span.figure{ width: 313px; height: 443px; background: url("../img/mitsuboshi/about/sec4.figure.png") no-repeat; position: absolute; top: 0px; left: 40px; } #pageMitsuboshiAbout div.panelMain section.sec4 div.inner{ margin: 0 0 0 365px; width: 540px; position: relative; padding: 50px 0; display: flex; flex-direction: column; } #pageMitsuboshiAbout div.panelMain section.sec4 div.inner::before{ background: url("../img/mitsuboshi/about/sec4.border.star.svg") no-repeat left top; content: ''; position: absolute; top: 0; right: 0; width: 540px; height: 19px; } #pageMitsuboshiAbout div.panelMain section.sec4 div.inner::after{ background: url("../img/mitsuboshi/about/sec4.border.star.svg") no-repeat left bottom; content: ''; position: absolute; bottom: 0; right: 0; width: 540px; height: 19px; } #pageMitsuboshiAbout div.panelMain section.sec4 h3{ background: url("../img/mitsuboshi/about/sec4.title.svg") no-repeat left top; border-bottom: 14px solid #FFE400; width: 117px; height: 63px; margin: 0 0 30px 0; padding: 0 0 0 0; white-space: nowrap; text-indent: 100%; overflow: hidden; order: 2; position: relative; } #pageMitsuboshiAbout div.panelMain section.sec4 p.catch{ margin: 0 0 30px 0; padding: 0px 0 0px 0px; font-size: 20px; line-height: 1; order: 1; } #pageMitsuboshiAbout div.panelMain section.sec4 p.profile{ margin: 0 0 0 0; padding: 0px 0 0px 0px; font-size: 16px; line-height: 2.1; order: 3; width: 470px; } #pageMitsuboshiAbout div.panelMain section.sec5{ margin: 0 0 100px 0; padding: 0 40px 40px; position: relative; } #pageMitsuboshiAbout div.panelMain section.sec5::before{ content: ''; width: 896px; height: 282px; background: #F4F5F6; z-index: -1; position: absolute; bottom: 0; right: 0; } #pageMitsuboshiAbout div.panelMain section.sec5 span.figure{ width: 462px; height: 389px; background: url("../img/mitsuboshi/about/sec5.figure.png") no-repeat; position: absolute; top: 0px; left: -10px; } #pageMitsuboshiAbout div.panelMain section.sec5 div.inner{ margin: 0 0 0 365px; width: 540px; position: relative; padding: 50px 0; display: flex; flex-direction: column; } #pageMitsuboshiAbout div.panelMain section.sec5 div.inner::before{ background: url("../img/mitsuboshi/about/sec4.border.star.svg") no-repeat left top; content: ''; position: absolute; top: 0; right: 0; width: 540px; height: 19px; } #pageMitsuboshiAbout div.panelMain section.sec5 div.inner::after{ background: url("../img/mitsuboshi/about/sec4.border.star.svg") no-repeat left bottom; content: ''; position: absolute; bottom: 0; right: 0; width: 540px; height: 19px; } #pageMitsuboshiAbout div.panelMain section.sec5 h3{ background: url("../img/mitsuboshi/about/sec5.title.svg") no-repeat left top; border-bottom: 14px solid #FFE400; width: 263px; height: 69px; margin: 0 0 30px 0; padding: 0 0 0 0; white-space: nowrap; text-indent: 100%; overflow: hidden; order: 2; position: relative; } #pageMitsuboshiAbout div.panelMain section.sec5 p.catch{ margin: 0 0 30px 0; padding: 0px 0 0px 0px; font-size: 20px; line-height: 1; order: 1; } #pageMitsuboshiAbout div.panelMain section.sec5 p.profile{ margin: 0 0 0 0; padding: 0px 0 0px 0px; font-size: 16px; line-height: 2.1; order: 3; width: 470px; } } @media screen and (max-width: 768px) { #pageMitsuboshiAbout{} #pageMitsuboshiAbout header.pageHeader{ background: #1C4A6D url("../img/mitsuboshi/about/header.bg.sp.jpg") no-repeat left -15.23vw top -7.55vw; background-size: 110.27vw auto; padding: 66vw 0 6vw 5.33vw; display: flex; flex-direction: column; position: relative; } #pageMitsuboshiAbout header.pageHeader .title{ margin: 0; padding: 1vw 0 2vw 4vw; border-left: 5px solid #FFF; color: #FFF; font-size: 6.67vw; line-height: 1.3; font-weight: var(--font-sans-bold); display: block; order: 2; } #pageMitsuboshiAbout header.pageHeader p.intro{ margin: 0; padding: 2vw 7vw 2vw 4vw; border-left: 5px solid rgba(255,255,255,0.32); color: #FFF; font-size: max(3.47vw,var(--font-size-min)); line-height: 1.8; order: 3; } #pageMitsuboshiAbout header.pageHeader p.intro a{ color: #FFF; } #pageMitsuboshiAbout div.panelMain{ background: #FFF; } #pageMitsuboshiAbout div.panelMain div.intro{ background: #FFF url("../img/mitsuboshi/about/bg.grid.sp.svg") no-repeat; background-size: 100% auto; height: 79.46vw; padding: 0; margin: 0 0 0 0; display: flex; align-items: center; } #pageMitsuboshiAbout div.panelMain div.intro h2{ margin: 0 auto; padding: 0; background: url("../img/mitsuboshi/about/intro.sp.png") no-repeat; background-size: 100% auto; width: 81.73vw; height: 37.6vw; text-indent: 100%; overflow: hidden; white-space: nowrap; } #pageMitsuboshiAbout div.panelMain section.sec1{ margin: 0 0 0 0; padding: 8vw 0 10vw; position: relative; background: #FFF; } #pageMitsuboshiAbout div.panelMain section.sec1::before{ content: ''; width: 100%; height: 61.45vw; background: #F4F5F6; position: absolute; bottom: 0; right: 0; } #pageMitsuboshiAbout div.panelMain section.sec1 span.book{ display: block; width: 52.67vw; height: 88.41vw; background: url("../img/mitsuboshi/about/sec1.book.sp.jpg?2024") no-repeat; background-size: 100% auto; margin: 0 auto 7vw; position: relative; } #pageMitsuboshiAbout div.panelMain section.sec1 h3{ font-size: 5.33vw; line-height: 1.3; font-weight: var(--font-sans-bold); border-left: 5px solid #1C4A6D; padding: 1vw 0 1vw 4vw; margin: 0 5.33vw; position: relative; } #pageMitsuboshiAbout div.panelMain section.sec1 p{ margin: 0 5.33vw 5vw; padding: 2vw 0 2vw 4vw; border-left: 5px solid #E4E4E4; font-size: max(3.47vw,var(--font-size-min)); line-height: 1.6; position: relative; } #pageMitsuboshiAbout div.panelMain section.sec1 a.more{ display: flex; justify-content: center; align-items: center; width: 58.67vw; height: 12vw; background: #FFF url("../img/common/btn.icon.arrow.01.sp.svg") no-repeat right 4vw center; background-size: 1.5vw auto; font-weight: var(--font-sans-medium); line-height: 1; text-decoration: none; text-align: center; font-size: max(3.47vw,var(--font-size-min)); color: #BF2424; border: 2px solid #BF2424; border-radius: 6vw; margin: 0 auto; position: relative; } #pageMitsuboshiAbout div.panelMain section.sec2{ margin: 0 0 0 0; padding: 8vw 0 10vw; position: relative; background: #FFF; } #pageMitsuboshiAbout div.panelMain section.sec2::before{ content: ''; width: 100%; height: 61.45vw; background: #F4F5F6; position: absolute; bottom: 0; right: 0; } #pageMitsuboshiAbout div.panelMain section.sec2 span.image{ width: 89.33vw; height: 61.06vw; background: url("../img/mitsuboshi/about/sec2.image.sp.jpg") no-repeat; background-size: 100% auto; position: relative; display: block; margin: 0 auto 7vw; } #pageMitsuboshiAbout div.panelMain section.sec2 h3{ font-size: 5.33vw; line-height: 1.3; font-weight: var(--font-sans-bold); border-left: 5px solid #1C4A6D; padding: 1vw 0 1vw 4vw; margin: 0 5.33vw; position: relative; } #pageMitsuboshiAbout div.panelMain section.sec2 p{ margin: 0 5.33vw 5vw; padding: 2vw 0 2vw 4vw; border-left: 5px solid #E4E4E4; font-size: max(3.47vw,var(--font-size-min)); line-height: 1.6; position: relative; } #pageMitsuboshiAbout div.panelMain section.sec2 a.more{ display: flex; justify-content: center; align-items: center; width: 58.67vw; height: 12vw; background: #FFF url("../img/common/btn.icon.arrow.01.sp.svg") no-repeat right 4vw center; background-size: 1.5vw auto; font-weight: var(--font-sans-medium); line-height: 1; text-decoration: none; text-align: center; font-size: max(3.47vw,var(--font-size-min)); color: #BF2424; border: 2px solid #BF2424; border-radius: 6vw; margin: 0 auto; position: relative; } #pageMitsuboshiAbout div.panelMain section.sec3{ margin: 0 0 0 0; padding: 8vw 0 10vw; position: relative; background: #FFF; } #pageMitsuboshiAbout div.panelMain section.sec3::before{ content: ''; width: 100%; height: 61.45vw; background: #F4F5F6; position: absolute; bottom: 0; right: 0; } #pageMitsuboshiAbout div.panelMain section.sec3 span.image{ width: 89.33vw; height: 61.06vw; background: url("../img/mitsuboshi/about/sec3.image.sp.jpg") no-repeat; background-size: 100% auto; position: relative; display: block; margin: 0 auto 7vw; } #pageMitsuboshiAbout div.panelMain section.sec3 h3{ font-size: 5.33vw; line-height: 1.3; font-weight: var(--font-sans-bold); border-left: 5px solid #1C4A6D; padding: 1vw 0 1vw 4vw; margin: 0 5.33vw; position: relative; } #pageMitsuboshiAbout div.panelMain section.sec3 p{ margin: 0 5.33vw 5vw; padding: 2vw 0 2vw 4vw; border-left: 5px solid #E4E4E4; font-size: max(3.47vw,var(--font-size-min)); line-height: 1.6; position: relative; } #pageMitsuboshiAbout div.panelMain section.sec3 a.more{ display: flex; justify-content: center; align-items: center; width: 58.67vw; height: 12vw; background: #FFF url("../img/common/btn.icon.arrow.01.sp.svg") no-repeat right 4vw center; background-size: 1.5vw auto; font-weight: var(--font-sans-medium); line-height: 1; text-decoration: none; text-align: center; font-size: max(3.47vw,var(--font-size-min)); color: #BF2424; border: 2px solid #BF2424; border-radius: 6vw; margin: 0 auto; position: relative; } #pageMitsuboshiAbout div.panelMain section.sec4{ margin: 0 0 15vw 0; padding: 10vw 0 8vw; position: relative; background: #FFF; } #pageMitsuboshiAbout div.panelMain section.sec4::before{ content: ''; width: 100%; height: 47.47vw; background: #F4F5F6; position: absolute; bottom: 0; right: 0; } #pageMitsuboshiAbout div.panelMain section.sec4 span.figure{ width: 56.53vw; height: 80vw; background: url("../img/mitsuboshi/about/sec4.figure.sp.png") no-repeat; background-size: 100% auto; margin: 0 auto; display: block; position: relative; } #pageMitsuboshiAbout div.panelMain section.sec4 div.inner{ margin: 0 5.33vw 5vw; position: relative; padding: 10vw 0; display: flex; flex-direction: column; } #pageMitsuboshiAbout div.panelMain section.sec4 div.inner::before{ background: url("../img/mitsuboshi/about/sec4.border.star.sp.svg") no-repeat left top; background-size: 100% auto; content: ''; position: absolute; top: 0; right: 0; left: 0; margin: 0 auto; width: 88.4vw; height: 4.53vw; } #pageMitsuboshiAbout div.panelMain section.sec4 div.inner::after{ background: url("../img/mitsuboshi/about/sec4.border.star.sp.svg") no-repeat left bottom; background-size: 100% auto; content: ''; position: absolute; bottom: 0; right: 0; left: 0; margin: 0 auto; width: 88.4vw; height: 4.53vw; } #pageMitsuboshiAbout div.panelMain section.sec4 h3{ order: 2; background: url("../img/mitsuboshi/about/sec4.title.sp.svg") no-repeat; background-size: 100% auto; width: 19.73vw; height: 9.47vw; margin: 0 auto 3vw; padding: 0 0 0 0; white-space: nowrap; text-indent: 100%; overflow: hidden; position: relative; } #pageMitsuboshiAbout div.panelMain section.sec4 p.catch{ order: 1; margin: 0 0 7vw 0; padding: 0px 0 0px 0px; font-size: max(3.47vw,var(--font-size-min)); line-height: 1; position: relative; text-align: center; } #pageMitsuboshiAbout div.panelMain section.sec4 p.profile{ order: 3; margin: 0 4vw 0; padding: 0px 0 0px 0px; font-size: max(3.47vw,var(--font-size-min)); line-height: 1.6; position: relative; } #pageMitsuboshiAbout div.panelMain section.sec5{ margin: 0 0 0 0; padding: 8vw 0 17vw; position: relative; background: #FFF; } #pageMitsuboshiAbout div.panelMain section.sec5::before{ content: ''; width: 100%; height: 47.47vw; background: #F4F5F6; position: absolute; bottom: 0; right: 0; } #pageMitsuboshiAbout div.panelMain section.sec5 span.figure{ width: 63.87vw; height: 53.6vw; background: url("../img/mitsuboshi/about/sec5.figure.sp.png") no-repeat; background-size: 100% auto; margin: 0 auto; display: block; position: relative; } #pageMitsuboshiAbout div.panelMain section.sec5 div.inner{ margin: 0 5.33vw 5vw; position: relative; padding: 10vw 0; display: flex; flex-direction: column; } #pageMitsuboshiAbout div.panelMain section.sec5 div.inner::before{ background: url("../img/mitsuboshi/about/sec4.border.star.sp.svg") no-repeat left top; background-size: 100% auto; content: ''; position: absolute; top: 0; right: 0; left: 0; margin: 0 auto; width: 88.4vw; height: 4.53vw; } #pageMitsuboshiAbout div.panelMain section.sec5 div.inner::after{ background: url("../img/mitsuboshi/about/sec4.border.star.sp.svg") no-repeat left bottom; background-size: 100% auto; content: ''; position: absolute; bottom: 0; right: 0; left: 0; margin: 0 auto; width: 88.4vw; height: 4.53vw; } #pageMitsuboshiAbout div.panelMain section.sec5 h3{ order: 2; background: url("../img/mitsuboshi/about/sec5.title.sp.svg") no-repeat; background-size: 100% auto; width: 40.8vw; height: 9.6vw; margin: 0 auto 3vw; padding: 0 0 0 0; white-space: nowrap; text-indent: 100%; overflow: hidden; position: relative; } #pageMitsuboshiAbout div.panelMain section.sec5 p.catch{ order: 1; margin: 0 0 7vw 0; padding: 0px 0 0px 0px; font-size: max(3.47vw,var(--font-size-min)); line-height: 1; position: relative; text-align: center; } #pageMitsuboshiAbout div.panelMain section.sec5 p.profile{ order: 3; margin: 0 4vw 0; padding: 0px 0 0px 0px; font-size: max(3.47vw,var(--font-size-min)); line-height: 1.6; position: relative; } } /* ------------------------------------------------------------------------------ */ @media print, screen and (min-width: 769px) { #pageMitsuboshiAboutBook{} #pageMitsuboshiAboutBook header.pageHeader{ height: 458px; background: #F4F5F6; padding: 160px 0 0 42px; display: flex; flex-direction: column; } #pageMitsuboshiAboutBook header.pageHeader p.catch{ margin: 0 0 0; padding: 15px 0 5px 28px; border-left: 5px solid #1C4A6D; font-size: 24px; font-weight: var(--font-sans-bold); line-height: 1; order: 1; } #pageMitsuboshiAboutBook header.pageHeader .title{ font-size: 48px; text-indent: -0.5em; line-height: 1.3; font-weight: var(--font-sans-bold); margin: 0; padding: 15px 0 20px 27px; border-left: 5px solid #1C4A6D; position: relative; order: 2; } #pageMitsuboshiAboutBook header.pageHeader p.intro{ margin: 0 0 0; padding: 15px 60px 15px 28px; border-left: 5px solid rgba(28,74,109,0.32); font-size: 18px; line-height: 1.7; order: 3; } #pageMitsuboshiAboutBook div.panelMain{} #pageMitsuboshiAboutBook div.panelMain section.sec1{} #pageMitsuboshiAboutBook div.panelMain section.sec1 div.header{ background: url("../img/mitsuboshi/about/bg.grid.svg") no-repeat; height: 358px; padding: 40px 0 0 0; margin: 0 0 55px 0; } #pageMitsuboshiAboutBook div.panelMain section.sec1 div.header h2{ margin: 0 auto; padding: 0; background: url("../img/mitsuboshi/about/intro.png") no-repeat; width: 613px; height: 273px; text-indent: 100%; overflow: hidden; white-space: nowrap; } #pageMitsuboshiAboutBook div.panelMain section.sec1 p.intro{ font-size: 20px; line-height: 1.9; font-weight: var(--font-sans-bold); text-align: center; margin: 0 0 40px; } #pageMitsuboshiAboutBook div.panelMain section.sec1 p.intro span{ font-size: 30px; } #pageMitsuboshiAboutBook div.panelMain section.sec1 p.intro em{ font-size: 30px; display: inline-block; border-bottom: 5px solid #BF2424; font-style: normal; margin-top: 10px; } #pageMitsuboshiAboutBook div.panelMain section.sec1 p.description{ font-size: 16px; line-height: 2.4; text-align: center; margin: 0 0 30px; } #pageMitsuboshiAboutBook div.panelMain section.sec1 ol{ list-style: none; margin: 0 90px 44px; padding: 0; display: flex; justify-content: space-between; } #pageMitsuboshiAboutBook div.panelMain section.sec1 ol li{ border: 1px solid #85A7BF; width: 272px; padding: 20px; } #pageMitsuboshiAboutBook div.panelMain section.sec1 ol li span{ display: block; width: 232px; height: 92px; text-indent: 100%; overflow: hidden; white-space: nowrap; margin: 0 0 15px; } #pageMitsuboshiAboutBook div.panelMain section.sec1 ol li:nth-child(1) span{ background: url("../img/mitsuboshi/about/book/sec1.point.star3.png") no-repeat; } #pageMitsuboshiAboutBook div.panelMain section.sec1 ol li:nth-child(2) span{ background: url("../img/mitsuboshi/about/book/sec1.point.star2.png") no-repeat; } #pageMitsuboshiAboutBook div.panelMain section.sec1 ol li:nth-child(3) span{ background: url("../img/mitsuboshi/about/book/sec1.point.star1.png") no-repeat; } #pageMitsuboshiAboutBook div.panelMain section.sec1 ol li p{ font-size: 20px; line-height: 1.9; font-weight: var(--font-sans-bold); text-align: center; margin: 0; } #pageMitsuboshiAboutBook div.panelMain section.sec1 p.outro{ font-size: 20px; line-height: 2.7; font-weight: var(--font-sans-bold); text-align: center; margin: 0 90px 100px; position: relative; } #pageMitsuboshiAboutBook div.panelMain section.sec1 p.outro::before{ content: ''; background: url("../img/mitsuboshi/about/book/sec1.outro.bracket.left.svg") no-repeat; width: 31px; height: 176px; position: absolute; left: 0; top: 0; } #pageMitsuboshiAboutBook div.panelMain section.sec1 p.outro::after{ content: ''; background: url("../img/mitsuboshi/about/book/sec1.outro.bracket.right.svg") no-repeat; width: 31px; height: 176px; position: absolute; right: 0; top: 0; } #pageMitsuboshiAboutBook div.panelMain section.sec2{ position: relative; } #pageMitsuboshiAboutBook div.panelMain section.sec2 h2{ height: 65px; background: #1C4A6D; font-size: 28px; line-height: 62px; font-weight: var(--font-sans-bold); color: #FFF; text-align: center; margin: 0 0; padding: 0; } #pageMitsuboshiAboutBook div.panelMain section.sec2 ul{ list-style: none; margin: 0 0 0 0; padding: 0; } #pageMitsuboshiAboutBook div.panelMain section.sec2 ul li{ padding: 0 0 100px; position: relative; } #pageMitsuboshiAboutBook div.panelMain section.sec2 ul li article{ border-left: 5px solid #E4E4E4; margin: 79px 0 0 360px; padding: 0; } #pageMitsuboshiAboutBook div.panelMain section.sec2 ul li.year2021a span.book{ display: block; background: url("../img/mitsuboshi/about/book/mitsuboshi-guide.2021a.jpg") no-repeat; width: 295px; height: 437px; position: absolute; left: 30px; top: 0px; } #pageMitsuboshiAboutBook div.panelMain section.sec2 ul li.year2021b span.book{ display: block; background: url("../img/mitsuboshi/about/book/mitsuboshi-guide.2021b.jpg") no-repeat; width: 295px; height: 497px; position: absolute; left: 30px; top: 0px; } #pageMitsuboshiAboutBook div.panelMain section.sec2 ul li.year2022 span.book{ display: block; background: url("../img/mitsuboshi/about/book/mitsuboshi-guide.2022.jpg") no-repeat; width: 295px; height: 495px; position: absolute; left: 30px; top: 0px; } #pageMitsuboshiAboutBook div.panelMain section.sec2 ul li.year2023 span.book{ display: block; background: url("../img/mitsuboshi/about/book/mitsuboshi-guide.2023.jpg") no-repeat; width: 295px; height: 497px; position: absolute; left: 30px; top: 0px; } #pageMitsuboshiAboutBook div.panelMain section.sec2 ul li.year2024 span.book{ display: block; background: url("../img/mitsuboshi/about/book/mitsuboshi-guide.2024.jpg") no-repeat; width: 295px; height: 497px; position: absolute; left: 30px; top: 0px; } #pageMitsuboshiAboutBook div.panelMain section.sec2 ul li article::before{ content: ''; width: calc(100% + 360px); height: 432px; background: #F4F5F6; z-index: -1; position: absolute; bottom: 0; left: -360px; } #pageMitsuboshiAboutBook div.panelMain section.sec2 ul li article h3{ font-size: 30px; line-height: 1.5; font-weight: var(--font-sans-black); border-left: 5px solid #1C4A6D; padding: 0px 0 0px 27px; margin: 0 0 0px -5px; width: 630px; } #pageMitsuboshiAboutBook div.panelMain section.sec2 ul li article dl{ margin: 0 0 20px; padding: 80px 0 0 0; display: flex; flex-wrap: wrap; align-items: center; } #pageMitsuboshiAboutBook div.panelMain section.sec2 ul li article dl dt{ margin: 0 0 10px; padding: 0 20px 0 0; width: 116px; text-align: right; font-size: 16px; line-height: 1.6; color: #85A7BF; font-weight: var(--font-sans-bold); } #pageMitsuboshiAboutBook div.panelMain section.sec2 ul li article dl dd{ margin: 0 0 10px; padding: 0 0 0 20px; width: calc(100% - 116px); border-left: 1px solid #D2D2D2; font-size: 16px; line-height: 1.6; } #pageMitsuboshiAboutBook div.panelMain section.sec2 ul li article p.description{ font-size: 16px; line-height: 1.9; margin: 0 110px 40px 30px; } #pageMitsuboshiAboutBook div.panelMain section.sec2 ul li article a.shop{ display: block; width: 280px; height: 60px; margin: 0 0 0 41px; background: #FFF url("../img/common/btn.icon.arrow.01.svg") no-repeat right 28px center; font-weight: var(--font-sans-medium); line-height: 53px; text-decoration: none; text-align: center; font-size: 18px; color: #BF2424; border: 2px solid #BF2424; border-radius: 30px; } #pageMitsuboshiAboutBook div.panelMain section.sec3{ padding: 70px 30px 0; margin: 0 0 100px; } #pageMitsuboshiAboutBook div.panelMain section.sec3 h2{ font-size: 30px; line-height: 1; font-weight: var(--font-sans-black); border-left: 5px solid #1C4A6D; padding: 15px 0 15px 27px; margin: 0 0 30px 0; } #pageMitsuboshiAboutBook div.panelMain section.sec3 p{ font-size: 16px; line-height: 2.1; margin: 0; } } @media screen and (max-width: 768px) { #pageMitsuboshiAboutBook{} #pageMitsuboshiAboutBook header.pageHeader{ background: #1C4A6D url("../img/mitsuboshi/about/header.bg.sp.jpg") no-repeat left -15.23vw top -7.55vw; background-size: 110.27vw auto; padding: 66vw 0 6vw 5.33vw; display: flex; flex-direction: column; position: relative; } #pageMitsuboshiAboutBook header.pageHeader .title{ margin: 0; padding: 1vw 0 2vw 4vw; border-left: 5px solid #FFF; color: #FFF; font-size: 6.67vw; line-height: 1.3; font-weight: var(--font-sans-bold); display: block; order: 2; } #pageMitsuboshiAboutBook header.pageHeader p.catch{ margin: 0 0 0; padding: 2vw 0 1vw 4vw; border-left: 5px solid #FFF; color: #FFF; font-size: 4vw; font-weight: var(--font-sans-bold); line-height: 1; order: 1; } #pageMitsuboshiAboutBook header.pageHeader p.intro{ margin: 0; padding: 2vw 7vw 2vw 4vw; border-left: 5px solid rgba(255,255,255,0.32); color: #FFF; font-size: max(3.47vw,var(--font-size-min)); line-height: 1.8; order: 3; } #pageMitsuboshiAboutBook header.pageHeader p.intro a{ color: #FFF; } #pageMitsuboshiAboutBook div.panelMain{} #pageMitsuboshiAboutBook div.panelMain section.sec1{ background: #FFF url("../img/mitsuboshi/about/book/sec1.bg.sp.svg") no-repeat center top 79.46vw; background-size: 100% auto; padding: 0 0 10.67vw; } #pageMitsuboshiAboutBook div.panelMain section.sec1 div.header{ background: #FFF url("../img/mitsuboshi/about/bg.grid.sp.svg") no-repeat; background-size: 100% auto; height: 79.46vw; padding: 0; margin: 0 0 13.07vw 0; display: flex; align-items: center; } #pageMitsuboshiAboutBook div.panelMain section.sec1 div.header h2{ margin: 0 auto; padding: 0; background: url("../img/mitsuboshi/about/intro.sp.png") no-repeat; background-size: 100% auto; width: 81.73vw; height: 37.6vw; text-indent: 100%; overflow: hidden; white-space: nowrap; } #pageMitsuboshiAboutBook div.panelMain section.sec1 p.intro{ font-size: max(3.47vw,var(--font-size-min)); line-height: 1.9; font-weight: var(--font-sans-bold); text-align: center; margin: 0 8vw 5vw; } #pageMitsuboshiAboutBook div.panelMain section.sec1 p.intro span{ font-size: 5vw; display: block; } #pageMitsuboshiAboutBook div.panelMain section.sec1 p.intro em{ font-size: 5vw; display: inline-block; border-bottom: 3px solid #BF2424; font-style: normal; margin-top: 2vw; } #pageMitsuboshiAboutBook div.panelMain section.sec1 p.description{ font-size: max(3.47vw,var(--font-size-min)); line-height: 1.6; margin: 0 5.33vw 6vw; } #pageMitsuboshiAboutBook div.panelMain section.sec1 ol{ list-style: none; margin: 0 0 23vw; padding: 0; display: flex; gap: 5vw; flex-wrap: wrap; justify-content: center; } #pageMitsuboshiAboutBook div.panelMain section.sec1 ol li{ border: 1px solid #85A7BF; width: 42.93vw; height: 28.4vw; padding: 3vw 0; background: #FFF; } #pageMitsuboshiAboutBook div.panelMain section.sec1 ol li span{ display: block; width: 36.27vw; height: 16.2vw; text-align: center; margin: 0 3vw 1vw; font-size: max(3.47vw,var(--font-size-min)); line-height: 1; font-weight: var(--font-sans-bold); border-bottom: 1px solid #85A7BF; } #pageMitsuboshiAboutBook div.panelMain section.sec1 ol li:nth-child(1){ order: 1; margin: 0 20vw; } #pageMitsuboshiAboutBook div.panelMain section.sec1 ol li:nth-child(2){ order: 3; } #pageMitsuboshiAboutBook div.panelMain section.sec1 ol li:nth-child(3){ order: 2; } #pageMitsuboshiAboutBook div.panelMain section.sec1 ol li:nth-child(1) span{ background: url("../img/mitsuboshi/about/book/sec1.point.star3.sp.png") no-repeat center bottom 2vw; background-size: 100% auto; } #pageMitsuboshiAboutBook div.panelMain section.sec1 ol li:nth-child(2) span{ background: url("../img/mitsuboshi/about/book/sec1.point.star2.sp.png") no-repeat center bottom 2vw; background-size: 100% auto; } #pageMitsuboshiAboutBook div.panelMain section.sec1 ol li:nth-child(3) span{ background: url("../img/mitsuboshi/about/book/sec1.point.star1.sp.png") no-repeat center bottom 2vw; background-size: 100% auto; } #pageMitsuboshiAboutBook div.panelMain section.sec1 ol li p{ font-size: max(3.47vw,var(--font-size-min)); line-height: 1.9; font-weight: var(--font-sans-bold); text-align: center; margin: 0; } #pageMitsuboshiAboutBook div.panelMain section.sec1 p.outro{ font-size: max(3.47vw,var(--font-size-min)); line-height: 1.9; font-weight: var(--font-sans-bold); text-align: center; margin: 0 10vw; padding: 0 5vw; height: 50vw; display: flex; align-items: center; position: relative; } #pageMitsuboshiAboutBook div.panelMain section.sec1 p.outro::before{ content: ''; background: url("../img/mitsuboshi/about/book/sec1.outro.bracket.left.sp.svg") no-repeat; background-size: 100% auto; width: 4.13vw; height: 50vw; position: absolute; left: 0; top: 0; } #pageMitsuboshiAboutBook div.panelMain section.sec1 p.outro::after{ content: ''; background: url("../img/mitsuboshi/about/book/sec1.outro.bracket.right.sp.svg") no-repeat; background-size: 100% auto; width: 4.13vw; height: 50vw; position: absolute; right: 0; top: 0; } #pageMitsuboshiAboutBook div.panelMain section.sec2{ position: relative; background: #FFF; } #pageMitsuboshiAboutBook div.panelMain section.sec2 h2{ height: 13.32vw; background: #1C4A6D; font-size: 5.33vw; line-height: 1; display: flex; align-items: center; justify-content: center; font-weight: var(--font-sans-bold); color: #FFF; text-align: center; margin: 0 0 5vw; padding: 0; } #pageMitsuboshiAboutBook div.panelMain section.sec2 ul{ list-style: none; margin: 0; padding: 0; } #pageMitsuboshiAboutBook div.panelMain section.sec2 ul li{ margin: 0 0 7vw; position: relative; } #pageMitsuboshiAboutBook div.panelMain section.sec2 ul li:last-child{ margin: 0; } #pageMitsuboshiAboutBook div.panelMain section.sec2 ul li article{ margin: 0; padding: 0 0 8vw; } #pageMitsuboshiAboutBook div.panelMain section.sec2 ul li article::before{ content: ''; width: 100%; height: 57.69vw; background: #F4F5F6; position: absolute; bottom: 0; left: 0; } #pageMitsuboshiAboutBook div.panelMain section.sec2 ul li article h3{ font-size: 5.33vw; line-height: 1.5; font-weight: var(--font-sans-bold); border-left: 5px solid #1C4A6D; padding: 1vw 0 1vw 4vw; margin: 0 5.33vw 0; } #pageMitsuboshiAboutBook div.panelMain section.sec2 ul li article dl{ margin: 0 5.33vw; padding: 3vw 0 0 0; display: flex; flex-wrap: wrap; align-items: center; border-left: 5px solid #E4E4E4; position: relative; } #pageMitsuboshiAboutBook div.panelMain section.sec2 ul li article dl dt{ margin: 0 0 3vw; padding: 0 2vw 0 0; width: 18vw; text-align: right; font-size: max(3.47vw,var(--font-size-min)); line-height: 1.6; color: #85A7BF; font-weight: var(--font-sans-bold); } #pageMitsuboshiAboutBook div.panelMain section.sec2 ul li article dl dd{ margin: 0 0 3vw; padding: 0 0 0 2vw; width: calc(100% - 18vw); border-left: 1px solid #D2D2D2; font-size: max(3.47vw,var(--font-size-min)); line-height: 1.6; } #pageMitsuboshiAboutBook div.panelMain section.sec2 ul li article p.description{ font-size: max(3.47vw,var(--font-size-min)); line-height: 1.7; margin: 0 5.33vw 7vw; border-left: 5px solid #E4E4E4; padding: 2vw 0 2vw 4vw; } #pageMitsuboshiAboutBook div.panelMain section.sec2 ul li.year2021a span.book{ display: block; background: url("../img/mitsuboshi/about/book/mitsuboshi-guide.2021a.sp.jpg") no-repeat; background-size: 100% auto; margin: 0 auto 6vw; width: 52.67vw; height: 88.41vw; position: relative; } #pageMitsuboshiAboutBook div.panelMain section.sec2 ul li.year2021b span.book{ display: block; background: url("../img/mitsuboshi/about/book/mitsuboshi-guide.2021b.sp.jpg") no-repeat; background-size: 100% auto; margin: 0 auto 6vw; width: 52.67vw; height: 88.41vw; position: relative; } #pageMitsuboshiAboutBook div.panelMain section.sec2 ul li.year2022 span.book{ display: block; background: url("../img/mitsuboshi/about/book/mitsuboshi-guide.2022.sp.jpg") no-repeat; background-size: 100% auto; margin: 0 auto 6vw; width: 52.67vw; height: 88.41vw; position: relative; } #pageMitsuboshiAboutBook div.panelMain section.sec2 ul li.year2023 span.book{ display: block; background: url("../img/mitsuboshi/about/book/mitsuboshi-guide.2023.sp.jpg") no-repeat; background-size: 100% auto; margin: 0 auto 6vw; width: 52.67vw; height: 88.41vw; position: relative; } #pageMitsuboshiAboutBook div.panelMain section.sec2 ul li.year2024 span.book{ display: block; background: url("../img/mitsuboshi/about/book/mitsuboshi-guide.2024.sp.jpg") no-repeat; background-size: 100% auto; margin: 0 auto 6vw; width: 52.67vw; height: 88.41vw; position: relative; } #pageMitsuboshiAboutBook div.panelMain section.sec2 ul li article a.shop{ width: 35.73vw; height: 9.33vw; margin: 0 auto; background: #FFF url("../img/common/btn.icon.arrow.01.sp.svg") no-repeat right 4vw center; background-size: 1.2vw auto; font-weight: var(--font-sans-medium); line-height: 1; text-decoration: none; text-align: center; font-size: max(3.47vw,var(--font-size-min)); color: #BF2424; border: 2px solid #BF2424; display: flex; align-items: center; justify-content: center; border-radius: 5vw; position: relative; } #pageMitsuboshiAboutBook div.panelMain section.sec3{ padding: 5.33vw 5.33vw 10vw; margin: 0; background: #FFF; } #pageMitsuboshiAboutBook div.panelMain section.sec3 h2{ font-size: 5.33vw; line-height: 1.3; font-weight: var(--font-sans-bold); border-left: 5px solid #1C4A6D; padding: 1vw 0 1vw 4vw; margin: 0 0 5vw 0; } #pageMitsuboshiAboutBook div.panelMain section.sec3 p{ font-size: max(3.47vw,var(--font-size-min)); line-height: 1.6; margin: 0; } } /* ------------------------------------------------------------------------------ */ @media print, screen and (min-width: 769px) { #pageMitsuboshiAboutSelect{} #pageMitsuboshiAboutSelect header.pageHeader{ height: 458px; background: #F4F5F6; padding: 160px 0 0 42px; display: flex; flex-direction: column; } #pageMitsuboshiAboutSelect header.pageHeader p.catch{ margin: 0 0 0; padding: 15px 0 5px 28px; border-left: 5px solid #1C4A6D; font-size: 24px; font-weight: var(--font-sans-bold); line-height: 1; order: 1; } #pageMitsuboshiAboutSelect header.pageHeader .title{ font-size: 48px; line-height: 1.3; font-weight: var(--font-sans-bold); margin: 0; padding: 15px 0 20px 27px; border-left: 5px solid #1C4A6D; position: relative; order: 2; } #pageMitsuboshiAboutSelect header.pageHeader p.intro{ margin: 0 0 0; padding: 15px 110px 15px 28px; border-left: 5px solid rgba(28,74,109,0.32); font-size: 18px; line-height: 1.7; order: 3; } #pageMitsuboshiAboutSelect div.panelMain{ background: #F4F5F6; padding: 46px 0px 0; } #pageMitsuboshiAboutSelect div.panelMain section.sec1{ margin: 0 40px 60px; } #pageMitsuboshiAboutSelect div.panelMain section.sec1 h2{ font-size: 30px; line-height: 1; font-weight: var(--font-sans-black); border-left: 5px solid #1C4A6D; padding: 15px 0 15px 27px; margin: 0 0 60px 0; } #pageMitsuboshiAboutSelect div.panelMain section.sec1 p{ font-size: 16px; line-height: 2.1; margin: 0; } #pageMitsuboshiAboutSelect div.panelMain section.sec2{ border: 5px solid #85A7BF; background: #FFF; padding: 0 22px; position: relative; margin: 0 40px 50px; } #pageMitsuboshiAboutSelect div.panelMain section.sec2::before{ content: ''; display: block; width: 0px; height: 0px; border-left: 23px solid transparent; border-right: 23px solid transparent; border-top: 26px solid #85A7BF; position: absolute; left: 0; right: 0; bottom: -28px; margin: 0 auto; z-index: 10; } #pageMitsuboshiAboutSelect div.panelMain section.sec2::after{ content: ''; display: block; width: 0px; height: 0px; border-left: 23px solid transparent; border-right: 23px solid transparent; border-top: 26px solid #FFF; position: absolute; left: 0; right: 0; bottom: -21px; margin: 0 auto; z-index: 15; } #pageMitsuboshiAboutSelect div.panelMain section.sec2 h3{ border-bottom: 5px solid #85A7BF; text-align: center; font-size: 19px; line-height: 36px; font-weight: var(--font-sans-bold); margin: 0; padding: 21px 0 21px; } #pageMitsuboshiAboutSelect div.panelMain section.sec2 h3 span{ display: inline-block; height: 36px; width: 36px; background: #1C4A6D; color: #FFF; margin: 0 15px; font-size: 20px; font-weight: var(--font-sans-black); text-align: center; } #pageMitsuboshiAboutSelect div.panelMain section.sec2 ol{ list-style: none; margin: 0; padding: 22px 0 0 0; display: flex; justify-content: space-between; } #pageMitsuboshiAboutSelect div.panelMain section.sec2 ol li{ width: 290px; text-align: center; } #pageMitsuboshiAboutSelect div.panelMain section.sec2 ol li > span{ border-bottom: 1px solid #85A7BF; display: block; font-size: 18px; line-height: 1; font-weight: var(--font-sans-bold); height: 83px; margin: 0 0 15px 0; } #pageMitsuboshiAboutSelect div.panelMain section.sec2 ol li:nth-child(1) > span{ background: url("../img/mitsuboshi/about/select/sec2.point.star3.png") no-repeat center bottom 12px; } #pageMitsuboshiAboutSelect div.panelMain section.sec2 ol li:nth-child(2) > span{ background: url("../img/mitsuboshi/about/select/sec2.point.star2.png") no-repeat center bottom 12px; } #pageMitsuboshiAboutSelect div.panelMain section.sec2 ol li:nth-child(3) > span{ background: url("../img/mitsuboshi/about/select/sec2.point.star1.png") no-repeat center bottom 12px; } #pageMitsuboshiAboutSelect div.panelMain section.sec2 ol li p{ font-size: 16px; line-height: 1.6; margin: 0 0 20px 0; } #pageMitsuboshiAboutSelect div.panelMain section.sec2 ol li p span{ color: #BF2424; } #pageMitsuboshiAboutSelect div.panelMain section.sec3{ background: #FFF; padding: 40px; } #pageMitsuboshiAboutSelect div.panelMain section.sec3 h3{ font-size: 30px; line-height: 57px; font-weight: var(--font-sans-black); margin: 0 0 30px; padding: 0; } #pageMitsuboshiAboutSelect div.panelMain section.sec3 h3 span{ display: inline-block; height: 61px; width: 61px; text-align: center; background: #1C4A6D; color: #FFF; margin: 0 15px 0 0; font-size: 40px; font-weight: var(--font-sans-black); } #pageMitsuboshiAboutSelect div.panelMain section.sec3 div.sheet{ display: flex; border-bottom: 8px solid #D2D2D2; } #pageMitsuboshiAboutSelect div.panelMain section.sec3 div.sheet div.items{ width: 100%; border-right: 1px solid #D2D2D2; } #pageMitsuboshiAboutSelect div.panelMain section.sec3 div.sheet div.method{ width: 324px; min-width: 324px; } #pageMitsuboshiAboutSelect div.panelMain section.sec3 div.sheet h4{ background: #85A7BF; height: 86px; text-align: center; margin: 0 0 30px; padding: 0; color: #FFF; font-size: 23px; line-height: 80px; font-weight: var(--font-sans-bold); } #pageMitsuboshiAboutSelect div.panelMain section.sec3 div.sheet div.items dl{ margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: stretch; } #pageMitsuboshiAboutSelect div.panelMain section.sec3 div.sheet div.items dl dt{ margin: 0 0 21px 0; padding: 0; display: flex; align-items: center; justify-content: center; background: #F4F5F6; width: 203px; font-size: 20px; line-height: 1; font-weight: var(--font-sans-bold); text-align: center; } #pageMitsuboshiAboutSelect div.panelMain section.sec3 div.sheet div.items dl dd{ margin: 0 0 21px; padding: 0; width: calc(100% - 203px); } #pageMitsuboshiAboutSelect div.panelMain section.sec3 div.sheet div.items dl dd ul{ list-style: none; margin: 0; padding: 0 20px; } #pageMitsuboshiAboutSelect div.panelMain section.sec3 div.sheet div.items dl dd ul li{ border-bottom: 1px solid #D2D2D2; font-size: 16px; line-height: 1.6; padding: 3px 0; } #pageMitsuboshiAboutSelect div.panelMain section.sec3 div.sheet div.items dl dd ul li::before{ content: ''; background: url("../img/mitsuboshi/about/select/icon.square.svg") no-repeat; width: 14px; height: 15px; display: inline-block; margin: 0 10px 0 5px; vertical-align: middle; } #pageMitsuboshiAboutSelect div.panelMain section.sec3 div.sheet div.method dl{ margin: 0; padding: 136px 0 0 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; } #pageMitsuboshiAboutSelect div.panelMain section.sec3 div.sheet div.method dl dt{ margin: 0; padding: 0px 10px 13px; width: 181px; border-bottom: 1px solid #D2D2D2; font-size: 17px; line-height: 1.6; } #pageMitsuboshiAboutSelect div.panelMain section.sec3 div.sheet div.method dl dd{ margin: 0; padding: 13px 10px 0px; width: 181px; } #pageMitsuboshiAboutSelect div.panelMain section.sec3 div.sheet div.method dl dd ul{ list-style: none; margin: 0; padding: 0; } #pageMitsuboshiAboutSelect div.panelMain section.sec3 div.sheet div.method dl dd ul li{ font-size: 17px; line-height: 1.6; margin: 0 0 15px 0; } #pageMitsuboshiAboutSelect div.panelMain section.sec3 div.sheet div.method dl span.score{ font-size: 20px; font-weight: var(--font-sans-bold); margin: 0 0 0 5px; } #pageMitsuboshiAboutSelect div.panelMain section.sec3 div.sheet div.method dl span.star2{ text-indent: 100%; overflow: hidden; white-space: nowrap; margin: 10px 0 0 0; background: url("../img/mitsuboshi/about/select/sec3.point.star2.png") no-repeat; display: block; width: 77px; height: 30px; } #pageMitsuboshiAboutSelect div.panelMain section.sec3 div.sheet div.method dl span.star1{ text-indent: 100%; overflow: hidden; white-space: nowrap; margin: 10px 0 0 0; background: url("../img/mitsuboshi/about/select/sec3.point.star1.png") no-repeat; display: block; width: 77px; height: 30px; } #pageMitsuboshiAboutSelect div.panelMain section.sec4{ background: #FFF; padding: 40px 40px 70px; } #pageMitsuboshiAboutSelect div.panelMain section.sec4 h3{ font-size: 30px; line-height: 57px; font-weight: var(--font-sans-black); margin: 0 0 30px; padding: 0; } #pageMitsuboshiAboutSelect div.panelMain section.sec4 h3 span{ display: inline-block; height: 61px; width: 61px; text-align: center; background: #1C4A6D; color: #FFF; margin: 0 15px 0 0; font-size: 40px; font-weight: var(--font-sans-black); } #pageMitsuboshiAboutSelect div.panelMain section.sec4 div.sheet{ display: flex; border-bottom: 8px solid #D2D2D2; } #pageMitsuboshiAboutSelect div.panelMain section.sec4 div.sheet div.items{ width: 100%; border-right: 1px solid #D2D2D2; } #pageMitsuboshiAboutSelect div.panelMain section.sec4 div.sheet div.method{ width: 324px; min-width: 324px; } #pageMitsuboshiAboutSelect div.panelMain section.sec4 div.sheet h4{ background: #85A7BF; height: 86px; text-align: center; margin: 0 0 30px; padding: 0; color: #FFF; font-size: 23px; line-height: 80px; font-weight: var(--font-sans-bold); } #pageMitsuboshiAboutSelect div.panelMain section.sec4 div.sheet div.items ul{ list-style: none; margin: 0; padding: 0 50px 0 0; } #pageMitsuboshiAboutSelect div.panelMain section.sec4 div.sheet div.items ul li{ border-bottom: 1px solid #D2D2D2; font-size: 16px; line-height: 1.6; padding: 5px 0; } #pageMitsuboshiAboutSelect div.panelMain section.sec4 div.sheet div.items ul li::before{ content: ''; background: url("../img/mitsuboshi/about/select/icon.square.svg") no-repeat; width: 14px; height: 15px; display: inline-block; margin: 0 10px 0 5px; vertical-align: middle; } #pageMitsuboshiAboutSelect div.panelMain section.sec4 div.sheet div.method dl{ margin: 0 0 20px 0; padding: 0 0 0 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; } #pageMitsuboshiAboutSelect div.panelMain section.sec4 div.sheet div.method dl dt{ margin: 0; padding: 0px 10px 13px; width: 181px; border-bottom: 1px solid #D2D2D2; font-size: 17px; line-height: 1.6; } #pageMitsuboshiAboutSelect div.panelMain section.sec4 div.sheet div.method dl dd{ margin: 0; padding: 13px 10px 0px; width: 181px; } #pageMitsuboshiAboutSelect div.panelMain section.sec4 div.sheet div.method dl dd ul{ list-style: none; margin: 0; padding: 0; } #pageMitsuboshiAboutSelect div.panelMain section.sec4 div.sheet div.method dl dd ul li{ font-size: 17px; line-height: 1.6; margin: 0 0 15px 0; } #pageMitsuboshiAboutSelect div.panelMain section.sec4 div.sheet div.method dl span.score{ font-size: 20px; font-weight: var(--font-sans-bold); margin: 0 0 0 5px; } #pageMitsuboshiAboutSelect div.panelMain section.sec4 div.sheet div.method dl span.star2{ text-indent: 100%; overflow: hidden; white-space: nowrap; margin: 10px 0 0 0; background: url("../img/mitsuboshi/about/select/sec3.point.star2.png") no-repeat; display: block; width: 77px; height: 30px; } #pageMitsuboshiAboutSelect div.panelMain section.sec4 div.sheet div.method dl span.star1{ text-indent: 100%; overflow: hidden; white-space: nowrap; margin: 10px 0 0 0; background: url("../img/mitsuboshi/about/select/sec3.point.star1.png") no-repeat; display: block; width: 77px; height: 30px; } #pageMitsuboshiAboutSelect div.panelMain p.outro{ background: #FFF; margin: 0 0px 70px; padding: 0px 260px 0 55px; font-size: 16px; line-height: 1.6; text-indent: -1em; } } @media screen and (max-width: 768px) { #pageMitsuboshiAboutSelect{} #pageMitsuboshiAboutSelect header.pageHeader{ background: #1C4A6D url("../img/mitsuboshi/about/header.bg.sp.jpg") no-repeat left -15.23vw top -7.55vw; background-size: 110.27vw auto; padding: 66vw 0 6vw 5.33vw; display: flex; flex-direction: column; position: relative; } #pageMitsuboshiAboutSelect header.pageHeader .title{ margin: 0; padding: 1vw 0 2vw 4vw; border-left: 5px solid #FFF; color: #FFF; font-size: 6.67vw; line-height: 1.3; font-weight: var(--font-sans-bold); display: block; order: 2; } #pageMitsuboshiAboutSelect header.pageHeader p.catch{ margin: 0 0 0; padding: 2vw 0 1vw 4vw; border-left: 5px solid #FFF; color: #FFF; font-size: 4vw; font-weight: var(--font-sans-bold); line-height: 1; order: 1; } #pageMitsuboshiAboutSelect header.pageHeader p.intro{ margin: 0; padding: 2vw 7vw 2vw 4vw; border-left: 5px solid rgba(255,255,255,0.32); color: #FFF; font-size: max(3.47vw,var(--font-size-min)); line-height: 1.8; order: 3; } #pageMitsuboshiAboutSelect header.pageHeader p.intro a{ color: #FFF; } #pageMitsuboshiAboutSelect div.panelMain{ background: #FFF; padding: 6vw 0px 0; } #pageMitsuboshiAboutSelect div.panelMain section.sec1{ margin: 0 5.33vw 7vw; } #pageMitsuboshiAboutSelect div.panelMain section.sec1 h2{ font-size: 5.33vw; line-height: 1.3; font-weight: var(--font-sans-bold); border-left: 5px solid #1C4A6D; padding: 1vw 0 1vw 4vw; margin: 0 0 5vw 0; } #pageMitsuboshiAboutSelect div.panelMain section.sec1 p{ font-size: max(3.47vw,var(--font-size-min)); line-height: 1.6; margin: 0; } #pageMitsuboshiAboutSelect div.panelMain section.sec2{ border: 5px solid #85A7BF; background: #FFF; padding: 4.33vw; position: relative; margin: 0 5.33vw 15vw; } #pageMitsuboshiAboutSelect div.panelMain section.sec2::before{ content: ''; display: block; width: 0px; height: 0px; border-left: 6vw solid transparent; border-right: 6vw solid transparent; border-top: 8vw solid #85A7BF; position: absolute; left: 0; right: 0; bottom: -8vw; margin: 0 auto; z-index: 10; } #pageMitsuboshiAboutSelect div.panelMain section.sec2::after{ content: ''; display: block; width: 0px; height: 0px; border-left: 6vw solid transparent; border-right: 6vw solid transparent; border-top: 8vw solid #FFF; position: absolute; left: 0; right: 0; bottom: -6.5vw; margin: 0 auto; z-index: 15; } #pageMitsuboshiAboutSelect div.panelMain section.sec2 h3{ border-bottom: 5px solid #85A7BF; text-align: center; font-size: 4vw; line-height: 8vw; font-weight: var(--font-sans-bold); margin: 0; padding: 0vw 0 2vw; } #pageMitsuboshiAboutSelect div.panelMain section.sec2 h3 span{ display: inline-block; height: 7vw; width: 7vw; background: #1C4A6D; color: #FFF; margin: 0 2vw; font-size: 4vw; line-height: 1.6; font-weight: var(--font-sans-black); text-align: center; } #pageMitsuboshiAboutSelect div.panelMain section.sec2 ol{ list-style: none; margin: 0; padding: 6vw 0 0 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 7vw 6vw; } #pageMitsuboshiAboutSelect div.panelMain section.sec2 ol li{ text-align: center; } #pageMitsuboshiAboutSelect div.panelMain section.sec2 ol li:nth-child(1){ width: 49.87vw; } #pageMitsuboshiAboutSelect div.panelMain section.sec2 ol li:nth-child(2){ width: 35.73vw; } #pageMitsuboshiAboutSelect div.panelMain section.sec2 ol li:nth-child(3){ width: 35.73vw; } #pageMitsuboshiAboutSelect div.panelMain section.sec2 ol li > span{ border-bottom: 1px solid #85A7BF; display: block; font-size: max(3.47vw,var(--font-size-min)); line-height: 1; font-weight: var(--font-sans-bold); height: 15vw; margin: 0 0 3vw 0; } #pageMitsuboshiAboutSelect div.panelMain section.sec2 ol li:nth-child(1) > span{ background: url("../img/mitsuboshi/about/select/sec2.point.star3.sp.png") no-repeat center bottom 2vw; background-size: auto 7.47vw; } #pageMitsuboshiAboutSelect div.panelMain section.sec2 ol li:nth-child(2) > span{ background: url("../img/mitsuboshi/about/select/sec2.point.star2.sp.png") no-repeat center bottom 2vw; background-size: auto 7.47vw; } #pageMitsuboshiAboutSelect div.panelMain section.sec2 ol li:nth-child(3) > span{ background: url("../img/mitsuboshi/about/select/sec2.point.star1.sp.png") no-repeat center bottom 2vw; background-size: auto 7.47vw; } #pageMitsuboshiAboutSelect div.panelMain section.sec2 ol li p{ font-size: max(3.47vw,var(--font-size-min)); line-height: 1.6; margin: 0 0 0 0; } #pageMitsuboshiAboutSelect div.panelMain section.sec2 ol li p span{ color: #BF2424; } #pageMitsuboshiAboutSelect div.panelMain section.sec3{ background: #FFF; padding: 0; margin: 0 0 11vw; } #pageMitsuboshiAboutSelect div.panelMain section.sec3 h3{ font-size: 4vw; line-height: 1.4; font-weight: var(--font-sans-black); margin: 0 5.33vw 5vw; padding: 0 0 0; display: flex; align-items: center; } #pageMitsuboshiAboutSelect div.panelMain section.sec3 h3 span{ display: inline-flex; align-items: center; justify-content: center; height: 14.53vw; width: 8.13vw; text-align: center; background: #1C4A6D; color: #FFF; margin: 0 2vw 0 0; font-size: 4vw; line-height: 1; font-weight: var(--font-sans-black); } #pageMitsuboshiAboutSelect div.panelMain section.sec3 div.sheet{ border-bottom: 5px solid #D2D2D2; padding: 0 5.33vw; } #pageMitsuboshiAboutSelect div.panelMain section.sec3 div.sheet div.items{} #pageMitsuboshiAboutSelect div.panelMain section.sec3 div.sheet div.method{} #pageMitsuboshiAboutSelect div.panelMain section.sec3 div.sheet h4{ background: #85A7BF; height: 11.73vw; text-align: center; margin: 0 0 5vw; padding: 0; color: #FFF; font-size: 4.8vw; display: flex; align-items: center; justify-content: center; line-height: 1; font-weight: var(--font-sans-bold); } #pageMitsuboshiAboutSelect div.panelMain section.sec3 div.sheet div.items dl{ margin: 0; padding: 0; } #pageMitsuboshiAboutSelect div.panelMain section.sec3 div.sheet div.items dl dt{ margin: 0 0 3vw 0; padding: 0; height: 17.73vw; display: flex; align-items: center; justify-content: center; background: #F4F5F6; font-size: 4vw; line-height: 1; font-weight: var(--font-sans-bold); text-align: center; } #pageMitsuboshiAboutSelect div.panelMain section.sec3 div.sheet div.items dl dd{ margin: 0 0 7vw; padding: 0; } #pageMitsuboshiAboutSelect div.panelMain section.sec3 div.sheet div.items dl dd ul{ list-style: none; margin: 0; padding: 0; } #pageMitsuboshiAboutSelect div.panelMain section.sec3 div.sheet div.items dl dd ul li{ border-bottom: 1px solid #D2D2D2; font-size: max(3.47vw,var(--font-size-min)); line-height: 1.4; padding: 1vw 0; } #pageMitsuboshiAboutSelect div.panelMain section.sec3 div.sheet div.items dl dd ul li::before{ content: ''; background: url("../img/mitsuboshi/about/select/icon.square.svg") no-repeat; background-size: 100% auto; width: 3.07vw; height: 3.07vw; display: inline-block; margin: 0 2vw 0 1vw; vertical-align: middle; } #pageMitsuboshiAboutSelect div.panelMain section.sec3 div.sheet div.method dl{ margin: 0 0 3vw; padding: 0 0 0 0; display: flex; align-items: center; } #pageMitsuboshiAboutSelect div.panelMain section.sec3 div.sheet div.method dl dt{ margin: 0; padding: 0px 2vw 0 0; width: 29vw; font-size: max(3.47vw,var(--font-size-min)); line-height: 1.6; } #pageMitsuboshiAboutSelect div.panelMain section.sec3 div.sheet div.method dl dd{ margin: 0; padding: 2vw 0 2vw 2vw; width: calc(100% - 29vw); border-left: 1px solid #D2D2D2; } #pageMitsuboshiAboutSelect div.panelMain section.sec3 div.sheet div.method dl dd ul{ list-style: none; margin: 0; padding: 0; } #pageMitsuboshiAboutSelect div.panelMain section.sec3 div.sheet div.method dl dd ul li{ font-size: max(3.47vw,var(--font-size-min)); line-height: 1; margin: 0 0 4vw 0; height: 5.6vw; display: flex; align-items: center; } #pageMitsuboshiAboutSelect div.panelMain section.sec3 div.sheet div.method dl dd ul li:last-child{ margin: 0; } #pageMitsuboshiAboutSelect div.panelMain section.sec3 div.sheet div.method dl span.score{ font-size: max(3.47vw,var(--font-size-min)); font-weight: var(--font-sans-bold); margin: 0 0 0 1vw; width: 22vw; } #pageMitsuboshiAboutSelect div.panelMain section.sec3 div.sheet div.method dl span.star2{ text-indent: 100%; overflow: hidden; white-space: nowrap; margin: 0 0 0 0vw; background: url("../img/mitsuboshi/about/select/sec3.point.star2.sp.png") no-repeat; background-size: 100% auto; display: inline-block; width: 14.53vw; height: 5.6vw; } #pageMitsuboshiAboutSelect div.panelMain section.sec3 div.sheet div.method dl span.star1{ text-indent: 100%; overflow: hidden; white-space: nowrap; margin: 0 0 0 0vw; background: url("../img/mitsuboshi/about/select/sec3.point.star1.sp.png") no-repeat; background-size: 100% auto; display: inline-block; width: 14.53vw; height: 5.6vw; } #pageMitsuboshiAboutSelect div.panelMain section.sec4{ background: #FFF; padding: 0; margin: 0 0 11vw; } #pageMitsuboshiAboutSelect div.panelMain section.sec4 h3{ font-size: 4vw; line-height: 1.4; font-weight: var(--font-sans-black); margin: 0 5.33vw 5vw; padding: 0 0 0; display: flex; align-items: center; } #pageMitsuboshiAboutSelect div.panelMain section.sec4 h3 span{ display: inline-flex; align-items: center; justify-content: center; height: 14.53vw; width: 8.13vw; text-align: center; background: #1C4A6D; color: #FFF; margin: 0 2vw 0 0; font-size: 4vw; line-height: 1; font-weight: var(--font-sans-black); } #pageMitsuboshiAboutSelect div.panelMain section.sec4 div.sheet{ border-bottom: 5px solid #D2D2D2; padding: 0 5.33vw; } #pageMitsuboshiAboutSelect div.panelMain section.sec4 div.sheet div.items{} #pageMitsuboshiAboutSelect div.panelMain section.sec4 div.sheet div.method{} #pageMitsuboshiAboutSelect div.panelMain section.sec4 div.sheet h4{ background: #85A7BF; height: 11.73vw; text-align: center; margin: 0 0 5vw; padding: 0; color: #FFF; font-size: 4.8vw; display: flex; align-items: center; justify-content: center; line-height: 1; font-weight: var(--font-sans-bold); } #pageMitsuboshiAboutSelect div.panelMain section.sec4 div.sheet div.items ul{ list-style: none; margin: 0 0 5vw; padding: 0 0 0 0; } #pageMitsuboshiAboutSelect div.panelMain section.sec4 div.sheet div.items ul li{ border-bottom: 1px solid #D2D2D2; font-size: max(3.47vw,var(--font-size-min)); line-height: 1.4; padding: 1vw 0; display: flex; } #pageMitsuboshiAboutSelect div.panelMain section.sec4 div.sheet div.items ul li::before{ content: ''; background: url("../img/mitsuboshi/about/select/icon.square.svg") no-repeat; background-size: 100% auto; width: 3.07vw; min-width: 3.07vw; height: 3.07vw; display: inline-block; margin: 1vw 2vw 0 1vw; vertical-align: middle; } #pageMitsuboshiAboutSelect div.panelMain section.sec4 div.sheet div.method dl{ margin: 0 0 3vw; padding: 0 2vw 0 0; display: flex; align-items: center; } #pageMitsuboshiAboutSelect div.panelMain section.sec4 div.sheet div.method dl dt{ margin: 0; padding: 0px 2vw 0 0; width: 29vw; font-size: max(3.47vw,var(--font-size-min)); line-height: 1.6; } #pageMitsuboshiAboutSelect div.panelMain section.sec4 div.sheet div.method dl dd{ margin: 0; padding: 2vw 0 2vw 2vw; width: calc(100% - 29vw); border-left: 1px solid #D2D2D2; } #pageMitsuboshiAboutSelect div.panelMain section.sec4 div.sheet div.method dl dd ul{ list-style: none; margin: 0; padding: 0; } #pageMitsuboshiAboutSelect div.panelMain section.sec4 div.sheet div.method dl dd ul li{ font-size: max(3.47vw,var(--font-size-min)); line-height: 1; margin: 0 0 4vw 0; height: 5.6vw; display: flex; align-items: center; } #pageMitsuboshiAboutSelect div.panelMain section.sec4 div.sheet div.method dl dd ul li:last-child{ margin: 0; } #pageMitsuboshiAboutSelect div.panelMain section.sec4 div.sheet div.method dl span.score{ font-size: max(3.47vw,var(--font-size-min)); font-weight: var(--font-sans-bold); margin: 0 0 0 1vw; width: 22vw; } #pageMitsuboshiAboutSelect div.panelMain section.sec4 div.sheet div.method dl span.star2{ text-indent: 100%; overflow: hidden; white-space: nowrap; margin: 0 0 0 0vw; background: url("../img/mitsuboshi/about/select/sec3.point.star2.sp.png") no-repeat; background-size: 100% auto; display: inline-block; width: 14.53vw; height: 5.6vw; } #pageMitsuboshiAboutSelect div.panelMain section.sec4 div.sheet div.method dl span.star1{ text-indent: 100%; overflow: hidden; white-space: nowrap; margin: 0 0 0 0vw; background: url("../img/mitsuboshi/about/select/sec3.point.star1.sp.png") no-repeat; background-size: 100% auto; display: inline-block; width: 14.53vw; height: 5.6vw; } #pageMitsuboshiAboutSelect div.panelMain p.outro{ background: #FFF; margin: 0 8vw 0 8vw; padding: 0px 0 10vw 0; font-size: max(3.47vw,var(--font-size-min)); line-height: 1.6; text-indent: -1em; } } /* ------------------------------------------------------------------------------ */ @media print, screen and (min-width: 769px) { #pageMitsuboshiRecommend{} #pageMitsuboshiRecommend header.pageHeader{ height: 518px; background: #F4F5F6; padding: 160px 0 0 42px; display: flex; flex-direction: column; } #pageMitsuboshiRecommend header.pageHeader p.catch{ margin: 0 0 0; padding: 5px 0 5px 28px; border-left: 5px solid #1C4A6D; font-size: 24px; font-weight: var(--font-sans-bold); line-height: 1; order: 1; } #pageMitsuboshiRecommend header.pageHeader .title{ font-size: 50px; line-height: 1.3; font-weight: var(--font-sans-bold); margin: 0; padding: 10px 0 15px 27px; border-left: 5px solid #1C4A6D; position: relative; order: 2; } #pageMitsuboshiRecommend header.pageHeader p.intro{ margin: 0 0 0; padding: 15px 120px 15px 28px; border-left: 5px solid rgba(28,74,109,0.32); font-size: 18px; line-height: 1.7; order: 3; } #pageMitsuboshiRecommend div.panelMain{ background: #F4F5F6; padding: 65px 40px; } #pageMitsuboshiRecommend div.panelMain section.search{ margin: 0 0 90px 0; } #pageMitsuboshiRecommend div.panelMain section.search h2{ height: 65px; background: #1C4A6D; font-size: 30px; line-height: 60px; font-weight: var(--font-sans-black); color: #FFF; text-align: center; margin: 0 0 25px; padding: 0; } #pageMitsuboshiRecommend div.panelMain section.search dl{ margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; } #pageMitsuboshiRecommend div.panelMain section.search dl dt{ margin: 0 0 20px; padding: 0 0 0 30px; width: 146px; background: url("../img/common/icon.map-maker.01.svg") no-repeat left center; min-height: 30px; } #pageMitsuboshiRecommend div.panelMain section.search dl dd{ margin: 0 0 20px; padding: 0 0 0 10px; width: calc(100% - 146px); border-left: 1px solid #D2D2D2; } #pageMitsuboshiRecommend div.panelMain section.search dl dd ul{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; } #pageMitsuboshiRecommend div.panelMain section.search dl dd ul li{ margin-left: 20px; } #pageMitsuboshiRecommend div.panelMain section.search dl dd ul li select{ height: 50px; border-radius: 5px; border: none; } #pageMitsuboshiRecommend div.panelMain section.area{} #pageMitsuboshiRecommend div.panelMain section.area h2{ height: 65px; background: #1C4A6D; font-size: 30px; line-height: 60px; font-weight: var(--font-sans-black); color: #FFF; text-align: center; margin: 0 0 25px; padding: 0; } #pageMitsuboshiRecommend div.panelMain section.area div.list{ display: flex; align-items: flex-start; } #pageMitsuboshiRecommend div.panelMain section.area div.list ul.menu{ width: 212px; min-width: 212px; list-style: none; margin: 0 40px 60px 0; padding: 0; position: -webkit-sticky; position: sticky; top: 120px; } #pageMitsuboshiRecommend div.panelMain section.area div.list ul.menu li{ border-bottom: 1px solid #DCDCDC; } #pageMitsuboshiRecommend div.panelMain section.area div.list ul.menu li.active{ background-color: #FFF; } #pageMitsuboshiRecommend div.panelMain section.area div.list ul.menu li a{ display: block; height: 48px; line-height: 48px; padding: 0 10px; text-decoration: none; color: #000; background: url("../img/common/btn.icon.arrow.01.svg") no-repeat right 10px center; } #pageMitsuboshiRecommend div.panelMain section.area div.list div.speciality{ width: 100%; } #pageMitsuboshiRecommend div.panelMain section.area div.list div.speciality h3{ margin: 0 0px 40px; padding: 0 0 15px 0px; font-size: 23px; line-height: 1; position: relative; font-weight: normal; border-bottom: 5px solid #DCDCDC; } #pageMitsuboshiRecommend div.panelMain section.area div.list div.speciality h3::before{ content: ''; width: 94px; border-bottom: 5px solid #1C4A6D; position: absolute; bottom: -5px; left: 0; } #pageMitsuboshiRecommend div.panelMain section.area div.list div.speciality ol{ list-style: none; margin: 0 0 60px 0; padding: 0; } #pageMitsuboshiRecommend div.panelMain section.area div.list div.speciality ol > li{ background: #FFF; margin: 0 0 20px 0; padding: 20px 30px; } #pageMitsuboshiRecommend div.panelMain section.area div.list div.speciality ol > li h4{ font-size: 30px; line-height: 1.4; font-weight: var(--font-sans-bold); margin: 0 0 27px 0; padding: 0px 0 0px 20px; border-left: 5px solid #1C4A6D; position: relative; } #pageMitsuboshiRecommend div.panelMain section.area div.list div.speciality ol > li ul{ list-style: none; margin: 0; padding: 0 170px 0 0; } #pageMitsuboshiRecommend div.panelMain section.area div.list div.speciality ol > li ul li{ font-size: 16px; line-height: 1.6; margin: 0 0 3px 0; } #pageMitsuboshiRecommend div.panelMain section.area div.list div.speciality ol > li ul li::before{ content: '●'; margin: 0 3px 0 0; color: #85A7BF; } #pageMitsuboshiRecommend div.panelMain section.area div.list div.speciality ol > li a.more{ display: block; width: 159px; height: 40px; background: #FFF url("../img/common/btn.icon.arrow.01.svg") no-repeat right 20px center; font-weight: var(--font-sans-medium); line-height: 33px; text-decoration: none; text-align: center; font-size: 14px; color: #BF2424; border: 2px solid #BF2424; border-radius: 20px; margin: -40px 0 0 auto; } _#pageMitsuboshiRecommend article a.fragment{ display: block; margin-top: -130px; padding-top: 130px; z-index: -1; position: relative; } } @media screen and (max-width: 768px) { #pageMitsuboshiRecommend{} #pageMitsuboshiRecommend header.pageHeader{ background: #1C4A6D url("../img/mitsuboshi/recommend/header.bg.sp.jpg") no-repeat left -15.23vw top -7.55vw; background-size: 110.27vw auto; padding: 66vw 0 6vw 5.33vw; display: flex; flex-direction: column; position: relative; } #pageMitsuboshiRecommend header.pageHeader .title{ margin: 0; padding: 1vw 0 2vw 4vw; border-left: 5px solid #FFF; color: #FFF; font-size: 6.67vw; line-height: 1.3; font-weight: var(--font-sans-bold); display: block; order: 2; } #pageMitsuboshiRecommend header.pageHeader p.catch{ margin: 0 0 0; padding: 2vw 0 1vw 4vw; border-left: 5px solid #FFF; color: #FFF; font-size: 4vw; font-weight: var(--font-sans-bold); line-height: 1; order: 1; } #pageMitsuboshiRecommend header.pageHeader p.intro{ margin: 0; padding: 2vw 7vw 2vw 4vw; border-left: 5px solid rgba(255,255,255,0.32); color: #FFF; font-size: max(3.47vw,var(--font-size-min)); line-height: 1.8; order: 3; } #pageMitsuboshiRecommend header.pageHeader p.intro a{ color: #FFF; } #pageMitsuboshiRecommend header.pageHeader::after{ content: ''; width: 0; height: 0; border-top: 8.93vw solid #1C4A6D; border-left: 11.5vw solid transparent; border-right: 11.5vw solid transparent; position: absolute; bottom: -8.8vw; left: 0; right: 0; margin: 0 auto; } #pageMitsuboshiRecommend div.panelMain{ background: #F4F5F6; padding: 20vw 5.33vw 6vw; } #pageMitsuboshiRecommend div.panelMain section.search{ margin: 0 0 5vw 0; } #pageMitsuboshiRecommend div.panelMain section.search h2{ height: 8.15vw; background: #1C4A6D; font-size: 5.33vw; line-height: 7.6vw; font-weight: var(--font-sans-bold); color: #FFF; text-align: center; margin: 0 0 5vw; padding: 0; } #pageMitsuboshiRecommend div.panelMain section.search dl{ margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: flex-start; } #pageMitsuboshiRecommend div.panelMain section.search dl dt{ margin: 0 0 3vw; padding: 6vw 0 0 0; width: 18vw; background: url("../img/common/icon.map-maker.01.svg") no-repeat center top; background-size: 4vw auto; text-align: center; } #pageMitsuboshiRecommend div.panelMain section.search dl dd{ margin: 0 0 3vw; padding: 0 0 0 2vw; width: calc(100% - 18vw); border-left: 1px solid #D2D2D2; } #pageMitsuboshiRecommend div.panelMain section.search dl dd ul{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 3vw 0; } #pageMitsuboshiRecommend div.panelMain section.search dl dd ul li{ margin-left: 3vw; width: 100%; } #pageMitsuboshiRecommend div.panelMain section.search dl dd ul li select{ height: 10vw; border-radius: 5px; border: none; width: 100%; } #pageMitsuboshiRecommend div.panelMain section.area{} #pageMitsuboshiRecommend div.panelMain section.area h2{ height: 8.15vw; background: #1C4A6D; font-size: 5.33vw; line-height: 7.6vw; font-weight: var(--font-sans-bold); color: #FFF; text-align: center; margin: 0 0 5vw; padding: 0; } #pageMitsuboshiRecommend div.panelMain section.area div.list{} #pageMitsuboshiRecommend div.panelMain section.area div.list ul.menu{ list-style: none; margin: 0 0px 8vw 0; padding: 0; _position: -webkit-sticky; _position: sticky; _top: 120px; } #pageMitsuboshiRecommend div.panelMain section.area div.list ul.menu li{ border-bottom: 1px solid #DCDCDC; } _#pageMitsuboshiRecommend div.panelMain section.area div.list ul.menu li.active{ background-color: #FFF; } #pageMitsuboshiRecommend div.panelMain section.area div.list ul.menu li a{ display: block; height: 48px; line-height: 48px; padding: 0 10px; text-decoration: none; color: #000; background: url("../img/common/btn.icon.arrow.03.sp.svg") no-repeat right 3vw center; background-size: 3vw auto; } #pageMitsuboshiRecommend div.panelMain section.area div.list div.speciality{ width: 100%; } #pageMitsuboshiRecommend div.panelMain section.area div.list div.speciality h3{ font-size: 4vw; line-height: 1; font-weight: var(--font-sans-regular); border-bottom: 5px solid #DCDCDC; margin: 0 0 6vw; padding: 0 0 3vw; position: relative; } #pageMitsuboshiRecommend div.panelMain section.area div.list div.speciality h3::before{ content: ''; position: absolute; bottom: -5px; left: 0; border-bottom: 5px solid #1C4A6D; width: 20.8vw; margin: 0 auto; display: block; } #pageMitsuboshiRecommend div.panelMain section.area div.list div.speciality ol{ list-style: none; margin: 0 0 8vw 0; padding: 0; } #pageMitsuboshiRecommend div.panelMain section.area div.list div.speciality ol > li{ background: #FFF; margin: 0 0 5vw 0; padding: 5vw 4vw; } #pageMitsuboshiRecommend div.panelMain section.area div.list div.speciality ol > li h4{ font-size: 5.33vw; line-height: 1.4; font-weight: var(--font-sans-bold); margin: 0 0 4vw 0; padding: 0px 0 0px 3vw; border-left: 5px solid #1C4A6D; position: relative; } #pageMitsuboshiRecommend div.panelMain section.area div.list div.speciality ol > li ul{ list-style: none; margin: 0 0 3vw; padding: 0; } #pageMitsuboshiRecommend div.panelMain section.area div.list div.speciality ol > li ul li{ font-size: max(3.47vw,var(--font-size-min)); line-height: 1.6; margin: 0 0 3px 1.4em; text-indent: -1.4em; } #pageMitsuboshiRecommend div.panelMain section.area div.list div.speciality ol > li ul li::before{ content: '●'; margin: 0 3px 0 0; color: #85A7BF; } #pageMitsuboshiRecommend div.panelMain section.area div.list div.speciality ol > li a.more{ display: block; width: 35.73vw; height: 9.33vw; background: #FFF url("../img/common/btn.icon.arrow.01.sp.svg") no-repeat right 4vw center; background-size: 1.3vw auto; font-weight: var(--font-sans-medium); line-height: 7.5vw; text-decoration: none; text-align: center; font-size: max(3.47vw,var(--font-size-min)); color: #BF2424; border: 3px solid #BF2424; border-radius: 5vw; margin: 0 auto; } #pageMitsuboshiRecommend article a.fragment{ display: block; margin-top: -5vw; padding-top: 5vw; z-index: -1; position: relative; } } /* ------------------------------------------------------------------------------ */ @media print, screen and (min-width: 769px) { #pageMitsuboshiDetail{ padding: 107px 0 0; } #pageMitsuboshiDetail div.panelMain{ background: #F4F5F6; padding: 40px 40px; } #pageMitsuboshiDetail article{ position: relative; } #pageMitsuboshiDetail article header{ background: #FFF; padding: 38px 30px 25px; } #pageMitsuboshiDetail article header h1{ margin: 0 0px 10px; padding: 0 0 0 20px; border-left: 5px solid #1C4A6D; font-weight: var(--font-sans-bold); font-size: 30px; line-height: 1.6; display: flex; align-items: center; } #pageMitsuboshiDetail article header h1 span.category{ border: 2px solid #BF2424; font-size: 16px; line-height: 1; padding: 6px 20px; margin: 3px 0 0 35px; font-weight: normal; display: inline-block; } #pageMitsuboshiDetail article header dl.traffic{ margin: 0; padding: 0 0px 0px; display: flex; flex-wrap: wrap; } #pageMitsuboshiDetail article header dl.traffic dt{ font-size: 16px; line-height: 1.6; padding: 5px 20px 5px 0; margin: 15px 0 0 0px; color: #85A7BF; border-right: 1px solid #D2D2D2; font-weight: var(--font-sans-bold); } #pageMitsuboshiDetail article header dl.traffic dd{ font-size: 16px; line-height: 1.6; padding: 5px 0 5px 20px; margin: 15px 0px 0 0; width: calc(100% - 100px - 72px); } #pageMitsuboshiDetail article section.slideShow{ background: #FFF; padding: 0px 30px 35px; margin: 0 0 20px 0; position: relative; } #pageMitsuboshiDetail article section.slideShow ul.labels{ list-style: none; margin: 0; padding: 0; position: absolute; right: 50px; bottom: 170px; display: flex; gap: 0 15px; z-index: 10; } #pageMitsuboshiDetail article section.slideShow ul.labels li span{ width: 100px; height: 100px; display: block; text-indent: 100%; overflow: hidden; white-space: nowrap; } #pageMitsuboshiDetail article section.slideShow ul.labels li span.kumiai{ background: url("../img/mitsuboshi/search/label.kumiai.png") no-repeat center center; background-size: 100% auto; } #pageMitsuboshiDetail article section.slideShow ul.labels li span.star.y2021.star1{ background: url("../img/mitsuboshi/search/label.star.2021.1.png") no-repeat center center; background-size: 100% auto; } #pageMitsuboshiDetail article section.slideShow ul.labels li span.star.y2021.star2{ background: url("../img/mitsuboshi/search/label.star.2021.2.png") no-repeat center center; background-size: 100% auto; } #pageMitsuboshiDetail article section.slideShow ul.labels li span.star.y2021.star3{ background: url("../img/mitsuboshi/search/label.star.2021.3.png") no-repeat center center; background-size: 100% auto; } #pageMitsuboshiDetail article section.slideShow ul.labels li span.star.y2022.star1{ background: url("../img/mitsuboshi/search/label.star.2022.1.png") no-repeat center center; background-size: 100% auto; } #pageMitsuboshiDetail article section.slideShow ul.labels li span.star.y2022.star2{ background: url("../img/mitsuboshi/search/label.star.2022.2.png") no-repeat center center; background-size: 100% auto; } #pageMitsuboshiDetail article section.slideShow ul.labels li span.star.y2022.star3{ background: url("../img/mitsuboshi/search/label.star.2022.3.png") no-repeat center center; background-size: 100% auto; } #pageMitsuboshiDetail article section.slideShow ul.labels li span.star.y2023.star1{ background: url("../img/mitsuboshi/search/label.star.2023.1.png") no-repeat center center; background-size: 100% auto; } #pageMitsuboshiDetail article section.slideShow ul.labels li span.star.y2023.star2{ background: url("../img/mitsuboshi/search/label.star.2023.2.png") no-repeat center center; background-size: 100% auto; } #pageMitsuboshiDetail article section.slideShow ul.labels li span.star.y2023.star3{ background: url("../img/mitsuboshi/search/label.star.2023.3.png") no-repeat center center; background-size: 100% auto; } #pageMitsuboshiDetail article section.slideShow div.slide{ position: relative; } #pageMitsuboshiDetail article section.slideShow div.slide div.inner{ overflow: hidden; } #pageMitsuboshiDetail article section.slideShow div.slide span.btnPrev, #pageMitsuboshiDetail article section.slideShow div.slide span.btnNext{ text-indent: 100%; overflow: hidden; display: block; cursor: pointer; white-space: nowrap; box-shadow: 0px 3px 6px rgba(0,0,0,0.16); border: none; padding: 0; position: absolute; top: 0; bottom: 0; margin: auto 0; width: 35px; height: 50px; z-index: 30; } #pageMitsuboshiDetail article section.slideShow div.slide span.btnPrev{ background: #FFF url("../img/common/btn.icon.arrow.left.slide.svg") no-repeat center center; left: -17px; } #pageMitsuboshiDetail article section.slideShow div.slide span.btnNext{ background: #FFF url("../img/common/btn.icon.arrow.right.slide.svg") no-repeat center center; right: -17px; } #pageMitsuboshiDetail article section.slideShow div.slide span.swiper-pagination{ display: block; bottom: 10px; color: #FFF; } #pageMitsuboshiDetail article section.slideShow div.slide span.swiper-pagination span.swiper-pagination-bullet-active{ background: #000; } _#pageMitsuboshiDetail article section.slideShow div.slide span.swiper-pagination-fraction{ display: block; bottom: 150px; color: #FFF; } #pageMitsuboshiDetail article section.slideShow div.slide ul.swiper-wrapper{ margin: 0 0 0px 0; padding: 0; list-style: none; } #pageMitsuboshiDetail article section.slideShow div.slide ul.swiper-wrapper li{ width: 100%; height: 537.75px; overflow: hidden; margin: 0; } #pageMitsuboshiDetail article section.slideShow div.slide ul.swiper-wrapper li img{ width: 100%; height: 100%; display: block; object-fit: cover; } #pageMitsuboshiDetail article section.slideShow div.thumb{ overflow: hidden; } #pageMitsuboshiDetail article section.slideShow div.thumb ul.swiper-wrapper{ margin: 20px 0 0; padding: 0; list-style: none; display: flex; } #pageMitsuboshiDetail article section.slideShow div.thumb ul.swiper-wrapper li{ _width: 18%; height: 100px; _margin: 0 0 0 2%; } #pageMitsuboshiDetail article section.slideShow div.thumb ul.swiper-wrapper li img{ width: 100%; height: 100%; display: block; object-fit: cover; cursor: pointer; opacity: 0.6; } #pageMitsuboshiDetail article section.slideShow div.thumb ul.swiper-wrapper li.swiper-slide-thumb-active img{ opacity: 1; } #pageMitsuboshiDetail article nav.localNavi{ margin: 0; padding: 13px 30px 20px; height: 108px; } #pageMitsuboshiDetail article nav.localNavi.sticky{ position: -webkit-sticky; position: sticky; top: 110px !important; z-index: 100; } #pageMitsuboshiDetail article nav.localNavi ul{ list-style: none; margin: 0; padding: 0; display: flex; gap: 1.8%; } #pageMitsuboshiDetail article nav.localNavi ul li{ width: 18.5%; } #pageMitsuboshiDetail article nav.localNavi ul li a{ display: flex; align-items: center; justify-content: center; padding: 0 40px 0 0; font-weight: var(--font-sans-bold); font-size: 20px; line-height: 1; border: 1px solid #BF2424; width: 100%; height: 75px; border-radius: 7px; background: #FFF url("../img/mitsuboshi/detail/icon.localnavi.arrow.svg") no-repeat right 15px center; color: #000; text-decoration: none; box-shadow: 0px 10px 10px rgba(0,0,0,0.1); } #pageMitsuboshiDetail article nav.localNavi ul li.active a{ background: #BF2424 url("../img/mitsuboshi/detail/icon.localnavi.arrow.active.svg") no-repeat right 15px center;; color: #FFF; } _#pageMitsuboshiDetail article a.fragment{ display: block; margin-top: -150px; padding-top: 150px; z-index: -1; position: relative; } #pageMitsuboshiDetail article section.speciality{ background: #FFF; padding: 60px 0 0 0; } #pageMitsuboshiDetail article section.speciality h2{ margin: 0 0 40px; padding: 0; background: #1C4A6D; height: 80px; color: #FFF; text-align: center; display: flex; justify-content: center; align-items: center; font-weight: var(--font-sans-bold); font-size: 28px; } #pageMitsuboshiDetail article.star section.speciality div.rating{ display: table; margin: 0 auto 30px; padding: 0 0 10px 0; border-bottom: 5px solid #1C4A6D; font-size: 24px; line-height: 1; color: #85A7BF; font-weight: var(--font-sans-bold); } #pageMitsuboshiDetail article.star section.speciality div.rating span.star{ width: 163px; height: 53px; display: inline-block; margin: 0 5px 0 30px; vertical-align: middle; } #pageMitsuboshiDetail article.star section.speciality div.rating span.rate1{ background: url("../img/mitsuboshi/detail/icon.star1.svg") no-repeat left top; } #pageMitsuboshiDetail article.star section.speciality div.rating span.rate2{ background: url("../img/mitsuboshi/detail/icon.star2.svg") no-repeat left top; } #pageMitsuboshiDetail article.star section.speciality div.rating span.rate3{ background: url("../img/mitsuboshi/detail/icon.star3.svg") no-repeat left top; } #pageMitsuboshiDetail article.star section.speciality div.rating span.text{ font-weight: var(--font-sans-regular); } #pageMitsuboshiDetail article.selection section.speciality div.rating{ display: table; margin: 60px auto 30px; padding: 0 0 17px 0; border-bottom: 5px solid #1C4A6D; font-size: 24px; line-height: 1; color: #85A7BF; font-weight: var(--font-sans-bold); } #pageMitsuboshiDetail article.selection section.speciality div.rating span.text::before{ content: ''; background: url("../img/mitsuboshi/detail/selection.rating.mitsuko.png") no-repeat; width: 67px; height: 86px; position: absolute; left: -75px; top: -37px; display: block; } #pageMitsuboshiDetail article.selection section.speciality div.rating span.text::after{ content: ''; background: url("../img/mitsuboshi/detail/selection.rating.azarashi.png") no-repeat; width: 128px; height: 108px; position: absolute; right: -115px; top: -47px; display: block; } #pageMitsuboshiDetail article.selection section.speciality div.rating span.text{ font-weight: var(--font-sans-regular); position: relative; display: inline-block; padding: 0 20px; } #pageMitsuboshiDetail article section.speciality div.youtube{ margin: 0 30px 30px; padding-top: calc(calc(100% - 60px) * 0.5625); height: 0; position: relative; } #pageMitsuboshiDetail article section.speciality div.youtube iframe{ display: block; width: 100%; height: 100%; position: absolute; top: 0; border: none; } #pageMitsuboshiDetail article section.speciality p.comment{ margin: 0; padding: 0 30px 30px; font-size: 16px; line-height: 1.9; font-weight: var(--font-sans-regular); border-bottom: 1px solid #D2D2D2; } #pageMitsuboshiDetail article section.speciality ul.speciality{ margin: 30px 0px 30px -13px; padding: 0 30px 18px; list-style: none; display: flex; flex-wrap: wrap; justify-content: flex-start; border-bottom: 1px solid #D2D2D2; } #pageMitsuboshiDetail article section.speciality ul.speciality li{ color: #FFF; margin: 0 0 13px 13px; padding: 0; position: relative; z-index: 1; font-size: 16px; line-height: 1.3; font-weight: var(--font-sans-bold); width: 90px; height: 90px; display: flex; align-items: center; justify-content: center; text-align: center; } #pageMitsuboshiDetail article section.speciality ul.speciality li::before{ content: ''; z-index: -2; position: absolute; display: block; left: 0; top: 0; width: 90px; height: 90px; background: #663E2E; } #pageMitsuboshiDetail article section.speciality ul.speciality li::after{ content: ''; z-index: -1; border: 1px solid #FFF; position: absolute; display: block; left: 3px; top: 3px; width: 82px; height: 82px; } #pageMitsuboshiDetail article section.speciality dl.info{ margin: 0; padding: 0 30px 0px; display: flex; flex-wrap: wrap; } #pageMitsuboshiDetail article section.speciality dl.info dt{ font-size: 16px; line-height: 1.5; padding: 5px 20px 5px 0; margin: 15px 0 0 0px; width: 135px; color: #85A7BF; text-align: right; border-right: 1px solid #D2D2D2; font-weight: var(--font-sans-bold); } #pageMitsuboshiDetail article section.speciality dl.info dd{ font-size: 16px; line-height: 1.5; padding: 5px 0 5px 20px; margin: 15px 0px 0 0; width: calc(100% - 100px - 72px); } #pageMitsuboshiDetail article section.speciality dl.info dd.price br{ display: none; } #pageMitsuboshiDetail article section.speciality dl.info dd.price p{ margin: 0; font-size: 16px; line-height: 1; } #pageMitsuboshiDetail article section.speciality dl.info dd.price p:first-child{ margin-bottom: 25px; } #pageMitsuboshiDetail article section.speciality dl.info dd.price p span.spacer{ display: inline-block; width: 50px; } #pageMitsuboshiDetail article section.speciality dl.info dd.price span{ font-size: 36px; font-family: "Lato"; font-weight: var(--font-lato-bold); line-height: 1; padding: 0 7px; } #pageMitsuboshiDetail article section.speciality div.image{ border-top: 1px solid #D2D2D2; margin: 30px 0 0 0; padding: 40px 0 10px 0; } #pageMitsuboshiDetail article section.speciality div.image h3{ font-size: 23px; line-height: 1; font-weight: var(--font-sans-regular); text-align: center; margin: 0 0 30px; padding: 0 0 15px; position: relative; } #pageMitsuboshiDetail article section.speciality div.image h3::before{ content: ''; position: absolute; bottom: 0; left: 0; right: 0; border-bottom: 5px solid #1C4A6D; width: 113px; margin: 0 auto; display: block; } #pageMitsuboshiDetail article section.speciality div.image ul{ list-style: none; margin: 0 0 0 -30px; padding: 0 30px; display: flex; } #pageMitsuboshiDetail article section.speciality div.image ul li{ width: 300px; margin: 0 0 0 30px; } #pageMitsuboshiDetail article section.speciality div.image ul li img{ width: 100%; height: 168.75px; margin: 0 0 10px 0; display: block; object-fit: cover; } #pageMitsuboshiDetail article section.speciality div.image ul li p.title{ font-size: 16px; line-height: 1.5; font-weight: var(--font-sans-bold); margin: 0 0 10px 0; color: #85A7BF; } #pageMitsuboshiDetail article section.speciality div.image ul li p.description{ font-size: 16px; line-height: 1.5; margin: 0; } #pageMitsuboshiDetail article section.rating{ background: #FFF; padding: 40px 0 0px 0; } #pageMitsuboshiDetail article section.rating h2{ margin: 0; padding: 0; background: #1C4A6D; height: 80px; color: #FFF; text-align: center; display: flex; justify-content: center; align-items: center; font-weight: var(--font-sans-bold); font-size: 28px; } #pageMitsuboshiDetail article section.rating div.inner{ margin: 30px 30px 0 30px; padding: 30px; border: 1px solid #BF2424; background: url("../img/mitsuboshi/detail/rating.bg.grid.svg") left top; position: relative; } #pageMitsuboshiDetail article section.rating div.inner::before{ content: ''; background: url("../img/mitsuboshi/detail/rating.ribon.svg") no-repeat; width: 19px; height: 74px; display: block; position: absolute; top: 0; left: 37px; } #pageMitsuboshiDetail article section.rating div.inner h3{ font-size: 23px; line-height: 1; font-weight: var(--font-sans-regular); text-align: center; margin: 0 0 30px; padding: 0 0 15px; position: relative; } #pageMitsuboshiDetail article section.rating div.inner h3::before{ content: ''; position: absolute; bottom: 0; left: 0; right: 0; border-bottom: 5px solid #1C4A6D; width: 113px; margin: 0 auto; display: block; } #pageMitsuboshiDetail article section.rating div.inner ul{ list-style: none; margin: 0 0 40px; padding: 0; } #pageMitsuboshiDetail article section.rating div.inner ul:last-of-type{ margin: 0; } #pageMitsuboshiDetail article section.rating div.inner ul li{ width: 544px; margin: 0 auto 10px; display: flex; align-items: center; } #pageMitsuboshiDetail article section.rating div.inner ul li span{ color: #FFF; margin: 0 15px 0 0; padding: 0; position: relative; z-index: 1; font-size: 16px; line-height: 1.3; font-weight: var(--font-sans-bold); width: 90px; min-width: 90px; height: 90px; display: flex; align-items: center; justify-content: center; text-align: center; } #pageMitsuboshiDetail article section.rating div.inner ul li span::before{ content: ''; z-index: -2; position: absolute; display: block; left: 0; top: 0; width: 90px; height: 90px; background: #663E2E; } #pageMitsuboshiDetail article section.rating div.inner ul li span::after{ content: ''; z-index: -1; border: 1px solid #FFF; position: absolute; display: block; left: 3px; top: 3px; width: 82px; height: 82px; } #pageMitsuboshiDetail article section.rating div.inner ul li p{ margin: 0; font-size: 16px; line-height: 1.6; padding: 0; } #pageMitsuboshiDetail article section.condition{ background: #FFF; padding: 40px 0 0 0; } #pageMitsuboshiDetail article section.condition h2{ margin: 0 0 40px 0; padding: 0; background: #1C4A6D; height: 80px; color: #FFF; text-align: center; display: flex; justify-content: center; align-items: center; font-weight: var(--font-sans-bold); font-size: 28px; } #pageMitsuboshiDetail article section.condition h3{ width: 130px; text-align: center; margin: 0 auto 10px; padding: 0 0 15px 0; border-bottom: 5px solid #1C4A6D; font-size: 24px; line-height: 1; font-weight: var(--font-sans-regular); } #pageMitsuboshiDetail article section.condition dl.info{ margin: 0 0 40px; padding: 0 30px 40px; display: flex; flex-wrap: wrap; border-bottom: 1px solid #D2D2D2; } #pageMitsuboshiDetail article section.condition dl.info:last-child{ border-bottom: none; margin: 0; } #pageMitsuboshiDetail article section.condition dl.info dt{ font-size: 16px; line-height: 1.5; padding: 5px 20px 5px 0; margin: 15px 0 0 0px; width: 135px; color: #85A7BF; text-align: right; border-right: 1px solid #D2D2D2; font-weight: var(--font-sans-bold); } #pageMitsuboshiDetail article section.condition dl.info dd{ font-size: 16px; line-height: 1.5; padding: 5px 0 5px 20px; margin: 15px 0px 0 0; width: calc(100% - 100px - 72px); } #pageMitsuboshiDetail article section.outline{ background: #FFF; padding: 40px 0 40px 0; } #pageMitsuboshiDetail article section.outline h2{ margin: 0 0 30px; padding: 0; background: #1C4A6D; height: 80px; color: #FFF; text-align: center; display: flex; justify-content: center; align-items: center; font-weight: var(--font-sans-bold); font-size: 28px; } #pageMitsuboshiDetail article section.outline dl.info{ margin: 0 0 40px; padding: 0 30px 0px; display: flex; flex-wrap: wrap; } #pageMitsuboshiDetail article section.outline dl.info:last-child{ border-bottom: none; margin: 0; } #pageMitsuboshiDetail article section.outline dl.info dt{ font-size: 16px; line-height: 1.5; padding: 5px 20px 5px 0; margin: 15px 0 0 0px; width: 135px; color: #85A7BF; text-align: right; border-right: 1px solid #D2D2D2; font-weight: var(--font-sans-bold); } #pageMitsuboshiDetail article section.outline dl.info dd{ font-size: 16px; line-height: 1.5; padding: 5px 0 5px 20px; margin: 15px 0px 0 0; width: calc(100% - 100px - 72px); } #pageMitsuboshiDetail article section.access{ background: #FFF; padding: 40px 0 40px 0; } #pageMitsuboshiDetail article section.access h2{ margin: 0; padding: 0; background: #1C4A6D; height: 80px; color: #FFF; text-align: center; display: flex; justify-content: center; align-items: center; font-weight: var(--font-sans-bold); font-size: 28px; } #pageMitsuboshiDetail article section.access div.map{ height: 439px; margin: 40px 30px 0; } #pageMitsuboshiDetail article section.related{ background: #FFF; padding: 35px 0 40px 0; border-top: 1px solid #D2D2D2; } #pageMitsuboshiDetail article section.related h2{ margin: 0 auto 30px; padding: 0 0 10px 0; display: table; border-bottom: 5px solid #1C4A6D; text-align: center; font-weight: var(--font-sans-regular); font-size: 23px; line-height: 1; } #pageMitsuboshiDetail article section.related ul{ list-style: none; margin: 0; padding: 0 40px; display: flex; gap: 20px } #pageMitsuboshiDetail article section.related ul li{ width: 300px; } #pageMitsuboshiDetail article section.related ul li a{ text-decoration: none; color: #000; } #pageMitsuboshiDetail article section.related ul li article{ display: flex; flex-direction: column; } #pageMitsuboshiDetail article section.related ul li img{ order: 1; max-width: 100%; max-height: 168.75px; object-fit: cover; margin: 0 auto 20px; } #pageMitsuboshiDetail article section.related ul li h3{ order: 2; font-size: 16px; line-height: 1.5; font-weight: var(--font-sans-bold); border-left: 3px solid #1C4A6D; padding: 0 0 0 10px; margin: 0 0 11px; } #pageMitsuboshiDetail article section.related ul li dl{ order: 3; } #pageMitsuboshiDetail article section.related ul li dl{ margin: 0; padding: 0; display: flex; flex-wrap: wrap; } #pageMitsuboshiDetail article section.related ul li dl dt{ font-size: 16px; line-height: 1.4; padding: 0px 10px 0px 0; margin: 0px 0 0 0px; width: 80px; color: #85A7BF; border-right: 1px solid #D2D2D2; font-weight: var(--font-sans-bold); } #pageMitsuboshiDetail article section.related ul li dl dd{ font-size: 16px; line-height: 1.4; padding: 0px 0 0px 10px; margin: 0px 0px 0 0; width: calc(100% - 80px); } #pageMitsuboshiDetail article footer{ background: #FFF; } #pageMitsuboshiDetail article footer div.link{ position: relative; display: flex; align-items: center; justify-content: center; padding: 20px 0px 21px; border-top: 1px solid #D2D2D2; } #pageMitsuboshiDetail article footer div.link a.column{ width: 450px; height: 60px; font-size: 18px; font-weight: var(--font-sans-medium); line-height: 1; position: relative; z-index: 2; border-radius: 30px; margin: 0 26px 0 30px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; background: #FFF url("../img/common/btn.icon.arrow.01.svg") no-repeat right 30px center; border: 2px solid #BF2424; color: #BF2424; } #pageMitsuboshiDetail article footer div.link a.official{ width: 450px; height: 60px; font-size: 18px; font-weight: var(--font-sans-medium); line-height: 1; position: relative; z-index: 2; border-radius: 30px; margin: 0 30px 0 30px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; background: #BF2424 url("../img/common/btn.icon.arrow.right.white.svg") no-repeat right 30px center; background-size: 6px auto; color: #FFF; } #pageMitsuboshiDetail article footer div.link::before{ content: ''; background: #D2D2D2; width: 1px; height: 60px; display: inline-block; position: absolute; z-index: 1; left: 0; right: 0; top: 20px; margin: 0 auto; } #pageMitsuboshiDetail article div.contact.sticky{ display: flex; align-items: center; background: #FFF; padding: 0; border-top: 1px solid #D2D2D2; position: -webkit-sticky; position: sticky; bottom: 0; z-index: 110; } #pageMitsuboshiDetail article div.contact.sticky a.tel{ width: 50%; height: 99px; margin: 0 0; padding: 20px 0 0 0; text-decoration: none; color: #000; } #pageMitsuboshiDetail article div.contact.sticky a.tel span.tel{ font-family: "Lato"; font-weight: var(--font-lato-bold); font-size: 36px; line-height: 1; display: table; margin: 0 auto 3px; padding: 0 0 0 40px; background: url("../img/mitsuboshi/search/icon.tel.svg") no-repeat left top 2px; } #pageMitsuboshiDetail article div.contact.sticky a.tel span.hour{ display: block; font-size: 14px; line-height: 1; text-align: center; } #pageMitsuboshiDetail article div.contact.sticky a.inquiry{ width: 50%; height: 99px; padding: 0 0 0 60px; font-size: 24px; font-weight: var(--font-sans-medium); line-height: 1; margin: 0; display: flex; align-items: center; justify-content: center; text-decoration: none; background: #DF9191 url("../img/mitsuboshi/search/btn.icon.letter.svg") no-repeat left 20% top 35px; color: #FFF; } #pageMitsuboshiDetail article p.notice{ display: block; width: 50%; text-align: center; font-size: 15px; line-height: 1; margin: 15px 0 0 0; } #pageMitsuboshiDetail a.toList{ display: block; width: 280px; height: 60px; background: #FFF url("../img/common/btn.icon.arrow.02.svg") no-repeat left 28px center; font-weight: var(--font-sans-medium); line-height: 53px; text-decoration: none; text-align: center; font-size: 18px; color: #BF2424; border: 2px solid #BF2424; border-radius: 30px; margin: 60px auto; } } @media screen and (max-width: 768px) { #pageMitsuboshiDetail{ border-top: 4vw solid #1C4A6D; } #pageMitsuboshiDetail div.panelMain{ padding: 6vw 5.33vw; } #pageMitsuboshiDetail article{ position: relative; } #pageMitsuboshiDetail article header{ background: #FFF; padding: 4vw 4vw 4vw; } #pageMitsuboshiDetail article header h1{ margin: 0 0px 10vw; padding: 0 0 0 4vw; border-left: 5px solid #1C4A6D; font-weight: var(--font-sans-bold); font-size: 5vw; line-height: 1.6; position: relative; } #pageMitsuboshiDetail article header h1 span.category{ border: 2px solid #BF2424; font-size: max(3.47vw,var(--font-size-min)); position: absolute; background: #FFF; left: -5px; bottom: -9vw; line-height: 1; padding: 1vw 3vw; margin: 3px 0 0 0; font-weight: normal; display: block; } #pageMitsuboshiDetail article header dl.traffic{ margin: 0 4vw; padding: 0 0px 0px; display: flex; flex-wrap: wrap; } #pageMitsuboshiDetail article header dl.traffic dt{ font-size: max(3.47vw,var(--font-size-min)); line-height: 1.6; padding: 0 2vw 0 0; margin: 3vw 0 0 0px; width: 18vw; color: #85A7BF; text-align: right; border-right: 1px solid #D2D2D2; font-weight: var(--font-sans-bold); } #pageMitsuboshiDetail article header dl.traffic dd{ font-size: max(3.47vw,var(--font-size-min)); line-height: 1.6; padding: 0 0 0 2vw; margin: 3vw 0px 0 0; width: calc(100% - 18vw); } #pageMitsuboshiDetail article section.slideShow{ background: #FFF; padding: 0px 4vw 5vw; margin: 0 0 3vw 0; position: relative; } #pageMitsuboshiDetail article section.slideShow ul.labels{ list-style: none; margin: 0; padding: 0; position: absolute; right: 6vw; bottom: 19vw; display: flex; gap: 0 2.5vw; z-index: 10; } #pageMitsuboshiDetail article section.slideShow ul.labels li span{ width: 13vw; height: 13vw; display: block; text-indent: 100%; overflow: hidden; white-space: nowrap; } #pageMitsuboshiDetail article section.slideShow ul.labels li span.kumiai{ background: url("../img/mitsuboshi/search/label.kumiai.png") no-repeat center center; background-size: 100% auto; } #pageMitsuboshiDetail article section.slideShow ul.labels li span.star.y2021.star1{ background: url("../img/mitsuboshi/search/label.star.2021.1.png") no-repeat center center; background-size: 100% auto; } #pageMitsuboshiDetail article section.slideShow ul.labels li span.star.y2021.star2{ background: url("../img/mitsuboshi/search/label.star.2021.2.png") no-repeat center center; background-size: 100% auto; } #pageMitsuboshiDetail article section.slideShow ul.labels li span.star.y2021.star3{ background: url("../img/mitsuboshi/search/label.star.2021.3.png") no-repeat center center; background-size: 100% auto; } #pageMitsuboshiDetail article section.slideShow ul.labels li span.star.y2022.star1{ background: url("../img/mitsuboshi/search/label.star.2022.1.png") no-repeat center center; background-size: 100% auto; } #pageMitsuboshiDetail article section.slideShow ul.labels li span.star.y2022.star2{ background: url("../img/mitsuboshi/search/label.star.2022.2.png") no-repeat center center; background-size: 100% auto; } #pageMitsuboshiDetail article section.slideShow ul.labels li span.star.y2022.star3{ background: url("../img/mitsuboshi/search/label.star.2022.3.png") no-repeat center center; background-size: 100% auto; } #pageMitsuboshiDetail article section.slideShow ul.labels li span.star.y2023.star1{ background: url("../img/mitsuboshi/search/label.star.2023.1.png") no-repeat center center; background-size: 100% auto; } #pageMitsuboshiDetail article section.slideShow ul.labels li span.star.y2023.star2{ background: url("../img/mitsuboshi/search/label.star.2023.2.png") no-repeat center center; background-size: 100% auto; } #pageMitsuboshiDetail article section.slideShow ul.labels li span.star.y2023.star3{ background: url("../img/mitsuboshi/search/label.star.2023.3.png") no-repeat center center; background-size: 100% auto; } #pageMitsuboshiDetail article section.slideShow div.slide{ position: relative; } #pageMitsuboshiDetail article section.slideShow div.slide div.inner{ overflow: hidden; } #pageMitsuboshiDetail article section.slideShow div.slide span.btnPrev, #pageMitsuboshiDetail article section.slideShow div.slide span.btnNext{ text-indent: 100%; overflow: hidden; display: block; cursor: pointer; white-space: nowrap; box-shadow: 0px 3px 6px rgba(0,0,0,0.16); border: none; padding: 0; position: absolute; top: 0; bottom: 0; margin: auto 0; width: 35px; height: 50px; z-index: 30; } #pageMitsuboshiDetail article section.slideShow div.slide span.btnPrev{ background: #FFF url("../img/common/btn.icon.arrow.left.slide.svg") no-repeat center center; left: -17px; } #pageMitsuboshiDetail article section.slideShow div.slide span.btnNext{ background: #FFF url("../img/common/btn.icon.arrow.right.slide.svg") no-repeat center center; right: -17px; } #pageMitsuboshiDetail article section.slideShow div.slide span.swiper-pagination{ display: block; bottom: 10px; color: #FFF; } #pageMitsuboshiDetail article section.slideShow div.slide span.swiper-pagination span.swiper-pagination-bullet-active{ background: #000; } _#pageMitsuboshiDetail article section.slideShow div.slide span.swiper-pagination-fraction{ display: block; bottom: 150px; color: #FFF; } #pageMitsuboshiDetail article section.slideShow div.slide ul.swiper-wrapper{ margin: 0 0 0px 0; padding: 0; list-style: none; } #pageMitsuboshiDetail article section.slideShow div.slide ul.swiper-wrapper li{ width: 100%; height: 56.25vw; overflow: hidden; margin: 0; } #pageMitsuboshiDetail article section.slideShow div.slide ul.swiper-wrapper li img{ width: 100%; height: 100%; display: block; object-fit: cover; } #pageMitsuboshiDetail article section.slideShow div.thumb{ overflow: hidden; } #pageMitsuboshiDetail article section.slideShow div.thumb ul.swiper-wrapper{ margin: 2vw 0 0; padding: 0; list-style: none; display: flex; } #pageMitsuboshiDetail article section.slideShow div.thumb ul.swiper-wrapper li{ height: 10vw; } #pageMitsuboshiDetail article section.slideShow div.thumb ul.swiper-wrapper li img{ width: 100%; height: 100%; display: block; object-fit: cover; cursor: pointer; opacity: 0.6; } #pageMitsuboshiDetail article section.slideShow div.thumb ul.swiper-wrapper li.swiper-slide-thumb-active img{ opacity: 1; } #pageMitsuboshiDetail article nav.localNavi{ margin: 0; padding: 3vw 0 5vw; height: 22.53vw; } #pageMitsuboshiDetail article nav.localNavi.sticky{ position: -webkit-sticky; position: sticky; top: 22.53vw; z-index: 100; } #pageMitsuboshiDetail article nav.localNavi ul{ list-style: none; margin: 0; padding: 0; display: flex; gap: 1.8%; } #pageMitsuboshiDetail article nav.localNavi ul li{ width: 18.5%; } #pageMitsuboshiDetail article nav.localNavi ul li a{ display: flex; align-items: center; justify-content: center; padding: 0 0vw 3vw; text-align: center; font-weight: var(--font-sans-bold); font-size: 3.7vw; line-height: 1.1; border: 1px solid #BF2424; width: 100%; height: 13.87vw; border-radius: 7px; background: #FFF url("../img/mitsuboshi/detail/icon.localnavi.arrow.svg") no-repeat center bottom 1.3vw; color: #000; text-decoration: none; box-shadow: 0px 10px 10px rgba(0,0,0,0.1); } #pageMitsuboshiDetail article nav.localNavi ul li.active a{ background: #BF2424 url("../img/mitsuboshi/detail/icon.localnavi.arrow.active.svg") no-repeat center bottom 1.3vw; color: #FFF; } #pageMitsuboshiDetail article a.fragment{ display: block; margin-top: -10vw; padding-top: 10vw; z-index: -1; position: relative; } #pageMitsuboshiDetail article section.speciality{ background: #FFF; padding: 8vw 0 0 0; } #pageMitsuboshiDetail article section.speciality h2{ margin: 0 0 5vw; padding: 0; background: #1C4A6D; height: 13.33vw; color: #FFF; text-align: center; display: flex; justify-content: center; align-items: center; font-weight: var(--font-sans-bold); font-size: 4.8vw; } #pageMitsuboshiDetail article.star section.speciality div.rating{ display: table; margin: 0 auto 5vw; padding: 0 0 2vw 0; border-bottom: 5px solid #1C4A6D; font-size: 4vw; line-height: 1; color: #85A7BF; font-weight: var(--font-sans-bold); } #pageMitsuboshiDetail article.star section.speciality div.rating span.star{ width: 28vw; height: 7.5vw; display: inline-block; margin: 0 5px 0 4vw; vertical-align: middle; } #pageMitsuboshiDetail article.star section.speciality div.rating span.rate1{ background: url("../img/mitsuboshi/detail/icon.star1.svg") no-repeat left center; background-size: 28vw auto; } #pageMitsuboshiDetail article.star section.speciality div.rating span.rate2{ background: url("../img/mitsuboshi/detail/icon.star2.svg") no-repeat left center; background-size: 28vw auto; } #pageMitsuboshiDetail article.star section.speciality div.rating span.rate3{ background: url("../img/mitsuboshi/detail/icon.star3.svg") no-repeat left center; background-size: 28vw auto; } #pageMitsuboshiDetail article.star section.speciality div.rating span.text{ font-weight: var(--font-sans-regular); } #pageMitsuboshiDetail article.selection section.speciality div.rating{ display: table; margin: 12vw auto 5vw; padding: 0 0 3vw 0; border-bottom: 5px solid #1C4A6D; font-size: 4vw; line-height: 1; color: #85A7BF; font-weight: var(--font-sans-bold); } #pageMitsuboshiDetail article.selection section.speciality div.rating span.text::before{ content: ''; background: url("../img/mitsuboshi/detail/selection.rating.mitsuko.sp.png") no-repeat; background-size: 100% auto; width: 15vw; height: 19.25vw; position: absolute; left: -15vw; top: -10vw; display: block; } #pageMitsuboshiDetail article.selection section.speciality div.rating span.text::after{ content: ''; background: url("../img/mitsuboshi/detail/selection.rating.azarashi.sp.png") no-repeat; background-size: 100% auto; width: 27vw; height: 22.78vw; position: absolute; right: -24vw; top: -10vw; display: block; } #pageMitsuboshiDetail article.selection section.speciality div.rating span.text{ font-weight: var(--font-sans-regular); position: relative; display: inline-block; padding: 0 3vw; } #pageMitsuboshiDetail article section.speciality div.youtube{ margin: 0 auto 5vw; } #pageMitsuboshiDetail article section.speciality div.youtube iframe{ display: block; width: 82vw; height: calc(82vw * 0.5625); margin: 0 auto; border: 0; } #pageMitsuboshiDetail article section.speciality p.comment{ margin: 0; padding: 0 4vw 4vw; font-size: max(3.47vw,var(--font-size-min)); line-height: 1.7; font-weight: var(--font-sans-regular); border-bottom: 1px solid #D2D2D2; } #pageMitsuboshiDetail article section.speciality ul.speciality{ margin: 3vw 0; padding: 0 4vw 3vw; list-style: none; display: flex; flex-wrap: wrap; justify-content: flex-start; border-bottom: 1px solid #D2D2D2; gap: 1.1vw; } #pageMitsuboshiDetail article section.speciality ul.speciality li{ color: #FFF; margin: 0; padding: 0; position: relative; z-index: 1; font-size: max(3.47vw,var(--font-size-min)); line-height: 1.2; font-weight: var(--font-sans-bold); width: 19.5vw; height: 19.5vw; display: flex; align-items: center; justify-content: center; text-align: center; } #pageMitsuboshiDetail article section.speciality ul.speciality li::before{ content: ''; z-index: -2; position: absolute; display: block; left: 0; top: 0; width: 19.5vw; height: 19.5vw; background: #663E2E; } #pageMitsuboshiDetail article section.speciality ul.speciality li::after{ content: ''; z-index: -1; border: 1px solid #FFF; position: absolute; display: block; left: 3px; top: 3px; width: calc(19.5vw - 8px); height: calc(19.5vw - 8px); } #pageMitsuboshiDetail article section.speciality dl.info{ margin: 0; padding: 0 4vw 0px; display: flex; flex-wrap: wrap; } #pageMitsuboshiDetail article section.speciality dl.info dt{ font-size: max(3.47vw,var(--font-size-min)); line-height: 1.5; padding: 0px 2vw 0px 0; margin: 3vw 0 0 0px; width: 18vw; color: #85A7BF; text-align: right; border-right: 1px solid #D2D2D2; font-weight: var(--font-sans-bold); } #pageMitsuboshiDetail article section.speciality dl.info dd{ font-size: max(3.47vw,var(--font-size-min)); line-height: 1.5; padding: 0px 0 0px 2vw; margin: 3vw 0px 0 0; width: calc(100% - 18vw); } #pageMitsuboshiDetail article section.speciality dl.info dd.price br{ display: none; } #pageMitsuboshiDetail article section.speciality dl.info dd.price p{ margin: 0; font-size: max(3.47vw,var(--font-size-min)); line-height: 1.5; } #pageMitsuboshiDetail article section.speciality dl.info dd.price p:first-child{ margin-bottom: 2vw; } #pageMitsuboshiDetail article section.speciality dl.info dd.price p span.spacer{ display: block; } #pageMitsuboshiDetail article section.speciality dl.info dd.price span{ font-size: 6.67vw; font-family: "Lato"; font-weight: var(--font-lato-bold); line-height: 1; padding: 0 1vw; } #pageMitsuboshiDetail article section.speciality div.image{ border-top: 1px solid #D2D2D2; margin: 5vw 0 0 0; padding: 5vw 0 2vw 0; position: relative; } #pageMitsuboshiDetail article section.speciality div.image h3{ font-size: 4vw; line-height: 1; font-weight: var(--font-sans-regular); text-align: center; margin: 0 0 6vw; padding: 0 0 3vw; position: relative; } #pageMitsuboshiDetail article section.speciality div.image h3::before{ content: ''; position: absolute; bottom: 0; left: 0; right: 0; border-bottom: 5px solid #1C4A6D; width: 20.8vw; margin: 0 auto; display: block; } #pageMitsuboshiDetail article section.speciality div.image div.tns-controls{ z-index: 10; position: relative; } #pageMitsuboshiDetail article section.speciality div.image div.tns-controls button:nth-of-type(1){ background: url("../img/siteTop/box05.slide.ctrl.prev.sp.svg") no-repeat; background-size: 100% auto; position: absolute; top: -12vw; right: 15vw; width: 10.8vw; height: 10.8vw; border: none; overflow: hidden; white-space: nowrap; text-indent: 100%; padding: 0; margin: 0; } #pageMitsuboshiDetail article section.speciality div.image div.tns-controls button:nth-of-type(2){ background: url("../img/siteTop/box05.slide.ctrl.next.sp.svg") no-repeat; background-size: 100% auto; position: absolute; top: -12vw; right: 4vw; width: 10.8vw; height: 10.8vw; border: none; overflow: hidden; white-space: nowrap; text-indent: 100%; padding: 0; margin: 0; } #pageMitsuboshiDetail article section.speciality div.image ul{ list-style: none; margin: 0 0 0 4vw; padding: 0 0 0 0; display: flex; } #pageMitsuboshiDetail article section.speciality div.image ul li{ margin: 0 4vw 0 0; } #pageMitsuboshiDetail article section.speciality div.image ul li img{ width: 100%; height: 32vw; margin: 0 0 2vw 0; display: block; object-fit: cover; } #pageMitsuboshiDetail article section.speciality div.image ul li p.title{ font-size: max(3.47vw,var(--font-size-min)); line-height: 1.5; font-weight: var(--font-sans-bold); margin: 0 0 2vw 0; color: #85A7BF; } #pageMitsuboshiDetail article section.speciality div.image ul li p.description{ font-size: max(3.47vw,var(--font-size-min)); line-height: 1.5; margin: 0; } #pageMitsuboshiDetail article section.rating{ background: #FFF; padding: 5vw 0 0 0; } #pageMitsuboshiDetail article section.rating h2{ margin: 0 0 5vw; padding: 0; background: #1C4A6D; height: 13.33vw; color: #FFF; text-align: center; display: flex; justify-content: center; align-items: center; font-weight: var(--font-sans-bold); font-size: 4.8vw; } #pageMitsuboshiDetail article section.rating div.inner{ margin: 4vw 4vw 0 4vw; padding: 8vw 4.5vw 4vw; border: 1px solid #BF2424; background: url("../img/mitsuboshi/detail/rating.bg.grid.svg") left top; position: relative; } #pageMitsuboshiDetail article section.rating div.inner::before{ content: ''; background: url("../img/mitsuboshi/detail/rating.ribon.svg") no-repeat; background-size: 100% auto; width: 3.33vw; height: 13.5vw; display: block; position: absolute; top: 0; left: 3vw; } #pageMitsuboshiDetail article section.rating div.inner h3{ font-size: 4vw; line-height: 1; font-weight: var(--font-sans-regular); text-align: center; margin: 0 0 4vw; padding: 0 0 3vw; position: relative; } #pageMitsuboshiDetail article section.rating div.inner h3::before{ content: ''; position: absolute; bottom: 0; left: 0; right: 0; border-bottom: 5px solid #1C4A6D; width: 27.87vw; margin: 0 auto; display: block; } #pageMitsuboshiDetail article section.rating div.inner ul{ list-style: none; margin: 0 0 8vw; padding: 0; } #pageMitsuboshiDetail article section.rating div.inner ul:last-of-type{ margin: 0; } #pageMitsuboshiDetail article section.rating div.inner ul li{ margin: 0 0 5vw; } #pageMitsuboshiDetail article section.rating div.inner ul span{ color: #FFF; margin: 0 auto 2vw; padding: 0; position: relative; z-index: 1; font-size: max(3.47vw,var(--font-size-min)); line-height: 1.2; font-weight: var(--font-sans-bold); min-width: 20vw; width: 20vw; height: 20vw; display: flex; align-items: center; justify-content: center; text-align: center; } #pageMitsuboshiDetail article section.rating div.inner ul span::before{ content: ''; z-index: -2; position: absolute; display: block; left: 0; top: 0; width: 20vw; height: 20vw; background: #663E2E; } #pageMitsuboshiDetail article section.rating div.inner ul span::after{ content: ''; z-index: -1; border: 1px solid #FFF; position: absolute; display: block; left: 3px; top: 3px; width: calc(20vw - 8px); height: calc(20vw - 8px); } #pageMitsuboshiDetail article section.rating div.inner ul li p{ margin: 0; font-size: max(3.47vw,var(--font-size-min)); line-height: 1.6; padding: 0; } #pageMitsuboshiDetail article section.condition{ background: #FFF; padding: 5vw 0 0 0; } #pageMitsuboshiDetail article section.condition h2{ margin: 0 0 5vw; padding: 0; background: #1C4A6D; height: 13.33vw; color: #FFF; text-align: center; display: flex; justify-content: center; align-items: center; font-weight: var(--font-sans-bold); font-size: 4.8vw; } #pageMitsuboshiDetail article section.condition h3{ width: 20.8vw; text-align: center; margin: 0 auto 1vw; padding: 0 0 3vw 0; border-bottom: 5px solid #1C4A6D; font-size: 4vw; line-height: 1; font-weight: var(--font-sans-regular); } #pageMitsuboshiDetail article section.condition dl.info{ margin: 0 0 5vw; padding: 0 4vw 8vw; display: flex; flex-wrap: wrap; border-bottom: 1px solid #D2D2D2; } #pageMitsuboshiDetail article section.condition dl.info:last-child{ border-bottom: none; margin: 0; } #pageMitsuboshiDetail article section.condition dl.info dt{ font-size: max(3.47vw,var(--font-size-min)); line-height: 1.5; padding: 1vw 2vw 1vw 0; margin: 3vw 0 0 0; width: 18vw; color: #85A7BF; text-align: right; border-right: 1px solid #D2D2D2; font-weight: var(--font-sans-bold); } #pageMitsuboshiDetail article section.condition dl.info dd{ font-size: max(3.47vw,var(--font-size-min)); line-height: 1.5; padding: 1vw 0 1vw 2vw; margin: 3vw 0 0 0; width: calc(100% - 18vw); } #pageMitsuboshiDetail article section.outline{ background: #FFF; padding: 5vw 0 0 0; } #pageMitsuboshiDetail article section.outline h2{ margin: 0 0 5vw; padding: 0; background: #1C4A6D; height: 13.33vw; color: #FFF; text-align: center; display: flex; justify-content: center; align-items: center; font-weight: var(--font-sans-bold); font-size: 4.8vw; } #pageMitsuboshiDetail article section.outline dl.info{ margin: 0 0 5vw; padding: 0 4vw 0px; display: flex; flex-wrap: wrap; } #pageMitsuboshiDetail article section.outline dl.info:last-child{ border-bottom: none; margin: 0; } #pageMitsuboshiDetail article section.outline dl.info dt{ font-size: max(3.47vw,var(--font-size-min)); line-height: 1.5; padding: 1vw 2vw 1vw 0; margin: 3vw 0 0 0px; width: 18vw; color: #85A7BF; text-align: right; border-right: 1px solid #D2D2D2; font-weight: var(--font-sans-bold); } #pageMitsuboshiDetail article section.outline dl.info dd{ font-size: max(3.47vw,var(--font-size-min)); line-height: 1.5; padding: 1vw 0 1vw 2vw; margin: 3vw 0 0 0; width: calc(100% - 18vw); } #pageMitsuboshiDetail article section.access{ background: #FFF; padding: 5vw 0 0 0; } #pageMitsuboshiDetail article section.access h2{ margin: 0 0 5vw; padding: 0; background: #1C4A6D; height: 13.33vw; color: #FFF; text-align: center; display: flex; justify-content: center; align-items: center; font-weight: var(--font-sans-bold); font-size: 4.8vw; } #pageMitsuboshiDetail article section.access div.map{ height: 46.67vw; margin: 4vw 4vw 0; } #pageMitsuboshiDetail article section.related{ background: #FFF; padding: 5vw 0 8vw 0; border-top: 1px solid #D2D2D2; position: relative; } #pageMitsuboshiDetail article section.related h2{ width: 48vw; text-align: center; margin: 0 auto 15vw; padding: 0 0 3vw 0; border-bottom: 5px solid #1C4A6D; font-size: 4vw; line-height: 1; font-weight: var(--font-sans-regular); } #pageMitsuboshiDetail article section.related div.tns-controls{ z-index: 10; position: relative; } #pageMitsuboshiDetail article section.related div.tns-controls button:nth-of-type(1){ background: url("../img/siteTop/box05.slide.ctrl.prev.sp.svg") no-repeat; background-size: 100% auto; position: absolute; top: -12vw; right: 15vw; width: 10.8vw; height: 10.8vw; border: none; overflow: hidden; white-space: nowrap; text-indent: 100%; padding: 0; margin: 0; } #pageMitsuboshiDetail article section.related div.tns-controls button:nth-of-type(2){ background: url("../img/siteTop/box05.slide.ctrl.next.sp.svg") no-repeat; background-size: 100% auto; position: absolute; top: -12vw; right: 4vw; width: 10.8vw; height: 10.8vw; border: none; overflow: hidden; white-space: nowrap; text-indent: 100%; padding: 0; margin: 0; } #pageMitsuboshiDetail article section.related ul{ list-style: none; margin: 0 0 0 4vw; padding: 0; display: flex; } #pageMitsuboshiDetail article section.related ul li{ margin: 0 4vw 0 0; } #pageMitsuboshiDetail article section.related ul li a{ text-decoration: none; color: #000; } #pageMitsuboshiDetail article section.related ul li article{ display: flex; flex-direction: column; } #pageMitsuboshiDetail article section.related ul li img{ order: 1; width: 100%; height: 32vw; display: block; object-fit: cover; margin: 0 0 2vw 0; } #pageMitsuboshiDetail article section.related ul li h3{ order: 2; font-size: max(3.47vw,var(--font-size-min)); line-height: 1.5; font-weight: var(--font-sans-bold); border-left: 3px solid #1C4A6D; padding: 0 0 0 2vw; margin: 0 0 2vw; } #pageMitsuboshiDetail article section.related ul li dl{ order: 3; } #pageMitsuboshiDetail article section.related ul li dl{ margin: 0; padding: 0; display: flex; flex-wrap: wrap; } #pageMitsuboshiDetail article section.related ul li dl dt{ font-size: max(3.47vw,var(--font-size-min)); line-height: 1.4; padding: 0px 2vw 0px 0; margin: 0px 0 0 0px; width: 17vw; color: #85A7BF; text-align: right; border-right: 1px solid #D2D2D2; font-weight: var(--font-sans-bold); } #pageMitsuboshiDetail article section.related ul li dl dd{ font-size: max(3.47vw,var(--font-size-min)); line-height: 1.4; padding: 0px 0 0px 2vw; margin: 0px 0px 0 0; width: calc(100% - 17vw); } #pageMitsuboshiDetail article footer{ background: #FFF; } #pageMitsuboshiDetail article footer div.link{ position: relative; display: flex; justify-content: center; align-items: center; padding: 3vw 2vw; border-top: 1px solid #D2D2D2; } #pageMitsuboshiDetail article footer div.link a.column{ width: 50%; height: 12.01vw; font-size: max(3.47vw,var(--font-size-min)); font-weight: var(--font-sans-medium); line-height: 1; border-radius: 6.5vw; margin: 0 2vw 0 2vw; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; background: url("../img/common/btn.icon.arrow.01.sp.svg") no-repeat right 3vw center; background-size: 1.5vw auto; border: 2px solid #BF2424; color: #BF2424; padding: 0 2vw 0 0; } #pageMitsuboshiDetail article footer div.link a.official{ width: 50%; height: 12.01vw; font-size: max(3.47vw,var(--font-size-min)); font-weight: var(--font-sans-medium); line-height: 1; border-radius: 6.5vw; margin: 0 2vw 0 2vw; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; background: #BF2424 url("../img/common/btn.icon.arrow.right.white.sp.svg") no-repeat right 3vw center; background-size: 1.5vw auto; color: #FFF; padding: 0 2vw 0 0; } #pageMitsuboshiDetail article div.contact.sticky{ display: flex; align-items: center; padding: 0; border-top: 1px solid #D2D2D2; background: #FFF; position: -webkit-sticky; position: sticky; bottom: 0; z-index: 110; } #pageMitsuboshiDetail article div.contact.sticky a.tel{ width: 50%; height: 17.74vw; margin: 0 0; padding: 3.5vw 0 0 0; text-decoration: none; color: #000; } #pageMitsuboshiDetail article div.contact.sticky a.tel span.tel{ display: table; font-family: "Lato"; font-weight: var(--font-lato-bold); font-size: 5.33vw; line-height: 1; margin: 0 auto 1vw; padding: 0 0 0 5vw; background: url("../img/mitsuboshi/search/icon.tel.svg") no-repeat left top 0.3vw; background-size: 4.27vw auto; } #pageMitsuboshiDetail article div.contact.sticky a.tel span.hour{ display: block; text-align: center; font-size: max(3.47vw,var(--font-size-min)); line-height: 1; } #pageMitsuboshiDetail article div.contact.sticky a.inquiry{ width: 50%; height: 17.74vw; padding: 0 0 0 6vw; text-align: center; font-size: max(3.47vw,var(--font-size-min)); font-weight: var(--font-sans-medium); line-height: 1.4; margin: 0; display: flex; align-items: center; justify-content: center; text-decoration: none; background: #DF9191 url("../img/mitsuboshi/search/btn.icon.letter.svg") no-repeat left 7vw center; background-size: 5vw auto; color: #FFF; } #pageMitsuboshiDetail article p.notice{ display: block; font-size: max(3.27vw,var(--font-size-min)); line-height: 1.4; margin: 2vw 0 0 1em; text-indent: -1em; } #pageMitsuboshiDetail a.toList{ display: flex; width: 58.67vw; height: 12vw; background: #FFF url("../img/common/btn.icon.arrow.02.sp.svg") no-repeat left 6vw center; background-size: 2vw auto; font-weight: var(--font-sans-medium); line-height: 1; justify-content: center; align-items: center; text-decoration: none; text-align: center; font-size: max(3.47vw,var(--font-size-min)); color: #BF2424; border: 2px solid #BF2424; border-radius: 6vw; margin: 10vw auto 5vw; } } /* ------------------------------------------------------------------------------ */ @media print, screen and (min-width: 769px) { #pageMitsuboshiSearch{} #pageMitsuboshiSearch header.pageHeader{ height: 360px; background: url("../img/mitsuboshi/search/header.bg.jpg?") no-repeat; padding: 110px 0 0 0px; } #pageMitsuboshiSearch header.pageHeader .title{ margin: 0; padding: 25px 0 15px 0; color: #FFF; font-size: 50px; line-height: 1.3; font-weight: var(--font-sans-bold); display: block; text-align: center; } #pageMitsuboshiSearch header.pageHeader .title::before{ content: ''; background: url("../img/mitsuboshi/search/header.star.png") no-repeat; width: 169px; height: 41px; margin: 0 auto 7px; display: block; } #pageMitsuboshiSearch ._h2{ font-size: 30px; line-height: 1.4; font-weight: var(--font-sans-black); margin: 0 0 60px 0; padding: 5px 0 5px 23px; border-left: 5px solid #1C4A6D; position: relative; } #pageMitsuboshiSearch ._h2 span{ border-bottom: 5px solid #BF2424; margin-bottom: 5px; display: inline-block; } #pageMitsuboshiSearch div.panelMain{ background: #F4F5F6; padding: 45px 40px 65px 40px; } #pageMitsuboshiSearch section.search{} #pageMitsuboshiSearch section.search p.guide{ margin: -30px 0 40px; } #pageMitsuboshiSearch section.search p.guide a{ display: block; margin: 0 auto; background: url("../img/mitsuboshi/search/banner.about-select.png?") no-repeat; width: 759px; height: 129px; text-indent: 100%; overflow: hidden; white-space: nowrap; } #pageMitsuboshiSearch section.search a.btnArea{ width: 210px; height: 40px; font-size: 16px; font-weight: var(--font-sans-medium); line-height: 1; border-radius: 20px; margin: 0 0 0 0; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; background: #FFF url("../img/common/btn.icon.arrow.01.svg") no-repeat right 20px center; border: 2px solid #BF2424; color: #BF2424; } #pageMitsuboshiSearch section.search dl.condList{ display: flex; margin: 0 0 20px 0; padding: 0; align-items: stretch; flex-wrap: wrap; } #pageMitsuboshiSearch section.search dl.condList dt{ order: 1; margin: 0 35px 25px 0; padding: 0 0 0 35px; font-size: 16px; line-height: 1.7; width: 150px; min-height: 50px; border-right: 1px solid #D2D2D2; font-weight: var(--font-sans-bold); } #pageMitsuboshiSearch section.search dl.condList dd.star{ display: flex; flex-wrap: wrap; } #pageMitsuboshiSearch section.search dl.condList dd.star label{ margin: 0 15px 20px 0; } #pageMitsuboshiSearch section.search dl.condList dt.area{ background: url("../img/common/icon.map-maker.01.svg") no-repeat left top 5px; } #pageMitsuboshiSearch section.search dl.condList dt.careWork{ background: url("../img/common/icon.wheelchair.01.svg") no-repeat left top 5px; } #pageMitsuboshiSearch section.search dl.condList dt.year{ width: 70px; padding: 0 0 0 20px; } #pageMitsuboshiSearch section.search dl.condList dt.iniFee{ background: url("../img/mitsuboshi/search/icon.money.initial.svg") no-repeat left 3px top; } #pageMitsuboshiSearch section.search dl.condList dt.mlFee{ background: url("../img/mitsuboshi/search/icon.money.monthly.svg") no-repeat left 8px top; } #pageMitsuboshiSearch section.search dl.condList dd.speciality{ display: flex; flex-wrap: wrap; } #pageMitsuboshiSearch section.search dl.condList dd.speciality label{ width: 33%; margin: 0 0 5px; } #pageMitsuboshiSearch section.search dl.condList dt span{ background: #FFF; border-radius: 5px; font-size: 12px; line-height: 1; display: inline-block; padding: 5px 10px; } #pageMitsuboshiSearch section.search dl.condList dd{ order: 1; margin: 0 0 25px 0; padding: 0; font-size: 16px; line-height: 1.7; width: calc(100% - 35px - 150px - 1px); } #pageMitsuboshiSearch section.search dl.condList dd.half{ width: calc(54% - 35px - 150px - 1px); } #pageMitsuboshiSearch section.search dl.condList dd.half.star{ width: calc(660px - 35px - 150px - 1px); } #pageMitsuboshiSearch section.search dl.condList dd.half.year{ width: calc(37% - 35px - 150px - 1px); } #pageMitsuboshiSearch section.search dl.condList dd.half.iniFee{ width: calc(45% - 35px - 150px - 1px); } #pageMitsuboshiSearch section.search dl.condList dd.half.mlFee{ width: calc(50% - 35px - 150px - 1px); } #pageMitsuboshiSearch section.search dl.condList dd.half.freeword{ width: calc(55% - 35px - 150px - 1px); } #pageMitsuboshiSearch section.search dl.condList dd.half.sort{ width: calc(45% - 35px - 150px - 1px); } #pageMitsuboshiSearch section.search dl.condList::after{ content: ''; width: 100%; order: 1; } #pageMitsuboshiSearch section.search dl.condList dt.freeword{ order: 2; } #pageMitsuboshiSearch section.search dl.condList dd.freeword{ order: 2; } #pageMitsuboshiSearch section.search dl.condList dd.freeword input[type="text"]{ padding: 10px 15px; width: 100%; font-size: 16px; } #pageMitsuboshiSearch section.search dl.condList dt.sort{ width: 120px; } #pageMitsuboshiSearch section.search dl.condList dt.sort{ order: 3; } #pageMitsuboshiSearch section.search dl.condList dd.sort{ order: 3; } #pageMitsuboshiSearch section.search dl.condList dd ul{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; } #pageMitsuboshiSearch section.search dl.condList dd ul li{ display: flex; flex-wrap: wrap; margin: 0 15px 0 0; } #pageMitsuboshiSearch section.search dl.condList dd.area ul:nth-of-type(1){ margin-top: 15px; } #pageMitsuboshiSearch section.search div.submit{ text-align: center; margin: 0 0 50px; position: relative; } #pageMitsuboshiSearch section.search div.submit button.btnSearch{ display: block; width: 311px; height: 67px; background: #1C4A6D url("../img/common/btn.icon.arrow.right.white.svg") no-repeat right 40px center; font-weight: var(--font-sans-medium); line-height: 34px; text-decoration: none; text-align: center; font-size: 21px; color: #FFF; border: none; border-radius: 35px; margin: 0 auto 20px; } #pageMitsuboshiSearch section.search div.submit a.btnCompany{ display: block; width: 230px; height: 45px; background: #1C4A6D url("../img/common/btn.icon.arrow.bottom.white.svg") no-repeat left 15px center; font-weight: var(--font-sans-medium); line-height: 44px; text-decoration: none; text-align: center; font-size: 17px; color: #FFF; border: none; border-radius: 10px; margin: 0 auto 20px; padding: 0 0 0 10px; position: absolute; top: 10px; left: 5%; } #pageMitsuboshiSearch section.search div.submit a.btnReset{ font-size: 16px; border-bottom: 2px solid #000; text-decoration: none; padding: 0 0 5px; color: #000; } #pageMitsuboshiSearch section.search div.spCond { display: none; } _#pageMitsuboshiSearch a.fragment{ display: block; margin-top: -130px; padding-top: 130px; z-index: -1; position: relative; } #pageMitsuboshiSearch section.result{ margin: 0 0 60px 0; } #pageMitsuboshiSearch section.result ul.list{ list-style: none; margin: 0; padding: 0; } #pageMitsuboshiSearch section.result ul.list > li{ margin: 0 0 61px; } #pageMitsuboshiSearch section.result ul.list > li article{ position: relative; padding: 80px 0 0 0; background: #FFF; } #pageMitsuboshiSearch section.result ul.list > li article.star header div.rating{ display: flex; align-items: center; padding: 0 20px; background: #1C4A6D; color: #FFF; position: absolute; top: 0; width: 100%; height: 60px; font-size: 16px; line-height: 1; font-weight: var(--font-sans-bold); } #pageMitsuboshiSearch section.result ul.list > li article.star header div.rating span.star{ width: 147px; height: 36px; display: inline-block; padding-left: 20px; margin: 0 10px 0 20px; border-left: 1px solid #FFF; } #pageMitsuboshiSearch section.result ul.list > li article.star header div.rating span.rate1{ background: url("../img/mitsuboshi/search/icon.star1.svg") no-repeat left 20px center; } #pageMitsuboshiSearch section.result ul.list > li article.star header div.rating span.rate2{ background: url("../img/mitsuboshi/search/icon.star2.svg") no-repeat left 20px center; } #pageMitsuboshiSearch section.result ul.list > li article.star header div.rating span.rate3{ background: url("../img/mitsuboshi/search/icon.star3.svg") no-repeat left 20px center; } #pageMitsuboshiSearch section.result ul.list > li article.star header h3{ margin: 0 30px 10px; padding: 0 0 0 20px; border-left: 5px solid #1C4A6D; font-weight: var(--font-sans-bold); font-size: 30px; line-height: 1.6; display: flex; align-items: center; } #pageMitsuboshiSearch section.result ul.list > li article.star header h3 span.category{ border: 2px solid #BF2424; font-size: 16px; line-height: 1; padding: 6px 20px; margin: 3px 0 0 25px; font-weight: normal; display: inline-block; } #pageMitsuboshiSearch section.result ul.list > li article.selection header div.rating{ display: flex; align-items: center; padding: 0 20px; background: #FF8000; color: #FFF; position: absolute; top: 0; width: 100%; height: 60px; font-size: 23px; line-height: 1; font-weight: var(--font-sans-bold); } #pageMitsuboshiSearch section.result ul.list > li article.selection header h3{ margin: 0 30px 10px; padding: 0 0 0 20px; border-left: 5px solid #FF8000; font-weight: var(--font-sans-bold); font-size: 30px; line-height: 1.6; display: flex; align-items: center; } #pageMitsuboshiSearch section.result ul.list > li article.selection header h3 span.category{ border: 2px solid #BF2424; font-size: 16px; line-height: 1; padding: 6px 20px; margin: 3px 0 0 25px; font-weight: normal; display: inline-block; } #pageMitsuboshiSearch section.result ul.list > li article header dl.traffic{ margin: 0 30px; padding: 0 0px 0px; display: flex; flex-wrap: wrap; } #pageMitsuboshiSearch section.result ul.list > li article header dl.traffic dt{ font-size: 16px; line-height: 1.6; padding: 5px 15px 5px 0; margin: 15px 0 0 0px; width: 100px; color: #85A7BF; text-align: right; border-right: 1px solid #D2D2D2; font-weight: var(--font-sans-bold); } #pageMitsuboshiSearch section.result ul.list > li article header dl.traffic dd{ font-size: 16px; line-height: 1.6; padding: 5px 0 5px 15px; margin: 15px 0px 0 0; width: calc(100% - 100px - 72px); } #pageMitsuboshiSearch section.result div.slideShow{ margin: 0 30px 20px; position: relative; } #pageMitsuboshiSearch section.result div.slideShow ul.labels{ list-style: none; margin: 0; padding: 0; position: absolute; right: 25px; bottom: 135px; display: flex; gap: 0 15px; } #pageMitsuboshiSearch section.result div.slideShow ul.labels li span{ width: 100px; height: 100px; display: block; text-indent: 100%; overflow: hidden; white-space: nowrap; } #pageMitsuboshiSearch section.result div.slideShow ul.labels li span.kumiai{ background: url("../img/mitsuboshi/search/label.kumiai.png") no-repeat center center; background-size: 100% auto; } #pageMitsuboshiSearch section.result div.slideShow ul.labels li span.star.y2021.star1{ background: url("../img/mitsuboshi/search/label.star.2021.1.png") no-repeat center center; background-size: 100% auto; } #pageMitsuboshiSearch section.result div.slideShow ul.labels li span.star.y2021.star2{ background: url("../img/mitsuboshi/search/label.star.2021.2.png") no-repeat center center; background-size: 100% auto; } #pageMitsuboshiSearch section.result div.slideShow ul.labels li span.star.y2021.star3{ background: url("../img/mitsuboshi/search/label.star.2021.3.png") no-repeat center center; background-size: 100% auto; } #pageMitsuboshiSearch section.result div.slideShow ul.labels li span.star.y2022.star1{ background: url("../img/mitsuboshi/search/label.star.2022.1.png") no-repeat center center; background-size: 100% auto; } #pageMitsuboshiSearch section.result div.slideShow ul.labels li span.star.y2022.star2{ background: url("../img/mitsuboshi/search/label.star.2022.2.png") no-repeat center center; background-size: 100% auto; } #pageMitsuboshiSearch section.result div.slideShow ul.labels li span.star.y2022.star3{ background: url("../img/mitsuboshi/search/label.star.2022.3.png") no-repeat center center; background-size: 100% auto; } #pageMitsuboshiSearch section.result div.slideShow ul.labels li span.star.y2023.star1{ background: url("../img/mitsuboshi/search/label.star.2023.1.png") no-repeat center center; background-size: 100% auto; } #pageMitsuboshiSearch section.result div.slideShow ul.labels li span.star.y2023.star2{ background: url("../img/mitsuboshi/search/label.star.2023.2.png") no-repeat center center; background-size: 100% auto; } #pageMitsuboshiSearch section.result div.slideShow ul.labels li span.star.y2023.star3{ background: url("../img/mitsuboshi/search/label.star.2023.3.png") no-repeat center center; background-size: 100% auto; } #pageMitsuboshiSearch section.result div.slideShow div.tns-outer{ position: relative; } #pageMitsuboshiSearch section.result div.slideShow ul.slide{ margin: 0 0 20px 0; padding: 0; list-style: none; } #pageMitsuboshiSearch section.result div.slideShow ul.slide li{ width: 100%; height: 537px; overflow: hidden; margin: 0; } #pageMitsuboshiSearch section.result div.slideShow ul.slide li img{ width: 100%; height: 100%; display: block; object-fit: cover; } #pageMitsuboshiSearch section.result div.slideShow ul.thumb{ margin: 0 0 0 -2%; padding: 0; list-style: none; display: flex; } #pageMitsuboshiSearch section.result div.slideShow ul.thumb li{ width: 18%; height: 100px; margin: 0 0 0 2%; } #pageMitsuboshiSearch section.result div.slideShow ul.thumb li img{ width: 100%; height: 100%; display: block; object-fit: cover; cursor: pointer; } #pageMitsuboshiSearch section.result div.slideShow div.tns-controls{} #pageMitsuboshiSearch section.result div.slideShow div.tns-controls button{ text-indent: 100%; overflow: hidden; white-space: nowrap; box-shadow: 0px 3px 6px rgba(0,0,0,0.16); border: none; padding: 0; position: absolute; top: 0; bottom: 0; margin: auto 0; width: 35px; height: 50px; z-index: 10; } #pageMitsuboshiSearch section.result div.slideShow div.tns-controls button:first-child{ background: #FFF url("../img/common/btn.icon.arrow.left.slide.svg") no-repeat center center; left: -17px; } #pageMitsuboshiSearch section.result div.slideShow div.tns-controls button:last-child{ background: #FFF url("../img/common/btn.icon.arrow.right.slide.svg") no-repeat center center; right: -17px; } #pageMitsuboshiSearch section.result ul.list > li section p.comment{ margin: 0 30px 20px; font-size: 16px; line-height: 1.7; } #pageMitsuboshiSearch section.result ul.list > li section ul.speciality{ margin: 0 30px 5px 10px; padding: 0; list-style: none; display: flex; flex-wrap: wrap; } #pageMitsuboshiSearch section.result ul.list > li section ul.speciality li{ color: #FFF; margin: 0 0 15px 20px; padding: 0; position: relative; z-index: 1; font-size: 16px; line-height: 1.2; font-weight: var(--font-sans-bold); width: 74px; height: 74px; display: flex; align-items: center; justify-content: center; text-align: center; } #pageMitsuboshiSearch section.result ul.list > li section ul.speciality li::before{ content: ''; z-index: -2; position: absolute; display: block; left: 0; top: 0; width: 74px; height: 74px; background: #663E2E; } #pageMitsuboshiSearch section.result ul.list > li section ul.speciality li::after{ content: ''; z-index: -1; border: 1px solid #FFF; position: absolute; display: block; left: 3px; top: 3px; width: 66px; height: 66px; } #pageMitsuboshiSearch section.result ul.list > li section dl{ margin: 0; padding: 5px 30px 20px; border-top: 1px solid #D2D2D2; display: flex; flex-wrap: wrap; } #pageMitsuboshiSearch section.result ul.list > li section dl dt{ font-size: 16px; line-height: 1.4; padding: 5px 15px 5px 0; margin: 15px 0 0 0px; width: 100px; color: #85A7BF; text-align: right; border-right: 1px solid #D2D2D2; font-weight: var(--font-sans-bold); } #pageMitsuboshiSearch section.result ul.list > li section dl dd{ font-size: 16px; line-height: 1.4; padding: 5px 0 5px 15px; margin: 15px 0px 0 0; width: calc(100% - 100px - 72px); } #pageMitsuboshiSearch section.result ul.list > li section dl dd.price p{ margin: 0; font-size: 16px; line-height: 1; } #pageMitsuboshiSearch section.result ul.list > li section dl dd.price p:first-child{ margin-bottom: 15px; } #pageMitsuboshiSearch section.result ul.list > li section dl dd.price p span.spacer{ display: inline-block; width: 50px; } #pageMitsuboshiSearch section.result ul.list > li section dl dd.price span{ font-size: 36px; font-family: "Lato"; font-weight: var(--font-lato-bold); line-height: 1; padding: 0 7px; } #pageMitsuboshiSearch section.result ul.list > li footer div.link{ position: relative; display: flex; align-items: center; justify-content: center; padding: 20px 32px; border-top: 1px solid #D2D2D2; } #pageMitsuboshiSearch section.result ul.list > li footer div.link a.detail{ width: 450px; height: 60px; font-size: 18px; font-weight: var(--font-sans-medium); line-height: 1; border-radius: 30px; margin: 0; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; background: #BF2424 url("../img/common/btn.icon.arrow.right.white.svg") no-repeat right 30px center; background-size: 6px auto; color: #FFF; } #pageMitsuboshiSearch section.result ul.list > li footer div.contact{ display: flex; align-items: center; padding: 0; border-top: 1px solid #D2D2D2; } #pageMitsuboshiSearch section.result ul.list > li footer div.contact a.tel{ width: 50%; height: 99px; margin: 0 0; padding: 20px 0 0 0; text-decoration: none; color: #000; } #pageMitsuboshiSearch section.result ul.list > li footer div.contact a.tel span.tel{ font-family: "Lato"; font-weight: var(--font-lato-bold); font-size: 36px; line-height: 1; display: table; margin: 0 auto 3px; padding: 0 0 0 40px; background: url("../img/mitsuboshi/search/icon.tel.svg") no-repeat left top 2px; } #pageMitsuboshiSearch section.result ul.list > li footer div.contact a.tel span.hour{ display: block; font-size: 14px; line-height: 1; text-align: center; } #pageMitsuboshiSearch section.result ul.list > li footer div.contact a.inquiry{ width: 50%; height: 99px; padding: 0 0 0 60px; font-size: 24px; font-weight: var(--font-sans-medium); line-height: 1; margin: 0; display: flex; align-items: center; justify-content: center; text-decoration: none; background: #DF9191 url("../img/mitsuboshi/search/btn.icon.letter.svg") no-repeat left 20% top 35px; color: #FFF; } #pageMitsuboshiSearch section.result ul.list > li p.notice{ display: block; width: 50%; text-align: center; font-size: 15px; line-height: 1; margin: 15px 0 0 0; } #pageMitsuboshiSearch section.companyList{ border-top: 5px solid #EBEBEB; padding: 50px 0 0 0; } #pageMitsuboshiSearch section.companyList div.tns-outer{ position: relative; } #pageMitsuboshiSearch section.companyList div.tns-controls{} #pageMitsuboshiSearch section.companyList div.tns-controls button{ text-indent: 100%; overflow: hidden; white-space: nowrap; box-shadow: 0px 3px 6px rgba(0,0,0,0.16); border: none; padding: 0; position: absolute; top: 0; bottom: 0; margin: auto 0; width: 35px; height: 50px; z-index: 10; } #pageMitsuboshiSearch section.companyList div.tns-controls button:first-child{ background: #FFF url("../img/common/btn.icon.arrow.left.slide.svg") no-repeat center center; left: -17px; } #pageMitsuboshiSearch section.companyList div.tns-controls button:last-child{ background: #FFF url("../img/common/btn.icon.arrow.right.slide.svg") no-repeat center center; right: -17px; } #pageMitsuboshiSearch section.companyList ul.list{ list-style: none; margin: -20px 0 0 0; padding: 0; } #pageMitsuboshiSearch section.companyList ul.list > li{ position: relative; margin: 0 0 0 0; } #pageMitsuboshiSearch section.companyList ul.list > li > a{ display: block; background: #FFF; color: #1C4A6D; position: relative; text-decoration: none; padding: 56.43% 0 0; } #pageMitsuboshiSearch section.companyList ul.list > li > a article{ padding: 15px 20px 20px; display: block; height: 100%; } #pageMitsuboshiSearch section.companyList ul.list > li > a article div.image{ position: absolute; left: 0; top: 0; width: 100%; height: 0; padding-top: 56.43%; overflow: hidden; background: #EEE; } #pageMitsuboshiSearch section.companyList ul.list > li > a article div.image img{ object-fit: cover; width: 100%; height: 100%; display: block; position: absolute; left: 0; top: 0; } #pageMitsuboshiSearch section.companyList ul.list > li > a article h3{ margin: 0 0 10px; padding: 0; font-size: 20px; line-height: 1.5; } #pageMitsuboshiSearch section.companyList ul.list > li > a article p{ font-size: 16px; line-height: 1.6; margin: 0 0 15px; } #pageMitsuboshiSearch section.companyList ul.list > li > a article dl.speciality{ margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 3%; } #pageMitsuboshiSearch section.companyList ul.list > li > a article dl.speciality dt{ margin: 0 0 10px; padding: 0; width: 100%; font-size: 17px; line-height: 1; display: flex; font-weight: var(--font-sans-medium); align-items: center; } #pageMitsuboshiSearch section.companyList ul.list > li > a article dl.speciality dt::before{ content: ''; background: url("../img/mitsuboshi/search/icon.flag.company.svg") no-repeat; width: 17px; height: 18px; display: inline-block; margin: 0 7px 0 0;} #pageMitsuboshiSearch section.companyList ul.list > li > a article dl.speciality dd{ margin: 0; padding: 5px; border: 2px solid #1C4A6D; width: 80px; min-height: 80px; font-size: 15px; line-height: 1.35; text-align: center; border-radius: 5px; display: flex; align-items: center; } #pageMitsuboshiSearch section.companyList ul.list > li > a article dl.speciality dd br{ display: none; } #pageMitsuboshiSearch section.companyList ul.list > li > nav.contact{} #pageMitsuboshiSearch section.companyList ul.list > li > nav.contact a.tel{ height: 100px; display: flex; flex-direction: column; justify-content: center; background: #FFF; text-decoration: none; border-top: 2px solid #D2D2D2; } #pageMitsuboshiSearch section.companyList ul.list > li > nav.contact a.tel span.tel{ color: #000; font-family: "Lato"; font-weight: var(--font-lato-bold); font-size: 36px; line-height: 1; display: table; margin: 0 auto 7px; padding: 0 0 0 40px; background: url("../img/mitsuboshi/search/icon.tel.svg") no-repeat left top 2px; } #pageMitsuboshiSearch section.companyList ul.list > li > nav.contact a.tel span.hour{ display: block; font-size: 15px; line-height: 1; text-align: center; color: #85A7BF; } #pageMitsuboshiSearch section.companyList ul.list > li > nav.contact a.inquiry{ height: 100px; padding: 0 0 0 30px; color: #FFF; font-weight: var(--font-sans-bold); font-size: 28px; line-height: 1; display: flex; justify-content: center; align-items: center; text-decoration: none; background: #DF9191 url("../img/mitsuboshi/search/btn.icon.letter.svg") no-repeat left 12% center; } } @media screen and (max-width: 768px) { #pageMitsuboshiSearch{} #pageMitsuboshiSearch header.pageHeader{ background: #1C4A6D url("../img/mitsuboshi/search/header.bg.sp.jpg") no-repeat left -15.23vw top -7.55vw; background-size: 107.68vw auto; margin: 0 0 0vw; padding: 64vw 5.33vw 6vw 5.33vw; position: relative; } #pageMitsuboshiSearch header.pageHeader .title{ margin: 0 0 0vw; padding: 0 0 0 0; color: #FFF; font-size: 6.67vw; line-height: 1.3; font-weight: var(--font-sans-bold); display: block; text-align: center; } #pageMitsuboshiSearch header.pageHeader .title::before{ content: ''; background: url("../img/mitsuboshi/search/header.star.sp.png") no-repeat; background-size: 100% auto; width: 28.93vw; height: 6.93vw; margin: 0 auto 2.5vw; display: block; } #pageMitsuboshiSearch header.pageHeader div.form{ display: flex; flex-wrap: wrap; justify-content: space-between; margin: 0 0 0; } #pageMitsuboshiSearch header.pageHeader div.form a.area{ width: 48.5%; height: 11.33vw; line-height: 1; margin: 0 0 3vw; font-weight: var(--font-sans-bold); font-size: max(3.47vw,var(--font-size-min)); padding: 4.2vw 0px 0 8.7vw; border-radius: 10px; border: none; cursor: pointer; display: block; background: #FFF url("../img/common/icon.map-maker.01.svg") no-repeat left 2.5vw center; background-size: auto 6vw; text-decoration: none; color: #000; } #pageMitsuboshiSearch header.pageHeader div.form select{ width: 48.5%; height: 11.33vw; margin: 0 0 3vw; font-weight: var(--font-sans-bold); font-size: max(3.47vw,var(--font-size-min)); padding: 0 0px 0 8vw; border-radius: 10px; border: none; cursor: pointer; } #pageMitsuboshiSearch header.pageHeader div.form select.careWork{ background: #FFF url("../img/common/icon.wheelchair.01.svg") no-repeat left 2.5vw center; background-size: auto 5vw; } #pageMitsuboshiSearch header.pageHeader div.form select.iniFee{ background: #FFF url("../img/mitsuboshi/search/icon.money.initial.svg") no-repeat left 3vw center; background-size: auto 5.5vw; } #pageMitsuboshiSearch header.pageHeader div.form select.mlFee{ background: #FFF url("../img/mitsuboshi/search/icon.money.monthly.svg") no-repeat left 3vw center; background-size: auto 5vw; } #pageMitsuboshiSearch header.pageHeader div.form select.year{ background: #FFF url("../img/mitsuboshi/search/icon.year.svg") no-repeat left 2.8vw center; background-size: auto 4.5vw; width: 100%; } #pageMitsuboshiSearch header.pageHeader div.reset{ margin: 2vw 0; text-align: center; } #pageMitsuboshiSearch header.pageHeader div.reset a{ color: #FFF; font-size: max(3.47vw,var(--font-size-min)); text-decoration: none; border-bottom: 2px solid #FFF; padding: 0 0 1vw; } #pageMitsuboshiSearch ._h2{ font-size: 5vw; line-height: 1.4; font-weight: var(--font-sans-bold); margin: 0 0 5vw 0; padding: 1vw 0 1vw 4vw; border-left: 5px solid #1C4A6D; position: relative; } #pageMitsuboshiSearch ._h2 span{ border-bottom: 5px solid #BF2424; margin-bottom: 5px; display: inline-block; } #pageMitsuboshiSearch div.panelMain{ padding: 6vw 5.33vw; } #pageMitsuboshiSearch section.search{ padding: 0 0 5vw 0; } #pageMitsuboshiSearch section.search p.guide{ margin: -2vw 0 5vw; } #pageMitsuboshiSearch section.search p.guide a{ display: block; margin: 0 auto; background: url("../img/mitsuboshi/search/banner.about-select.sp.jpg") no-repeat; background-size: 100% auto; width: 89.34vw; height: 37.07vw; text-indent: 100%; overflow: hidden; white-space: nowrap; } #pageMitsuboshiSearch section.search dl.condList{ display: flex; margin: 0 0 5vw 0; padding: 0; align-items: stretch; flex-wrap: wrap; } #pageMitsuboshiSearch section.search dl.condList dt{ margin: 0 2vw 5vw 0; padding: 0 0 0 0; font-size: max(3.47vw,var(--font-size-min)); line-height: 1.5; width: 24vw; text-align: center; border-right: 1px solid #D2D2D2; font-weight: var(--font-sans-bold); } #pageMitsuboshiSearch section.search dl.condList dt.area{ background: url("../img/common/icon.map-maker.01.svg") no-repeat center top; background-size: auto 5.27vw; padding-top: 7vw; } #pageMitsuboshiSearch section.search dl.condList dt.careWork{ background: url("../img/common/icon.wheelchair.01.svg") no-repeat center top; background-size: auto 5.27vw; padding-top: 7vw; } #pageMitsuboshiSearch section.search dl.condList dt.iniFee{ background: url("../img/mitsuboshi/search/icon.money.initial.svg") no-repeat center top; background-size: auto 6.27vw; padding-top: 7vw; } #pageMitsuboshiSearch section.search dl.condList dt.mlFee{ background: url("../img/mitsuboshi/search/icon.money.monthly.svg") no-repeat center top; background-size: auto 5.27vw; padding-top: 7vw; } #pageMitsuboshiSearch section.search dl.condList dd.speciality{ display: flex; flex-wrap: wrap; } #pageMitsuboshiSearch section.search dl.condList dd.speciality label{ width: 100%; margin: 0 0 2vw; } #pageMitsuboshiSearch section.search dl.condList dt span{ background: #FFF; border-radius: 5px; font-size: max(3.47vw,var(--font-size-min)); line-height: 1; display: inline-block; padding: 1vw 3vw; } #pageMitsuboshiSearch section.search dl.condList dd{ margin: 0 0 5vw 0; padding: 0; font-size: max(3.47vw,var(--font-size-min)); line-height: 1.7; width: calc(100% - 2vw - 24vw - 1px); } #pageMitsuboshiSearch section.search dl.condList dd.freeword input[type="text"]{ width: 100%; font-size: max(3.47vw,var(--font-size-min)); } #pageMitsuboshiSearch section.search dl.condList dd ul{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; } #pageMitsuboshiSearch section.search dl.condList dd ul li{ display: flex; flex-wrap: wrap; margin: 0 2vw 0 0; } #pageMitsuboshiSearch section.search dl.condList dd select{ width: 100%; } #pageMitsuboshiSearch section.search div.submit{ text-align: center; margin: 0 0 4vw; display: flex; flex-wrap: wrap; justify-content: center; flex-direction: column; align-items: center; } #pageMitsuboshiSearch section.search div.submit button.btnSearch{ display: block; width: 54vw; height: 14.27vw; background: #1C4A6D url("../img/common/btn.icon.arrow.right.white.svg") no-repeat right 6vw center; background-size: auto 2vw; font-weight: var(--font-sans-medium); line-height: 12vw; text-decoration: none; text-align: center; font-size: 4vw; color: #FFF; border: none; border-radius: 8vw; margin: 0 auto 4vw; order: 1; } #pageMitsuboshiSearch section.search div.submit a.btnReset{ font-size: max(3.47vw,var(--font-size-min)); border-bottom: 2px solid #000; text-decoration: none; padding: 0 0 5px; color: #000; order: 2; margin: 0 0 7vw; } #pageMitsuboshiSearch section.search div.submit a.btnCompany{ display: block; width: 48vw; height: 10vw; background: #1C4A6D url("../img/common/btn.icon.arrow.bottom.white.svg") no-repeat left 3.5vw center; background-size: 3vw auto; font-weight: var(--font-sans-medium); line-height: 10vw; text-decoration: none; text-align: center; font-size: max(3.47vw,var(--font-size-min)); color: #FFF; border: none; border-radius: 5vw; margin: 0 auto; padding: 0 0 0 2.5vw; order: 3; } #pageMitsuboshiSearch section.search div.spCond{ display: none; } #pageMitsuboshiSearch section.search.open div.spCond{ display: block; position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(244,245,246,1) 30%, rgba(244,245,246,0.5)); padding: 25vw 0 0; } #pageMitsuboshiSearch section.search.open div.spCond button.btnCond{ display: flex; align-items: center; justify-content: center; width: 42.13vw; height: 12vw; border: 2px solid #BF2424; background: #FFF url("../img/global/navi.local.icon.plus.sp.svg") no-repeat left 3.5vw center; background-size: auto 3vw; font-weight: var(--font-sans-medium); line-height: 1; text-decoration: none; text-align: center; font-size: 4vw; color: #BF2424; border-radius: 8vw; margin: 0 auto; } #pageMitsuboshiSearch section.search.open{ height: 90vw; position: relative; margin: 0 0 10vw; overflow: hidden; } #pageMitsuboshiSearch a.fragment{ display: block; margin-top: -18vw; padding-top: 18vw; z-index: -1; position: relative; } #pageMitsuboshiSearch section.result ul.list{ list-style: none; margin: 0; padding: 0; } #pageMitsuboshiSearch section.result ul.list > li{ margin: 0 0 12vw; } #pageMitsuboshiSearch section.result ul.list > li article{ position: relative; padding: 17.33vw 0 0 0; background: #FFF; } #pageMitsuboshiSearch section.result ul.list > li article.star header div.rating{ display: flex; align-items: center; padding: 0 4vw; background: #1C4A6D; color: #FFF; position: absolute; top: 0; width: 100%; height: 13.33vw; font-size: max(3.47vw,var(--font-size-min)); line-height: 1; font-weight: var(--font-sans-bold); } #pageMitsuboshiSearch section.result ul.list > li article.star header div.rating span.star{ width: 27vw; height: 7vw; display: inline-block; padding-left: 4vw; margin: 0 0px 0 4vw; border-left: 1px solid #FFF; } #pageMitsuboshiSearch section.result ul.list > li article.star header div.rating span.rate1{ background: url("../img/mitsuboshi/search/icon.star1.svg") no-repeat left 4vw center; background-size: 21.68vw auto; } #pageMitsuboshiSearch section.result ul.list > li article.star header div.rating span.rate2{ background: url("../img/mitsuboshi/search/icon.star2.svg") no-repeat left 4vw center; background-size: 21.68vw auto; } #pageMitsuboshiSearch section.result ul.list > li article.star header div.rating span.rate3{ background: url("../img/mitsuboshi/search/icon.star3.svg") no-repeat left 4vw center; background-size: 21.68vw auto; } #pageMitsuboshiSearch section.result ul.list > li article.star header h3{ margin: 0 4vw 13vw; padding: 1vw 0 1vw 4vw; border-left: 5px solid #1C4A6D; font-weight: var(--font-sans-bold); font-size: 5vw; line-height: 1.4; position: relative; } #pageMitsuboshiSearch section.result ul.list > li article.star header h3 span.category{ border: 2px solid #BF2424; font-size: max(3.47vw,var(--font-size-min)); position: absolute; background: #FFF; left: -5px; bottom: -9vw; line-height: 1; padding: 1vw 3vw; margin: 3px 0 0 0; font-weight: normal; display: block; } #pageMitsuboshiSearch section.result ul.list > li article.selection header div.rating{ display: flex; align-items: center; padding: 0 4vw; background: #FF8000; color: #FFF; position: absolute; top: 0; width: 100%; height: 13.33vw; font-size: max(3.47vw,var(--font-size-min)); line-height: 1; font-weight: var(--font-sans-bold); } #pageMitsuboshiSearch section.result ul.list > li article.selection header h3{ margin: 0 4vw 13vw; padding: 1vw 0 1vw 4vw; border-left: 5px solid #FF8000; font-weight: var(--font-sans-bold); font-size: 5vw; line-height: 1.4; position: relative; } #pageMitsuboshiSearch section.result ul.list > li article.selection header h3 span.category{ border: 2px solid #BF2424; font-size: max(3.47vw,var(--font-size-min)); position: absolute; background: #FFF; left: -5px; bottom: -9vw; line-height: 1; padding: 1vw 3vw; margin: 3px 0 0 0; font-weight: normal; display: block; } #pageMitsuboshiSearch section.result ul.list > li header dl.traffic{ margin: 0 4vw; padding: 0 0px 0px; display: flex; flex-wrap: wrap; } #pageMitsuboshiSearch section.result ul.list > li header dl.traffic dt{ font-size: max(3.47vw,var(--font-size-min)); line-height: 1.6; padding: 0 2vw 0 0; margin: 3vw 0 0 0px; width: 18vw; color: #85A7BF; text-align: right; border-right: 1px solid #D2D2D2; font-weight: var(--font-sans-bold); } #pageMitsuboshiSearch section.result ul.list > li header dl.traffic dd{ font-size: max(3.47vw,var(--font-size-min)); line-height: 1.6; padding: 0 0 0 2vw; margin: 3vw 0px 0 0; width: calc(100% - 18vw); } #pageMitsuboshiSearch section.result div.slideShow{ margin: 0 4vw 3vw; position: relative; } #pageMitsuboshiSearch section.result div.slideShow ul.labels{ list-style: none; margin: 0; padding: 0; position: absolute; right: 3.5vw; bottom: 14.5vw; display: flex; gap: 0 2.5vw; } #pageMitsuboshiSearch section.result div.slideShow ul.labels li span{ width: 13vw; height: 13vw; display: block; text-indent: 100%; overflow: hidden; white-space: nowrap; } #pageMitsuboshiSearch section.result div.slideShow ul.labels li span.kumiai{ background: url("../img/mitsuboshi/search/label.kumiai.png") no-repeat center center; background-size: 100% auto; } #pageMitsuboshiSearch section.result div.slideShow ul.labels li span.star.y2021.star1{ background: url("../img/mitsuboshi/search/label.star.2021.1.png") no-repeat center center; background-size: 100% auto; } #pageMitsuboshiSearch section.result div.slideShow ul.labels li span.star.y2021.star2{ background: url("../img/mitsuboshi/search/label.star.2021.2.png") no-repeat center center; background-size: 100% auto; } #pageMitsuboshiSearch section.result div.slideShow ul.labels li span.star.y2021.star3{ background: url("../img/mitsuboshi/search/label.star.2021.3.png") no-repeat center center; background-size: 100% auto; } #pageMitsuboshiSearch section.result div.slideShow ul.labels li span.star.y2022.star1{ background: url("../img/mitsuboshi/search/label.star.2022.1.png") no-repeat center center; background-size: 100% auto; } #pageMitsuboshiSearch section.result div.slideShow ul.labels li span.star.y2022.star2{ background: url("../img/mitsuboshi/search/label.star.2022.2.png") no-repeat center center; background-size: 100% auto; } #pageMitsuboshiSearch section.result div.slideShow ul.labels li span.star.y2022.star3{ background: url("../img/mitsuboshi/search/label.star.2022.3.png") no-repeat center center; background-size: 100% auto; } #pageMitsuboshiSearch section.result div.slideShow ul.labels li span.star.y2023.star1{ background: url("../img/mitsuboshi/search/label.star.2023.1.png") no-repeat center center; background-size: 100% auto; } #pageMitsuboshiSearch section.result div.slideShow ul.labels li span.star.y2023.star2{ background: url("../img/mitsuboshi/search/label.star.2023.2.png") no-repeat center center; background-size: 100% auto; } #pageMitsuboshiSearch section.result div.slideShow ul.labels li span.star.y2023.star3{ background: url("../img/mitsuboshi/search/label.star.2023.3.png") no-repeat center center; background-size: 100% auto; } #pageMitsuboshiSearch section.result div.slideShow div.tns-outer{ position: relative; } #pageMitsuboshiSearch section.result div.slideShow ul.slide{ margin: 0 0 2vw 0; padding: 0; list-style: none; } #pageMitsuboshiSearch section.result div.slideShow ul.slide li{ width: 100%; height: 57.26vw; overflow: hidden; margin: 0; } #pageMitsuboshiSearch section.result div.slideShow ul.slide li img{ width: 100%; height: 100%; display: block; object-fit: cover; } #pageMitsuboshiSearch section.result div.slideShow ul.thumb{ margin: 0 0 0 -2%; padding: 0; list-style: none; display: flex; } #pageMitsuboshiSearch section.result div.slideShow ul.thumb li{ width: 18%; height: 10vw; margin: 0 0 0 2%; } #pageMitsuboshiSearch section.result div.slideShow ul.thumb li img{ width: 100%; height: 100%; display: block; object-fit: cover; cursor: pointer; } #pageMitsuboshiSearch section.result div.slideShow div.tns-controls{} #pageMitsuboshiSearch section.result div.slideShow div.tns-controls button{ text-indent: 100%; overflow: hidden; white-space: nowrap; box-shadow: 0px 3px 6px rgba(0,0,0,0.16); border: none; padding: 0; position: absolute; top: 0; bottom: 0; margin: auto 0; width: 35px; height: 50px; z-index: 10; } #pageMitsuboshiSearch section.result div.slideShow div.tns-controls button:first-child{ background: #FFF url("../img/common/btn.icon.arrow.left.slide.svg") no-repeat center center; left: -17px; } #pageMitsuboshiSearch section.result div.slideShow div.tns-controls button:last-child{ background: #FFF url("../img/common/btn.icon.arrow.right.slide.svg") no-repeat center center; right: -17px; } #pageMitsuboshiSearch section.result ul.list > li section p.comment{ margin: 0 4vw 3vw; font-size: max(3.47vw,var(--font-size-min)); line-height: 1.7; } #pageMitsuboshiSearch section.result ul.list > li section ul.speciality{ margin: 3vw 4vw 3vw; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 1.1vw } #pageMitsuboshiSearch section.result ul.list > li section ul.speciality li{ color: #FFF; margin: 0; padding: 0; position: relative; z-index: 1; font-size: max(3.47vw,var(--font-size-min)); line-height: 1.2; font-weight: var(--font-sans-bold); width: 19.5vw; height: 19.5vw; display: flex; align-items: center; justify-content: center; text-align: center; } #pageMitsuboshiSearch section.result ul.list > li section ul.speciality li::before{ content: ''; z-index: -2; position: absolute; display: block; left: 0; top: 0; width: 19.5vw; height: 19.5vw; background: #663E2E; } #pageMitsuboshiSearch section.result ul.list > li section ul.speciality li::after{ content: ''; z-index: -1; border: 1px solid #FFF; position: absolute; display: block; left: 3px; top: 3px; width: calc(19.5vw - 8px); height: calc(19.5vw - 8px); } #pageMitsuboshiSearch section.result ul.list > li section dl{ margin: 0; padding: 1vw 4vw 4vw; border-top: 1px solid #D2D2D2; display: flex; flex-wrap: wrap; } #pageMitsuboshiSearch section.result ul.list > li section dl dt{ font-size: max(3.47vw,var(--font-size-min)); line-height: 1.5; padding: 0 3vw 0 0; margin: 3vw 0 0 0px; width: 18vw; color: #85A7BF; text-align: right; border-right: 1px solid #D2D2D2; font-weight: var(--font-sans-bold); } #pageMitsuboshiSearch section.result ul.list > li section dl dd{ font-size: max(3.47vw,var(--font-size-min)); line-height: 1.5; padding: 0 0 0 3vw; margin: 3vw 0px 0 0; width: calc(100% - 18vw); } #pageMitsuboshiSearch section.result ul.list > li section dl dd.price p{ margin: 0; font-size: max(3.47vw,var(--font-size-min)); line-height: 1.5; } #pageMitsuboshiSearch section.result ul.list > li section dl dd.price p:first-child{ margin-bottom: 2vw; } #pageMitsuboshiSearch section.result ul.list > li section dl dd.price p span.spacer{ display: block; height: 2vw; } #pageMitsuboshiSearch section.result ul.list > li section dl dd.price span{ font-size: 6.67vw; font-family: "Lato"; font-weight: var(--font-lato-bold); line-height: 1; padding: 0 1vw; } #pageMitsuboshiSearch section.result ul.list > li footer div.link{ position: relative; display: flex; align-items: center; justify-content: center; padding: 3vw 3.5vw; border-top: 1px solid #D2D2D2; } #pageMitsuboshiSearch section.result ul.list > li footer div.link a.detail{ width: 80.5%; height: 12.01vw; font-size: max(3.47vw,var(--font-size-min)); font-weight: var(--font-sans-medium); line-height: 1; border-radius: 6.5vw; margin: 0; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; background: #BF2424 url("../img/common/btn.icon.arrow.right.white.sp.svg") no-repeat right 4vw center; background-size: 1.5vw auto; color: #FFF; } #pageMitsuboshiSearch section.result ul.list > li footer div.contact{ display: flex; align-items: center; padding: 0; border-top: 1px solid #D2D2D2; } #pageMitsuboshiSearch section.result ul.list > li footer div.contact a.tel{ width: 50%; height: 17.74vw; margin: 0 0; padding: 3.5vw 0 0 0; text-decoration: none; color: #000; } #pageMitsuboshiSearch section.result ul.list > li footer div.contact a.tel span.tel{ display: table; font-family: "Lato"; font-weight: var(--font-lato-bold); font-size: 5.33vw; line-height: 1; margin: 0 auto 1vw; padding: 0 0 0 5vw; background: url("../img/mitsuboshi/search/icon.tel.svg") no-repeat left top 0.3vw; background-size: 4.27vw auto; } #pageMitsuboshiSearch section.result ul.list > li footer div.contact a.tel span.hour{ display: block; text-align: center; font-size: max(3.47vw,var(--font-size-min)); line-height: 1; } #pageMitsuboshiSearch section.result ul.list > li footer div.contact a.inquiry{ width: 50%; height: 17.74vw; padding: 0 0 0 6vw; text-align: center; font-size: max(3.47vw,var(--font-size-min)); font-weight: var(--font-sans-medium); line-height: 1.4; margin: 0; display: flex; align-items: center; justify-content: center; text-decoration: none; background: #DF9191 url("../img/mitsuboshi/search/btn.icon.letter.svg") no-repeat left 7vw center; background-size: 5vw auto; color: #FFF; } #pageMitsuboshiSearch section.result ul.list > li p.notice{ display: block; font-size: max(3.27vw,var(--font-size-min)); line-height: 1.4; margin: 2vw 0 0 1em; text-indent: -1em; } #pageMitsuboshiSearch section.companyList{ margin: 13vw 0 0 0; border-top: 5px solid #EBEBEB; padding: 8vw 0 0 0; } #pageMitsuboshiSearch section.companyList div.tns-outer{ position: relative; } #pageMitsuboshiSearch section.companyList div.tns-controls{} #pageMitsuboshiSearch section.companyList div.tns-controls button{ text-indent: 100%; overflow: hidden; white-space: nowrap; box-shadow: 0px 3px 6px rgba(0,0,0,0.16); border: none; padding: 0; position: absolute; top: 0; bottom: 0; margin: auto 0; width: 35px; height: 50px; z-index: 10; } #pageMitsuboshiSearch section.companyList div.tns-controls button:first-child{ background: #FFF url("../img/common/btn.icon.arrow.left.slide.svg") no-repeat center center; left: -17px; } #pageMitsuboshiSearch section.companyList div.tns-controls button:last-child{ background: #FFF url("../img/common/btn.icon.arrow.right.slide.svg") no-repeat center center; right: -17px; } #pageMitsuboshiSearch section.companyList ul.list{ list-style: none; margin: 0; padding: 0; } #pageMitsuboshiSearch section.companyList ul.list > li{ margin: 0 0 3vw; } #pageMitsuboshiSearch section.companyList ul.list > li > a{ display: block; background: #FFF; color: #1C4A6D; position: relative; text-decoration: none; padding: 55vw 0 0; } #pageMitsuboshiSearch section.companyList ul.list > li > a article{ padding: 3vw 4vw 4vw; display: block; height: 100%; } #pageMitsuboshiSearch section.companyList ul.list > li > a article div.image{ position: absolute; left: 0; top: 0; width: 100%; height: 55vw; overflow: hidden; background: #EEE; } #pageMitsuboshiSearch section.companyList ul.list > li > a article div.image img{ object-fit: cover; width: 100%; height: 100%; display: block; } #pageMitsuboshiSearch section.companyList ul.list > li > a article h3{ margin: 0 0 2vw; padding: 0; font-size: 4vw; font-weight: var(--font-sans-bold); line-height: 1.5; } #pageMitsuboshiSearch section.companyList ul.list > li > a article p{ font-size: max(3.47vw,var(--font-size-min)); line-height: 1.5; margin: 0 0 4vw; } #pageMitsuboshiSearch section.companyList ul.list > li > a article dl.speciality{ margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2vw; } #pageMitsuboshiSearch section.companyList ul.list > li > a article dl.speciality dt{ margin: 0 0 1.5vw; padding: 0; width: 100%; font-size: max(3.47vw,var(--font-size-min)); line-height: 1; display: flex; font-weight: var(--font-sans-medium); align-items: center; } #pageMitsuboshiSearch section.companyList ul.list > li > a article dl.speciality dt::before{ content: ''; background: url("../img/mitsuboshi/search/icon.flag.company.svg") no-repeat; background-size: auto 100%; width: 4vw; height: 4vw; display: inline-block; margin: 0 1vw 0 0;} #pageMitsuboshiSearch section.companyList ul.list > li > a article dl.speciality dd{ margin: 0; padding: 0 0; border: 2px solid #1C4A6D; width: 17vw; min-height: 17vw; font-size: max(3.47vw,var(--font-size-min)); line-height: 1.2; text-align: center; border-radius: 5px; display: flex; align-items: center; } #pageMitsuboshiSearch section.companyList ul.list > li > a article dl.speciality dd br{ display: none; } #pageMitsuboshiSearch section.companyList ul.list > li > nav.contact{ } #pageMitsuboshiSearch section.companyList ul.list > li > nav.contact a.tel{ height: 17.74vw; margin: 0 0; padding: 0 0 0; text-decoration: none; color: #000; border-top: 1px solid #D2D2D2; background: #FFF; display: flex; flex-direction: column; justify-content: center; } #pageMitsuboshiSearch section.companyList ul.list > li > nav.contact a.tel span.tel{ display: table; font-family: "Lato"; font-weight: var(--font-lato-bold); font-size: 6vw; line-height: 1; margin: 0 auto 1vw; padding: 0 0 0 5vw; background: url("../img/mitsuboshi/search/icon.tel.svg") no-repeat left top 0.6vw; background-size: 4.27vw auto; } #pageMitsuboshiSearch section.companyList ul.list > li > nav.contact a.tel span.hour{ display: block; text-align: center; font-size: max(3.47vw,var(--font-size-min)); line-height: 1; color: #85A7BF; } #pageMitsuboshiSearch section.companyList ul.list > li > nav.contact a.inquiry{ height: 17.74vw; padding: 0 0 0 6vw; text-align: center; font-size: 5.33vw; font-weight: var(--font-sans-medium); line-height: 1.4; margin: 0; display: flex; align-items: center; justify-content: center; text-decoration: none; background: #DF9191 url("../img/mitsuboshi/search/btn.icon.letter.svg") no-repeat left 8vw center; background-size: 5vw auto; color: #FFF; } } /* ------------------------------------------------------------------------------ */ @media print, screen and (min-width: 769px) { #pageMitsuboshiCompany{} #pageMitsuboshiCompany header.pageHeader{ height: 390px; background: url("../img/mitsuboshi/company/detail/header.bg.jpg") no-repeat top; padding: 170px 0 0 60px; } #pageMitsuboshiCompany header.pageHeader .title{ margin: 0; padding: 25px 0 25px 28px; border-left: 5px solid #FFF; color: #FFF; font-size: 50px; line-height: 1; font-weight: var(--font-sans-bold); display: block; } #pageMitsuboshiCompany div.panelMain{ background: #F4F5F6; padding: 65px 42px; } #pageMitsuboshiCompany div.panelMain h1{ margin: 0 0px 40px; padding: 0 0 0 20px; border-left: 5px solid #1C4A6D; font-weight: var(--font-sans-bold); font-size: 30px; line-height: 1.6; display: flex; align-items: center; } #pageMitsuboshiCompany div.panelMain section.intro{ display: flex; gap: 40px; margin: 0 0 60px; } #pageMitsuboshiCompany div.panelMain section.intro div.image{ width: 420px; min-width: 420px; } #pageMitsuboshiCompany div.panelMain section.intro div.image img{ width: 100%; } #pageMitsuboshiCompany div.panelMain section.intro div.profile{} #pageMitsuboshiCompany div.panelMain section.intro div.profile h2{ font-size: 21px; line-height: 1.6; margin: 0 0 20px; padding: 20px 0 0 0; position: relative; } #pageMitsuboshiCompany div.panelMain section.intro div.profile h2::before{ content: ''; position: absolute; border-top: 3px solid #1C4A6D; width: 40px; height: 0; top: 0; left: 0; } #pageMitsuboshiCompany div.panelMain section.intro div.profile p{ font-size: 16px; line-height: 1.6; margin: 0; } #pageMitsuboshiCompany div.panelMain section.about{ margin: 0 0 70px; } #pageMitsuboshiCompany div.panelMain section.about h2{ font-size: 21px; line-height: 1.6; margin: 0 0 30px; padding: 0 0 0 0; text-align: center; } #pageMitsuboshiCompany div.panelMain section.about table{ border-collapse: collapse; border-top: 1px solid #DEDEDE; margin: 0 auto; width: 100%; } #pageMitsuboshiCompany div.panelMain section.about table tr th, #pageMitsuboshiCompany div.panelMain section.about table tr td{ border-bottom: 1px solid #DEDEDE; padding: 15px; } #pageMitsuboshiCompany div.panelMain section.about table th{ text-align: left; width: 300px; vertical-align: top; } #pageMitsuboshiCompany div.panelMain section.about table td{} #pageMitsuboshiCompany div.panelMain section.about table td ul.speciality{ list-style: none; margin: 0; padding: 0; display: flex; gap: 10px; } #pageMitsuboshiCompany div.panelMain section.about table td ul.speciality li{ margin: 0; padding: 0 0; border: 2px solid #1C4A6D; color: #1C4A6D; width: 90px; height: 90px; font-size: 16px; line-height: 1.35; border-radius: 5px; display: flex; align-items: center; justify-content: center; text-align: center; background: #FFF; } #pageMitsuboshiCompany div.panelMain section.about table td .tel{ text-decoration: none; } #pageMitsuboshiCompany div.panelMain section.facility{} #pageMitsuboshiCompany div.panelMain section.facility h2{ font-size: 24px; line-height: 1; margin: 0 0 30px; padding: 0 0 0 0; } #pageMitsuboshiCompany div.panelMain section.facility h2 span{ color: #1C4A6D; font-size: 15px; margin: 0 0 0 10px; } #pageMitsuboshiCompany div.panelMain section.facility ul{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 20px 1.3%; } #pageMitsuboshiCompany div.panelMain section.facility ul li{ width: calc(calc(100% - 2.6%) / 3); } #pageMitsuboshiCompany div.panelMain section.facility ul li a{ text-decoration: none; color: #000; background: #FFF; display: block; } #pageMitsuboshiCompany div.panelMain section.facility ul li > a article{ position: relative; height: 100%; padding: 73% 10px 10px 10px; } #pageMitsuboshiCompany div.panelMain section.facility ul li > a h3{ font-size: 17px; line-height: 1.4; margin: 0 0 10px; padding: 0; } #pageMitsuboshiCompany div.panelMain section.facility ul li > a p{ font-size: 16px; line-height: 1.4; margin: 0 0 5px; } #pageMitsuboshiCompany div.panelMain section.facility ul li > a div.image{ position: absolute; top: 0; left: 0; width: 100%; height: 0; padding-top: 68.81%; overflow: hidden; background: #EEE; } #pageMitsuboshiCompany div.panelMain section.facility ul li > a div.image img{ width: 100%; height: 100%; object-fit: cover; display: block; position: absolute; left: 0; top: 0; } #pageMitsuboshiCompany div.panelMain section.facility ul li > nav.contact{} #pageMitsuboshiCompany div.panelMain section.facility ul li > nav.contact a.tel{ height: 100px; display: flex; flex-direction: column; justify-content: center; background: #FFF; text-decoration: none; border-top: 2px solid #D2D2D2; } #pageMitsuboshiCompany div.panelMain section.facility ul li > nav.contact a.tel span.tel{ color: #000; font-family: "Lato"; font-weight: var(--font-lato-bold); font-size: 36px; line-height: 1; display: table; margin: 0 auto 7px; padding: 0 0 0 40px; background: url("../img/mitsuboshi/search/icon.tel.svg") no-repeat left top 2px; } #pageMitsuboshiCompany div.panelMain section.facility ul li > nav.contact a.tel span.hour{ display: block; font-size: 15px; line-height: 1; text-align: center; color: #85A7BF; } #pageMitsuboshiCompany div.panelMain section.facility ul li > nav.contact a.inquiry{ height: 100px; padding: 0 0 0 0px; color: #FFF; font-weight: var(--font-sans-medium); font-size: 21px; line-height: 1.5; text-align: center; display: flex; justify-content: center; align-items: center; text-decoration: none; background: #DF9191 url("../img/mitsuboshi/search/btn.icon.letter.svg") no-repeat left 12% center; } } @media screen and (max-width: 768px) { #pageMitsuboshiCompany{} #pageMitsuboshiCompany header.pageHeader{ border-bottom: 4vw solid #1C4A6D; background: url("../img/mitsuboshi/company/detail/header.bg.sp.jpg?") no-repeat center top; background-size: 100% auto; height: 60.66vw; margin: 0 0 0; padding: 0vw 0 0vw 0; position: relative; display: flex; justify-content: center; align-items: center; } #pageMitsuboshiCompany header.pageHeader .title{ margin: 0; padding: 0; color: #FFF; font-size: 6.67vw; line-height: 1.3; font-weight: var(--font-sans-bold); display: block; text-align: center; } #pageMitsuboshiCompany div.panelMain{ background: #F4F5F6; padding: 5vw 5.33vw; } #pageMitsuboshiCompany div.panelMain h1{ margin: 0 0px 5vw; padding: 0 0 0 3vw; border-left: 5px solid #1C4A6D; font-weight: var(--font-sans-bold); font-size: 5vw; line-height: 1.6; display: flex; align-items: center; } #pageMitsuboshiCompany div.panelMain section.intro{} #pageMitsuboshiCompany div.panelMain section.intro div.image{ margin: 0 0 5vw; } #pageMitsuboshiCompany div.panelMain section.intro div.image img{ width: 100%; } #pageMitsuboshiCompany div.panelMain section.intro div.profile{ margin: 0 0 7vw; } #pageMitsuboshiCompany div.panelMain section.intro div.profile h2{ font-size: 4vw; line-height: 1.6; margin: 0 0 3vw; padding: 3vw 0 0 0; position: relative; } #pageMitsuboshiCompany div.panelMain section.intro div.profile h2::before{ content: ''; position: absolute; border-top: 3px solid #1C4A6D; width: 7vw; height: 0; top: 0; left: 0; } #pageMitsuboshiCompany div.panelMain section.intro div.profile p{ font-size: max(3.47vw,var(--font-size-min)); line-height: 1.6; margin: 0; } #pageMitsuboshiCompany div.panelMain section.about{ margin: 0 0 10vw; } #pageMitsuboshiCompany div.panelMain section.about h2{ font-size: 4vw; line-height: 1.6; margin: 0 0 5vw; padding: 0 0 0 0; text-align: center; } #pageMitsuboshiCompany div.panelMain section.about table{ border-collapse: collapse; border-top: 1px solid #DEDEDE; margin: 0 auto; width: 100%; } #pageMitsuboshiCompany div.panelMain section.about table tr th, #pageMitsuboshiCompany div.panelMain section.about table tr td{ border-bottom: 1px solid #DEDEDE; padding: 3vw; font-size: max(3.47vw,var(--font-size-min)); } #pageMitsuboshiCompany div.panelMain section.about table th{ text-align: left; width: 25vw; min-width: 25vw; vertical-align: top; } #pageMitsuboshiCompany div.panelMain section.about table td{} #pageMitsuboshiCompany div.panelMain section.about table td ul.speciality{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2vw; } #pageMitsuboshiCompany div.panelMain section.about table td ul.speciality li{ margin: 0; padding: 0 0; border: 2px solid #1C4A6D; color: #1C4A6D; width: 17vw; height: 17vw; font-size: max(3.47vw,var(--font-size-min)); line-height: 1.35; border-radius: 5px; display: flex; align-items: center; justify-content: center; text-align: center; background: #FFF; } #pageMitsuboshiCompany div.panelMain section.about table td .tel{ text-decoration: none; } #pageMitsuboshiCompany div.panelMain section.facility{ margin: 0 0 10vw; } #pageMitsuboshiCompany div.panelMain section.facility h2{ font-size: 4vw; line-height: 1; margin: 0 0 3vw; padding: 0 0 0 0; } #pageMitsuboshiCompany div.panelMain section.facility h2 span{ color: #1C4A6D; font-size: max(3.47vw,var(--font-size-min)); margin: 0 0 0 2vw; } #pageMitsuboshiCompany div.panelMain section.facility ul{ list-style: none; margin: 0; padding: 0; display: flex; gap: 4vw; flex-wrap: wrap; } #pageMitsuboshiCompany div.panelMain section.facility ul li{ width: 42vw; } #pageMitsuboshiCompany div.panelMain section.facility ul li > a{ text-decoration: none; color: #000; background: #FFF; display: block; } #pageMitsuboshiCompany div.panelMain section.facility ul li > a article{ position: relative; height: 100%; padding: 36vw 3vw 3vw 3vw; } #pageMitsuboshiCompany div.panelMain section.facility ul li > a h3{ font-size: max(3.47vw,var(--font-size-min)); line-height: 1.4; margin: 0 0 3vw; padding: 0; } #pageMitsuboshiCompany div.panelMain section.facility ul li > a p{ font-size: max(3.47vw,var(--font-size-min)); line-height: 1.4; margin: 0 0 1vw; } #pageMitsuboshiCompany div.panelMain section.facility ul li > a div.image{ position: absolute; top: 0; left: 0; width: 100%; height: 34vw; overflow: hidden; background: #EEE; } #pageMitsuboshiCompany div.panelMain section.facility ul li > a div.image img{ width: 100%; height: 100%; object-fit: cover; display: block; } #pageMitsuboshiCompany div.panelMain section.facility ul li > nav.contact{ } #pageMitsuboshiCompany div.panelMain section.facility ul li > nav.contact a.tel{ height: 17.74vw; margin: 0 0; padding: 0 0 0 0; text-decoration: none; color: #000; border-top: 1px solid #D2D2D2; background: #FFF; display: flex; flex-direction: column; justify-content: center; } #pageMitsuboshiCompany div.panelMain section.facility ul li > nav.contact a.tel span.tel{ display: table; font-family: "Lato"; font-weight: var(--font-lato-bold); font-size: 5vw; line-height: 1; margin: 0 auto 1vw; padding: 0 0 0 5vw; background: url("../img/mitsuboshi/search/icon.tel.svg") no-repeat left top 0.6vw; background-size: 4.27vw auto; } #pageMitsuboshiCompany div.panelMain section.facility ul li > nav.contact a.tel span.hour{ display: block; text-align: center; font-size: max(3.47vw,var(--font-size-min)); line-height: 1; color: #85A7BF; } #pageMitsuboshiCompany div.panelMain section.facility ul li > nav.contact a.inquiry{ height: 17.74vw; padding: 0 0 0 4vw; text-align: center; font-size: 4.33vw; font-weight: var(--font-sans-medium); line-height: 1.4; margin: 0; display: flex; align-items: center; justify-content: center; text-decoration: none; background: #DF9191 url("../img/mitsuboshi/search/btn.icon.letter.svg") no-repeat left 3vw center; background-size: 5vw auto; color: #FFF; } } /* ------------------------------------------------------------------------------ */ @media print, screen and (min-width: 769px) { #pageBiz{} #pageBiz nav.intro{ padding: 150px 0 52px 0; margin: 0 0 52px; } #pageBiz nav.intro{ background: #F3F5F7 url("../img/biz/nav.intro.bg.png") no-repeat center bottom; } #pageBiz nav.intro ul.menu{ list-style: none; margin: 0 30px; padding: 0; display: flex; justify-content: space-between; gap: 0 30px; max-width: 1029px; } #pageBiz nav.intro ul.menu > li{ max-width: 323px; width: 33%; } #pageBiz nav.intro ul.menu > li section{ position: relative; } #pageBiz nav.intro ul.menu > li.i1 section{ border-bottom: 5px solid #BF2424; } #pageBiz nav.intro ul.menu > li.i2 section{ border-bottom: 5px solid #D9A62E; } #pageBiz nav.intro ul.menu > li.i3 section{ border-bottom: 5px solid #1C4A6D; } #pageBiz nav.intro ul.menu > li section h2{ margin: 0 0 158px; padding: 0; line-height: 1; height: 56px; color: #FFF; font-size: 18px; display: flex; justify-content: center; align-items: center; } #pageBiz nav.intro ul.menu > li.i1 section h2{ background: #BF2424; } #pageBiz nav.intro ul.menu > li.i2 section h2{ background: #D9A62E; font-size: 17px; } #pageBiz nav.intro ul.menu > li.i3 section h2{ background: #1C4A6D; } #pageBiz nav.intro ul.menu > li.i1 section{ background: #FFF url("../img/biz/nav.intro.i1.image.jpg?") no-repeat center top 56px; background-size: auto 190px; } #pageBiz nav.intro ul.menu > li.i2 section{ background: #FFF url("../img/biz/nav.intro.i2.image.jpg") no-repeat center top 56px; background-size: auto 190px; } #pageBiz nav.intro ul.menu > li.i3 section{ background: #FFF url("../img/biz/nav.intro.i3.image.jpg") no-repeat center top 56px; background-size: auto 190px; } #pageBiz nav.intro ul.menu > li section p{ display: flex; align-items: center; justify-content: center; text-align: center; font-weight: bold; font-size: 16px; line-height: 1.6; margin: 0; padding: 47px 0 35px; height: 115px; } #pageBiz nav.intro ul.menu > li section a{ position: absolute; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; text-indent: 100%; overflow: hidden; white-space: nowrap; display: block; pointer-events: none; } #pageBiz nav.intro ul.menu > li.i1 section a{ background: url("../img/biz/nav.intro.arrow.i1.down.svg") no-repeat center bottom 10px; background-size: 16px auto; } #pageBiz nav.intro ul.menu > li.i2 section a{ background: url("../img/biz/nav.intro.arrow.i2.down.svg") no-repeat center bottom 10px; background-size: 16px auto; } #pageBiz nav.intro ul.menu > li.i3 section a{ background: url("../img/biz/nav.intro.arrow.i3.down.svg") no-repeat center bottom 10px; background-size: 16px auto; } #pageBiz nav.intro ul.menu > li.i1 section.isOpen a{ background: url("../img/biz/nav.intro.arrow.i1.up.svg") no-repeat center bottom 5px; background-size: 16px auto; } #pageBiz nav.intro ul.menu > li.i2 section.isOpen a{ background: url("../img/biz/nav.intro.arrow.i2.up.svg") no-repeat center bottom 5px; background-size: 16px auto; } #pageBiz nav.intro ul.menu > li.i3 section.isOpen a{ background: url("../img/biz/nav.intro.arrow.i3.up.svg") no-repeat center bottom 5px; background-size: 16px auto; } #pageBiz nav.intro ul.menu > li nav{ display: block !important; } #pageBiz nav.intro ul.menu > li nav ul{ background: #FFF; list-style: none; margin: 0; padding: 0; } #pageBiz nav.intro ul.menu > li nav ul li{ border-bottom: 1px solid #AAA; } #pageBiz nav.intro ul.menu > li nav ul li a{ display: block; line-height: 1.5; font-size: 16px; padding: 7px 10px; text-decoration: none; color: #000; } #pageBiz div.panelMain{} #pageBiz div.panelMain section.sec1{ margin: 0 0 100px 0; padding: 0 42px; background: url("../img/biz/sec1.bg.svg") no-repeat left -25px top -70px; position: relative; } #pageBiz div.panelMain section.sec1 h2{ font-size: 30px; line-height: 1.4; font-weight: var(--font-sans-black); margin: 0 0 35px; padding: 15px 0 15px 27px; border-left: 5px solid #1C4A6D; position: relative; } #pageBiz div.panelMain section.sec1 p{ margin: 0 0 35px; font-size: 16px; line-height: 2.3; width: 535px; } #pageBiz div.panelMain section.sec1 a.link2basis{ background: url("../img/biz/sec1.link2basis.png") no-repeat; width: 488px; height: 70px; display: block; margin: 0 0 20px; } #pageBiz div.panelMain section.sec1 a.link2pregio{ background: url("../img/biz/sec1.link2pregio.png?1") no-repeat; width: 488px; height: 70px; display: block; } #pageBiz div.panelMain section.sec1::after{ content: ''; background: url("../img/biz/sec1.figure.jpg?1") no-repeat; width: 771px; height: 552px; display: block; z-index: -1; position: absolute; right: -70px; bottom: -100px; } #pageBiz div.panelMain section.sec2{ margin: 0 0 70px 0; padding: 0 42px; } #pageBiz div.panelMain section.sec2 h2{ font-size: 30px; line-height: 1.4; font-weight: var(--font-sans-black); margin: 0; padding: 15px 0 15px 27px; border-left: 5px solid #1C4A6D; position: relative; } #pageBiz div.panelMain section.sec2 p.intro{ margin: 0 0 50px; padding: 15px 0 15px 28px; border-left: 5px solid #E4E4E4; font-size: 18px; line-height: 1.6; } #pageBiz div.panelMain section.sec2 section{ padding: 0 0 0 0; margin: 0 0 60px; } #pageBiz div.panelMain section.sec2 section h3{ font-size: 21px; line-height: 1; margin: 0 0 30px; padding: 5px 0 6px 28px; border-left: 4px solid #707070; } #pageBiz div.panelMain section.sec2 section h4{ font-size: 19px; line-height: 1; margin: 0 0 30px 33px; padding: 0; font-weight: normal; } #pageBiz div.panelMain section.sec2 section p{ font-size: 15px; line-height: 1.9; margin: 0 0 30px 33px; padding: 0; } #pageBiz div.panelMain section.sec2 section ul{ list-style: none; margin: 0; padding: 0; } #pageBiz div.panelMain section.sec2 section a.more{ background: url("../img/biz/sec2.icon.right.arrow.red.svg") no-repeat right 12px center; background-size: 10px auto; display: flex; justify-content: center; align-items: center; color: #BF2424; border-radius: 20px; border: 1px solid #BF2424; margin: 0 auto; text-decoration: none; width: 175px; height: 29px; line-height: 1; font-size: 15px; } #pageBiz div.panelMain section.sec2 section.s1{ background: url("../img/biz/sec2.s1.image.jpg?2") no-repeat right bottom; background-size: 440px auto; min-height: 340px; margin-bottom: 30px; } #pageBiz div.panelMain section.sec2 section.s1 p{ width: 440px; } #pageBiz div.panelMain section.sec2 section.s2 ul{ display: flex; justify-content: space-between; } #pageBiz div.panelMain section.sec2 section.s2 ul li{ width: 440px; padding: 0 0 0 0; } #pageBiz div.panelMain section.sec2 section.s2 ul li span{ text-align: center; margin: 0 0 20px; display: block; font-weight: bold; font-size: 18px; line-height: 1.6; } #pageBiz div.panelMain section.sec2 section.s2 ul li.i1::before{ content: ''; display: block; height: 260px; margin: 0 0 15px; background: url("../img/biz/sec2.s2.i1.image.jpg?") no-repeat center center; background-size: cover; } #pageBiz div.panelMain section.sec2 section.s2 ul li.i2::before{ content: ''; display: block; height: 260px; margin: 0 0 15px; background: url("../img/biz/sec2.s2.i2.image.jpg?") no-repeat center center; background-size: cover; } #pageBiz div.panelMain section.sec2 section.s3{ background: url("../img/biz/sec2.s3.image.jpg?") no-repeat left bottom; background-size: 440px auto; min-height: 340px; } #pageBiz div.panelMain section.sec2 section.s3 h4{ width: 440px; margin: 0 0 30px auto; } #pageBiz div.panelMain section.sec2 section.s3 p{ width: 440px; margin: 0 0 0 auto; } #pageBiz div.panelMain section.sec2 section.s4 ul{ display: flex; justify-content: space-between; } #pageBiz div.panelMain section.sec2 section.s4 ul li{ width: 440px; padding: 0 0 0 0; } #pageBiz div.panelMain section.sec2 section.s4 ul li span{ text-align: center; margin: 0 0 20px; display: block; font-weight: bold; font-size: 18px; line-height: 1.6; } #pageBiz div.panelMain section.sec2 section.s4 ul li.i1::before{ content: ''; display: block; height: 260px; margin: 0 0 15px; background: url("../img/biz/sec2.s4.i1.image.jpg?") no-repeat center center; background-size: cover; } #pageBiz div.panelMain section.sec2 section.s4 ul li.i2::before{ content: ''; display: block; height: 260px; margin: 0 0 15px; background: url("../img/biz/sec2.s4.i2.image.jpg?") no-repeat center center; background-size: cover; } #pageBiz div.panelMain section.sec2 section.s5{ background: url("../img/biz/sec2.s5.image.jpg?") no-repeat right bottom; background-size: 440px auto; min-height: 340px; margin-bottom: 30px; } #pageBiz div.panelMain section.sec2 section.s5 p{ width: 440px; } #pageBiz div.panelMain section.sec2 section.s6 ul{ display: flex; justify-content: space-between; } #pageBiz div.panelMain section.sec2 section.s6 ul li{ width: 440px; padding: 0 0 0 0; } #pageBiz div.panelMain section.sec2 section.s6 ul li span{ text-align: center; margin: 0 0 20px; display: block; font-weight: bold; font-size: 18px; line-height: 1.6; } #pageBiz div.panelMain section.sec2 section.s6 ul li.i1::before{ content: ''; display: block; height: 260px; margin: 0 0 15px; background: url("../img/biz/sec2.s6.i1.image.jpg?") no-repeat center center; background-size: cover; } #pageBiz div.panelMain section.sec2 section.s6 ul li.i2::before{ content: ''; display: block; height: 260px; margin: 0 0 15px; background: url("../img/biz/sec2.s6.i2.image.jpg?") no-repeat center center; background-size: cover; } #pageBiz div.panelMain section.sec4{ margin: 0 0 55px 0; padding: 0 42px; } #pageBiz div.panelMain section.sec4 h2{ font-size: 30px; line-height: 1.4; font-weight: var(--font-sans-black); margin: 0 0 35px; padding: 10px 0 10px 27px; border-left: 5px solid #1C4A6D; } #pageBiz div.panelMain section.sec4 ul{ list-style: none; margin: 0 0 48px -2%; padding: 0; display: flex; flex-wrap: wrap; } #pageBiz div.panelMain section.sec4 ul li{ width: 31.3%; margin-left: 2%; background: #FFF; position: relative; } #pageBiz div.panelMain section.sec4 ul li a{ text-decoration: none; display: block; height: 100%; padding-top: 174px; color: #000; } #pageBiz div.panelMain section.sec4 ul li a div.image{ position: absolute; top: 0; left: 0; width: 100%; height: 174px; background: #EEE; overflow: hidden; } #pageBiz div.panelMain section.sec4 ul li a div.image img{ object-fit: cover; width: 100%; height: 100%; } #pageBiz div.panelMain section.sec4 ul li a .title{ margin: 15px 15px 15px 15px; padding: 0; font-size: 14px; line-height: 1.5; font-weight: var(--font-sans-bold); } #pageBiz div.panelMain section.sec4 ul li a p{ font-size: 12px; line-height: 1.5; margin: 0 15px 15px; color: #707070; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } #pageBiz div.panelMain section.sec4 ul li a div.info{ display: flex; justify-content: space-between; margin: 0 15px 15px; align-items: center; } #pageBiz div.panelMain section.sec4 ul li a div.info span.date{ color: #707070; font-size: 12px; line-height: 1.3; } #pageBiz div.panelMain section.sec4 ul li a div.info span.category{ color: #FFF; font-size: 12px; line-height: 1.3; padding: 3px 10px 5px; background: #E2AF20; display: inline-block; } #pageBiz div.panelMain section.sec4 a.more{ display: block; margin: 0 auto; width: 280px; height: 60px; background: #FFF url("../img/common/btn.icon.arrow.01.svg") no-repeat right 28px center; font-weight: var(--font-sans-medium); line-height: 53px; text-decoration: none; text-align: center; font-size: 18px; color: #BF2424; border: 2px solid #BF2424; border-radius: 30px; } #pageBiz div.panelMain section.sec5{ margin: 0 0 0px; padding: 40px; height: 443px; background: url("../img/biz/sec5.bg.png") no-repeat left -40px top -110px; } #pageBiz div.panelMain section.sec5 div.inner{ height: 363px; padding: 62px 0 0 0; background: rgba(255,255,255,0.64); } #pageBiz div.panelMain section.sec5 h2{ font-size: 32px; line-height: 1.3; font-weight: var(--font-sans-bold); margin: 0 0 20px; padding: 0; text-align: center; color: #1C4A6D; } #pageBiz div.panelMain section.sec5 p{ text-align: center; margin: 0 0 48px; } #pageBiz div.panelMain div.contact{ display: flex; justify-content: space-between; align-items: center; margin: -140px auto 200px; max-width: 982px; padding: 10px 10px; border-radius: 5px; } #pageBiz div.panelMain div.contact.sticky{ position: -webkit-sticky; position: sticky; bottom: 20px; z-index: 100; background: #FBFBFC; } #pageBiz div.panelMain div.contact a.tel{ background: url("../img/biz/sec5.tel.svg?") no-repeat; width: 275px; height: 48px; display: block; white-space: nowrap; text-indent: 100%; overflow: hidden; } #pageBiz div.panelMain div.contact a.inquiry{ display: block; padding: 20px 0 0 25px; font-size: 20px; line-height: 1; font-weight: var(--font-sans-bold); background: #BF2424 url("../img/biz/sec5.icon.letter.svg") no-repeat left 30px center; text-decoration: none; color: #FFF; border-radius: 32px; width: 323px; height: 63px; text-align: center; } #pageBiz div.panelMain div.contact a.line{ display: block; padding: 20px 0 0 10px; font-size: 20px; line-height: 1; font-weight: var(--font-sans-bold); background: #06C755 url("../img/biz/sec5.icon.line.svg") no-repeat left 30px center; background-size: 32px auto; text-decoration: none; color: #FFF; border-radius: 32px; width: 323px; height: 63px; text-align: center; } } @media screen and (max-width: 768px) { #pageBiz{} #pageBiz nav.intro{ position: relative; overflow: hidden; padding: 8vw 0 15vw 0; background: #F4F5F6 url("../img/biz/nav.intro.bg.sp.svg") no-repeat center bottom; background-size: 300% auto; } #pageBiz nav.intro ul.menu{ list-style: none; margin: 0 auto; padding: 0; gap: 7.69vw 0; width: 89.74vw; display: flex; flex-direction: column; } #pageBiz nav.intro ul.menu > li{} #pageBiz nav.intro ul.menu > li section{ height: 50.77vw; padding: 4.23vw 4.23vw 8vw; border-radius: 5px; position: relative; } #pageBiz nav.intro ul.menu > li section.isOpen{ border-radius: 5px 5px 0 0; } #pageBiz nav.intro ul.menu > li.i1 section{ background: #BF2424; } #pageBiz nav.intro ul.menu > li.i2 section{ background: #D9A62E; } #pageBiz nav.intro ul.menu > li.i3 section{ background: #1C4A6D; } #pageBiz nav.intro ul.menu > li section h2{ margin: 0; padding: 0; line-height: 1.4; height: 14.87vw; color: #FFF; display: flex; justify-content: center; align-items: center; font-size: 6.5vw; text-align: center; } #pageBiz nav.intro ul.menu > li section p{ display: flex; align-items: center; justify-content: center; text-align: center; font-size: 4.1vw; line-height: 1.8; margin: 3.23vw 0 0 0; padding: 0; height: 17vw; color: #FFF; } #pageBiz nav.intro ul.menu > li section a{ position: absolute; bottom: 0; left: 0; right: 0; width: 100%; text-decoration: none; font-weight: var(--font-sans-bold); font-size: 3.83vw; display: flex; align-items: flex-end; padding-bottom: 2.5vw; padding-right: 6vw; justify-content: center; text-align: center; height: 100%; } #pageBiz nav.intro ul.menu > li.i1 section a{ color: #FFF; background: url("../img/biz/nav.intro.arrow.white.down.svg") no-repeat right calc(50% - 10vw) bottom 3.8vw; background-size: 4vw auto; } #pageBiz nav.intro ul.menu > li.i2 section a{ color: #FFF; background: url("../img/biz/nav.intro.arrow.white.down.svg") no-repeat right calc(50% - 10vw) bottom 3.8vw; background-size: 4vw auto; } #pageBiz nav.intro ul.menu > li.i3 section a{ color: #FFF; background: url("../img/biz/nav.intro.arrow.white.down.svg") no-repeat right calc(50% - 10vw) bottom 3.8vw; background-size: 4vw auto; } #pageBiz nav.intro ul.menu > li.i1 section.isOpen a{ background: url("../img/biz/nav.intro.arrow.white.up.svg") no-repeat right calc(50% - 10vw) bottom 2.27vw; background-size: 4vw auto; } #pageBiz nav.intro ul.menu > li.i2 section.isOpen a{ background: url("../img/biz/nav.intro.arrow.white.up.svg") no-repeat right calc(50% - 10vw) bottom 2.27vw; background-size: 4vw auto; } #pageBiz nav.intro ul.menu > li.i3 section.isOpen a{ background: url("../img/biz/nav.intro.arrow.white.up.svg") no-repeat right calc(50% - 10vw) bottom 2.27vw; background-size: 4vw auto; } #pageBiz nav.intro ul.menu > li nav{ display: none; } #pageBiz nav.intro ul.menu > li nav ul{ background: #FFF; list-style: none; margin: 0; padding: 0; } #pageBiz nav.intro ul.menu > li nav ul li{ border-bottom: 1px solid #AAA; } #pageBiz nav.intro ul.menu > li nav ul li a{ display: block; line-height: 1.5; font-size: 3.59vw; padding: 2vw 1.8vw; text-decoration: none; color: #000; } #pageBiz div.panelMain{ background: #FFF; padding: 12vw 0 0 0; } #pageBiz div.panelMain section.sec1{ margin: 0 0 13vw 0; padding: 0 5.33vw; background: url("../img/biz/sec1.figure.sp.jpg?2") no-repeat left -4.8vw top -16vw; background-size: 132.53vw auto; } #pageBiz div.panelMain section.sec1 h2{ font-size: 5.33vw; line-height: 1.4; font-weight: var(--font-sans-bold); margin: 0 0 65vw; padding: 1vw 0 1vw 4vw; border-left: 5px solid #1C4A6D; } #pageBiz div.panelMain section.sec1 p{ margin: 0 0 7vw; font-size: max(3.47vw,var(--font-size-min)); line-height: 2; } #pageBiz div.panelMain section.sec1 a.link2basis{ background: url("../img/biz/sec1.link2basis.sp.png") no-repeat; background-size: 100% auto; height: 12.8vw; display: block; margin: 0 0 5vw; } #pageBiz div.panelMain section.sec1 a.link2pregio{ background: url("../img/biz/sec1.link2pregio.sp.png?1") no-repeat; background-size: 100% auto; height: 12.8vw; display: block; } #pageBiz div.panelMain section.sec2{ margin: 0 0 13vw 0; padding: 0 5.33vw; } #pageBiz div.panelMain section.sec2 h2{ font-size: 5.33vw; line-height: 1.4; font-weight: var(--font-sans-black); margin: 0; padding: 1vw 0 1vw 4vw; border-left: 5px solid #1C4A6D; position: relative; } #pageBiz div.panelMain section.sec2 p.intro{ margin: 0 0 7vw; padding: 1vw 0 1vw 5vw; border-left: 5px solid #E4E4E4; font-size: max(3.47vw,var(--font-size-min)); line-height: 1.6; } #pageBiz div.panelMain section.sec2 section{ padding: 0 0 0 0; margin: 0 0 10vw; } #pageBiz div.panelMain section.sec2 section h3{ font-size: max(4vw,var(--font-size-min)); line-height: 1; margin: 0 0 5vw; padding: 1vw 0 1vw 5vw; border-left: 4px solid #707070; } #pageBiz div.panelMain section.sec2 section h4{ font-size: max(3.47vw,var(--font-size-min)); line-height: 1; margin: 0 0 5vw 0; padding: 0; font-weight: normal; } #pageBiz div.panelMain section.sec2 section p{ font-size: max(3.47vw,var(--font-size-min)); line-height: 1.9; margin: 0 0 5vw 0; padding: 0; } #pageBiz div.panelMain section.sec2 section ul{ list-style: none; margin: 0; padding: 0; } #pageBiz div.panelMain section.sec2 section a.more{ background: url("../img/biz/sec2.icon.right.arrow.red.svg") no-repeat right 2vw center; background-size: 2.8vw auto; display: flex; justify-content: center; align-items: center; color: #BF2424; border-radius: 4vw; border: 1px solid #BF2424; margin: 0 auto; text-decoration: none; width: 42vw; height: 7vw; line-height: 1; font-size: max(3.47vw,var(--font-size-min)); } #pageBiz div.panelMain section.sec2 section.s1{ background: url("../img/biz/sec2.s1.image.jpg?") no-repeat center top 10vw; background-size: 100% auto; } #pageBiz div.panelMain section.sec2 section.s1 h3{ margin-bottom: 70vw; } #pageBiz div.panelMain section.sec2 section.s2 ul{} #pageBiz div.panelMain section.sec2 section.s2 ul li{ padding: 0 0 0 0; margin: 0 0 8vw; } #pageBiz div.panelMain section.sec2 section.s2 ul li span{ text-align: center; margin: 0 0 5vw; line-height: 1.6; display: block; font-weight: bold; font-size: max(3.47vw,var(--font-size-min)); } #pageBiz div.panelMain section.sec2 section.s2 ul li.i1::before{ content: ''; display: block; height: 60vw; margin: 0 0 3vw; background: url("../img/biz/sec2.s2.i1.image.jpg") no-repeat center center; background-size: cover; } #pageBiz div.panelMain section.sec2 section.s2 ul li.i2::before{ content: ''; display: block; height: 60vw; margin: 0 0 3vw; background: url("../img/biz/sec2.s2.i2.image.jpg") no-repeat center center; background-size: cover; } #pageBiz div.panelMain section.sec2 section.s3{ background: url("../img/biz/sec2.s3.image.jpg") no-repeat center top 10vw; background-size: 100% auto; } #pageBiz div.panelMain section.sec2 section.s3 h3{ margin-bottom: 70vw; } #pageBiz div.panelMain section.sec2 section.s3 p{} #pageBiz div.panelMain section.sec2 section.s4 ul{} #pageBiz div.panelMain section.sec2 section.s4 ul li{ padding: 0 0 0 0; margin: 0 0 8vw; } #pageBiz div.panelMain section.sec2 section.s4 ul li span{ text-align: center; margin: 0 0 5vw; line-height: 1.6; display: block; font-weight: bold; font-size: max(3.47vw,var(--font-size-min)); } #pageBiz div.panelMain section.sec2 section.s4 ul li.i1::before{ content: ''; display: block; height: 60vw; margin: 0 0 3vw; background: url("../img/biz/sec2.s4.i1.image.jpg") no-repeat center center; background-size: cover; } #pageBiz div.panelMain section.sec2 section.s4 ul li.i2::before{ content: ''; display: block; height: 60vw; margin: 0 0 3vw; background: url("../img/biz/sec2.s4.i2.image.jpg") no-repeat center center; background-size: cover; } #pageBiz div.panelMain section.sec2 section.s5{ background: url("../img/biz/sec2.s5.image.jpg") no-repeat center top 10vw; background-size: 100% auto; } #pageBiz div.panelMain section.sec2 section.s5 h3{ margin-bottom: 70vw; } #pageBiz div.panelMain section.sec2 section.s5 p{} #pageBiz div.panelMain section.sec2 section.s6 ul{} #pageBiz div.panelMain section.sec2 section.s6 ul li{ padding: 0 0 0 0; margin: 0 0 8vw; } #pageBiz div.panelMain section.sec2 section.s6 ul li span{ text-align: center; margin: 0 0 5vw; line-height: 1.6; display: block; font-weight: bold; font-size: max(3.47vw,var(--font-size-min)); } #pageBiz div.panelMain section.sec2 section.s6 ul li.i1::before{ content: ''; display: block; height: 60vw; margin: 0 0 3vw; background: url("../img/biz/sec2.s6.i1.image.jpg") no-repeat center center; background-size: cover; } #pageBiz div.panelMain section.sec2 section.s6 ul li.i2::before{ content: ''; display: block; height: 60vw; margin: 0 0 3vw; background: url("../img/biz/sec2.s6.i2.image.jpg") no-repeat center center; background-size: cover; } #pageBiz div.panelMain section.sec3{ margin: 0 0 10vw 0; padding: 0 5.33vw 10vw; position: relative; } #pageBiz div.panelMain section.sec3::before{ content: ''; width: 100%; height: 61.47vw; background: #F4F5F6; position: absolute; bottom: 0; left: 0; } #pageBiz div.panelMain section.sec3 h2{ font-size: 5.33vw; line-height: 1.4; font-weight: var(--font-sans-bold); margin: 0; padding: 1vw 0 1vw 4vw; border-left: 5px solid #1C4A6D; position: relative; } #pageBiz div.panelMain section.sec3 p.intro{ margin: 0 0 6vw; padding: 2vw 0 2vw 4vw; border-left: 5px solid #E4E4E4; font-size: max(3.47vw,var(--font-size-min)); line-height: 1.6; } #pageBiz div.panelMain section.sec3 span.book{ background: url("../img/biz/sec3.book.sp.jpg?2024") no-repeat; background-size: 100% auto; width: 52.67vw; height: 88.41vw; display: block; margin: 0 auto 7vw; position: relative; } #pageBiz div.panelMain section.sec3 a.more{ display: block; margin: 0 auto; width: 58.67vw; height: 12vw; background: #FFF url("../img/common/btn.icon.arrow.01.sp.svg") no-repeat right 4vw center; background-size: 1.6vw auto; font-weight: var(--font-sans-medium); line-height: 11vw; text-decoration: none; text-align: center; font-size: max(3.47vw,var(--font-size-min)); color: #BF2424; border: 2px solid #BF2424; border-radius: 6vw; position: relative; } #pageBiz div.panelMain section.sec4{ margin: 0 0 10vw 0; padding: 0 5.33vw; } #pageBiz div.panelMain section.sec4 h2{ font-size: 5.33vw; line-height: 1.4; font-weight: var(--font-sans-bold); margin: 0 0 10vw; padding: 1vw 0 1vw 4vw; border-left: 5px solid #1C4A6D; position: relative; } #pageBiz div.panelMain section.sec4 div.tns-controls{ z-index: 10; position: relative; } #pageBiz div.panelMain section.sec4 div.tns-controls button:nth-of-type(1){ background: url("../img/siteTop/box05.slide.ctrl.prev.sp.svg") no-repeat; background-size: 100% auto; position: absolute; top: -13vw; right: 11vw; width: 10.8vw; height: 10.8vw; border: none; overflow: hidden; white-space: nowrap; text-indent: 100%; padding: 0; margin: 0; } #pageBiz div.panelMain section.sec4 div.tns-controls button:nth-of-type(2){ background: url("../img/siteTop/box05.slide.ctrl.next.sp.svg") no-repeat; background-size: 100% auto; position: absolute; top: -13vw; right: 0vw; width: 10.8vw; height: 10.8vw; border: none; overflow: hidden; white-space: nowrap; text-indent: 100%; padding: 0; margin: 0; } #pageBiz div.panelMain section.sec4 ul{ list-style: none; margin: 0 0 5vw 0; padding: 0; display: flex; } #pageBiz div.panelMain section.sec4 ul li{ margin: 0 4vw 0 0; background: #FFF; position: relative; } #pageBiz div.panelMain section.sec4 ul li a{ text-decoration: none; display: block; height: 100%; color: #000; } #pageBiz div.panelMain section.sec4 ul li article{ padding-top: 30vw; } #pageBiz div.panelMain section.sec4 ul li a div.image{ position: absolute; top: 0; left: 0; width: 100%; height: 30vw; background: #EEE; overflow: hidden; } #pageBiz div.panelMain section.sec4 ul li a div.image img{ object-fit: cover; width: 100%; height: 100%; } #pageBiz div.panelMain section.sec4 ul li a .title{ margin: 3vw 3vw 3vw 3vw; padding: 0; font-size: max(3.47vw,var(--font-size-min)); line-height: 1.5; font-weight: var(--font-sans-bold); } #pageBiz div.panelMain section.sec4 ul li a p{ font-size: max(3.47vw,var(--font-size-min)); line-height: 1.5; margin: 0 3vw 3vw; color: #707070; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } #pageBiz div.panelMain section.sec4 ul li a div.info{ margin: 0 0 3vw; } #pageBiz div.panelMain section.sec4 ul li a div.info span.date{ color: #707070; font-size: max(3.47vw,var(--font-size-min)); line-height: 1.3; display: block; margin: 0 3vw 3vw; } #pageBiz div.panelMain section.sec4 ul li a div.info span.category{ color: #FFF; font-size: max(3.47vw,var(--font-size-min)); line-height: 1.3; padding: 1vw 3vw; background: #E2AF20; display: block; } #pageBiz div.panelMain section.sec4 a.more{ display: block; margin: 0 auto; width: 35.73vw; height: 9.33vw; background: #FFF url("../img/common/btn.icon.arrow.01.sp.svg") no-repeat right 4vw center; background-size: 1.3vw auto; font-weight: var(--font-sans-medium); line-height: 8vw; text-decoration: none; text-align: center; font-size: max(3.47vw,var(--font-size-min)); color: #BF2424; border: 2px solid #BF2424; border-radius: 5vw; } #pageBiz div.panelMain section.sec5{ margin: 0 0 0vw; padding: 5.33vw 5.33vw 0; height: 111vw; background: url("../img/biz/sec5.bg.sp.png") no-repeat center top -16vw; background-size: 146.13vw auto; } #pageBiz div.panelMain section.sec5 div.inner{ height: 91.6vw; padding: 7vw 0 0 0; background: rgba(255,255,255,0.64); } #pageBiz div.panelMain section.sec5 h2{ font-size: 5.33vw; line-height: 1.4; font-weight: var(--font-sans-bold); margin: 0 0 6vw; padding: 0; text-align: center; color: #1C4A6D; } #pageBiz div.panelMain section.sec5 p{ text-align: center; margin: 0 4vw 10vw; font-size: max(3.47vw,var(--font-size-min)); line-height: 1.8; } #pageBiz div.panelMain div.contact{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; margin: -56vw 0 30vw; padding: 3vw 8vw; } #pageBiz div.panelMain div.contact.sticky{ position: -webkit-sticky; position: sticky; bottom: 0px; z-index: 100; background: #FBFBFC; } #pageBiz div.panelMain div.contact a.tel{ background: url("../img/biz/sec5.tel.sp.svg?") no-repeat; background-size: 100% auto; margin: 0 auto 3vw; width: 63.33vw; height: 13.07vw; display: block; white-space: nowrap; text-indent: 100%; overflow: hidden; } #pageBiz div.panelMain div.contact a.inquiry{ display: flex; align-items: center; justify-content: center; padding: 0 0 0 5vw; font-size: max(3.47vw,var(--font-size-min)); line-height: 1.4; font-weight: var(--font-sans-bold); background: #BF2424 url("../img/biz/sec5.icon.letter.svg") no-repeat left 4vw center; background-size: 5.5vw auto; text-decoration: none; color: #FFF; margin: 0 0; border-radius: 8vw; width: 41.13vw; height: 14.27vw; text-align: center; } #pageBiz div.panelMain div.contact a.line{ display: flex; align-items: center; justify-content: center; padding: 0 0 0 2.5vw; font-size: max(3.47vw,var(--font-size-min)); line-height: 1; font-weight: var(--font-sans-bold); background: #06C755 url("../img/biz/sec5.icon.line.svg") no-repeat left 4vw center; background-size: 5.8vw auto; text-decoration: none; color: #FFF; margin: 0 0; border-radius: 8vw; width: 41.13vw; height: 14.27vw; text-align: center; } } /* ------------------------------------------------------------------------------ */ @media print, screen and (min-width: 769px) { #pageFaq{} #pageFaq header.pageHeader{ height: 416px; background: #F4F5F6; padding: 160px 0 0 42px; } #pageFaq header.pageHeader .title{ font-size: 50px; line-height: 1.3; font-weight: var(--font-sans-bold); margin: 0 0 0px 0; padding: 25px 0 25px 23px; border-left: 5px solid #1C4A6D; position: relative; } #pageFaq header.pageHeader p.intro{ margin: 0 0 25px; padding: 20px 0 20px 28px; border-left: 5px solid rgba(28,74,109,0.32); width: 780px; font-size: 18px; line-height: 1.8; } #pageFaq header.pageHeader p.intro a{ color: #FFF; } #pageFaq div.panelMain{ background: #F4F5F6; padding: 65px 42px; } #pageFaq div.panelMain ._h2{ font-size: 30px; line-height: 1.4; font-weight: var(--font-sans-black); margin: 0 0 60px 0; padding: 5px 0 5px 27px; border-left: 5px solid #1C4A6D; position: relative; } #pageFaq div.panelMain section.faq{ margin: 0 0 70px 0; } #pageFaq div.panelMain section.faq dl{ margin: 0; padding: 0; } #pageFaq div.panelMain section.faq dl dt{ margin: 0 0 40px; padding: 0 0 0 60px; font-size: 23px; line-height: 1.6; height: 47px; background: url("../img/faq/icon.question.svg") no-repeat left top; } #pageFaq div.panelMain section.faq dl dd{ margin: 0 0 40px; padding: 5px 0 40px 90px; font-size: 16px; line-height: 1.8; background: url("../img/faq/icon.answer.svg") no-repeat left 30px top; border-bottom: 1px solid #D2D2D2; } } @media screen and (max-width: 768px) { #pageFaq{} #pageFaq header.pageHeader{ padding: 5.33vw; background: #1C4A6D; } #pageFaq header.pageHeader .title{ margin: 0; padding: 0 0 10px 5.33vw; border-left: 5px solid #FFF; color: #FFF; font-size: 6.51vw; line-height: 1.3; font-weight: var(--font-sans-bold); } #pageFaq header.pageHeader p{ margin: 0; padding: 2.6vw 7vw 2.6vw 5.33vw; border-left: 5px solid rgba(255,255,255,0.32); color: #FFF; font-size: max(3.47vw,var(--font-size-min)); line-height: 1.8; } #pageFaq div.panelMain{ margin: 8vw 5.33vw 0; } #pageFaq div.panelMain ._h2{ font-size: max(4vw,var(--font-size-min)); line-height: 1.4; font-weight: var(--font-sans-bold); margin: 0 0 7vw 0; padding: 1vw 0 1vw 4vw; border-left: 5px solid #1C4A6D; position: relative; } #pageFaq div.panelMain section.faq{ margin: 0 0 8vw 0; } #pageFaq div.panelMain section.faq dl{ margin: 0; padding: 0; } #pageFaq div.panelMain section.faq dl dt{ margin: 0 0 5vw; padding: 3px 0 0 60px; font-size: max(4vw,var(--font-size-min)); line-height: 1.6; min-height: 47px; background: url("../img/faq/icon.question.svg") no-repeat left top; background-size: 45px auto; } #pageFaq div.panelMain section.faq dl dd{ margin: 0 0 5vw; padding: 5px 0 5vw 60px; font-size: max(3.47vw,var(--font-size-min)); line-height: 1.6; background: url("../img/faq/icon.answer.svg") no-repeat left top; background-size: 45px auto; border-bottom: 1px solid #D2D2D2; } } /* ------------------------------------------------------------------------------ */ @media print, screen and (min-width: 769px) { #pageGlossary{} #pageGlossary header.pageHeader{ height: 458px; background: url("../img/glossary/header.bg.jpg") no-repeat; padding: 170px 0 0 60px; } #pageGlossary header.pageHeader .title{ margin: 0; padding: 25px 0 25px 28px; border-left: 5px solid #FFF; color: #FFF; font-size: 50px; line-height: 1.3; font-weight: var(--font-sans-bold); display: block; } #pageGlossary header.pageHeader p.intro{ margin: 0 0 25px; padding: 20px 0 20px 28px; border-left: 5px solid rgba(255,255,255,0.32); color: #FFF; width: 780px; font-size: 18px; line-height: 1.8; } #pageGlossary header.pageHeader p.intro a{ color: #FFF; } #pageGlossary div.panelMain{ background: #F4F5F6; padding: 65px 42px; } #pageGlossary div.panelMain nav.pageNavi{ margin: 0 0 70px; } #pageGlossary div.panelMain nav.pageNavi ul{ margin: 0 0 0 -3%; padding: 0; list-style: none; display: flex; flex-wrap: wrap; } #pageGlossary div.panelMain nav.pageNavi ul li{} #pageGlossary div.panelMain nav.pageNavi ul li{ width: 30%; margin-left: 3%; margin-bottom: 20px; } #pageGlossary div.panelMain nav.pageNavi ul li a{ background: #FFF url("../img/glossary/icon.arrow.down.svg") no-repeat right 27px center; border-radius: 10px; height: 64px; font-size: 16px; font-weight: var(--font-sans-bold); line-height: 1; display: flex; align-items: center; padding: 0 28px; text-decoration: none; color: #000; } #pageGlossary div.panelMain div.glossary{ column-count: 2; column-gap: 80px; } #pageGlossary div.panelMain div.glossary section{ margin: 0 0 70px 0; page-break-inside: avoid; break-inside: avoid; } #pageGlossary div.panelMain div.glossary section ._h2{ font-size: 30px; line-height: 1.4; font-weight: var(--font-sans-black); margin: 0 0 20px 0; padding: 15px 0 15px 20px; border-left: 3px solid #1C4A6D; position: relative; } #pageGlossary div.panelMain div.glossary section dl{ margin: 0; padding: 0; border-bottom: 1px solid #D2D2D2; } #pageGlossary div.panelMain div.glossary section dl dt{ margin: 0 0 0px; padding: 20px 35px 20px 10px; font-size: 16px; font-weight: var(--font-sans-bold); line-height: 1.6; border-top: 1px solid #D2D2D2; background: url("../img/glossary/icon.plus.svg") no-repeat right 10px top 25px; cursor: pointer; } #pageGlossary div.panelMain div.glossary section dl dt.open{ background: url("../img/glossary/icon.minus.svg") no-repeat right 10px top 32px; } #pageGlossary div.panelMain div.glossary section dl dd{ margin: 0 0 0px; padding: 10px 10px 20px; font-size: 16px; line-height: 1.8; display: none; } #pageGlossary div.panelMain div.glossary section dl dd.open{ display: block; } } @media screen and (max-width: 768px) { #pageGlossary{} #pageGlossary header.pageHeader{ padding: 5.33vw; border-bottom: 4vw solid #1C4A6D; } #pageGlossary header.pageHeader .title{ font-size: 6.67vw; line-height: 1.3; font-weight: var(--font-sans-bold); margin: 0 0 0px 0; padding: 1vw 0 1vw 4vw; border-left: 5px solid #1C4A6D; position: relative; } #pageGlossary header.pageHeader p.intro{ margin: 0 0; padding: 2vw 0 2vw 4vw; border-left: 5px solid rgba(28,74,109,0.32); font-size: max(3.47vw,var(--font-size-min)); line-height: 1.8; } #pageGlossary header.pageHeader p.intro a{ color: #FFF; } #pageGlossary div.panelMain{ padding: 5vw 5.33vw 0; } #pageGlossary div.panelMain nav.pageNavi{ margin: 0 0 8vw; } #pageGlossary div.panelMain nav.pageNavi ul{ margin: 0 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 3%; } #pageGlossary div.panelMain nav.pageNavi ul li{} #pageGlossary div.panelMain nav.pageNavi ul li{ width: 48.5%; margin-bottom: 3vw; } #pageGlossary div.panelMain nav.pageNavi ul li a{ background: #FFF url("../img/glossary/icon.arrow.down.svg") no-repeat right 3vw center; background-size: 2.53vw auto; border-radius: 10px; height: 12vw; font-size: max(3.47vw,var(--font-size-min)); font-weight: var(--font-sans-bold); line-height: 1; display: flex; align-items: center; padding: 0 3vw; text-decoration: none; color: #000; } #pageGlossary div.panelMain div.glossary{} #pageGlossary div.panelMain div.glossary section{ margin: 0 0 8vw 0; page-break-inside: avoid; break-inside: avoid; } #pageGlossary div.panelMain div.glossary section ._h2{ font-size: 4vw; line-height: 1.4; font-weight: var(--font-sans-bold); margin: 0 0 5vw 0; padding: 1vw 0 1vw 3vw; border-left: 3px solid #1C4A6D; position: relative; } #pageGlossary div.panelMain div.glossary section dl{ margin: 0; padding: 0; border-bottom: 1px solid #D2D2D2; } #pageGlossary div.panelMain div.glossary section dl dt{ margin: 0 0 0px; padding: 3vw 35px 3vw 2vw; font-size: max(3.47vw,var(--font-size-min)); font-weight: var(--font-sans-bold); line-height: 1.6; border-top: 1px solid #D2D2D2; background: url("../img/glossary/icon.plus.svg") no-repeat right 3vw top 4.3vw; background-size: 3vw auto; cursor: pointer; } #pageGlossary div.panelMain div.glossary section dl dt.open{ background: url("../img/glossary/icon.minus.svg") no-repeat right 3vw top 5.5vw; background-size: 3vw auto; } #pageGlossary div.panelMain div.glossary section dl dd{ margin: 0 0 0px; padding: 2vw 2vw 3vw; font-size: max(3.47vw,var(--font-size-min)); line-height: 1.8; display: none; } #pageGlossary div.panelMain div.glossary section dl dd.open{ display: block; } } /* ------------------------------------------------------------------------------ */ @media print, screen and (min-width: 769px) { #pageMovie{} #pageMovie div.panelMain{ background: #F4F5F6; padding: 65px 42px; } #pageMovie div.panelMain ul.movieList{ display: flex; flex-wrap: wrap; margin: 0; padding: 0; gap: 30px 3%; list-style: none; } #pageMovie div.panelMain ul.movieList li{ width: calc(calc(100% - 3%) / 2); } #pageMovie div.panelMain ul.movieList li div{ height: 0; padding-top: 56.31%; position: relative; } #pageMovie div.panelMain ul.movieList li iframe{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; } } @media screen and (max-width: 768px) { #pageMovie{ border-top: 4vw solid #1C4A6D; } #pageMovie div.panelMain{ } #pageMovie div.panelMain ul.movieList{ margin: 0 5.33vw; padding: 0; list-style: none; } #pageMovie div.panelMain ul.movieList li{ margin: 0 0 5vw; } #pageMovie div.panelMain ul.movieList li div{ height: 0; padding-top: 56.31%; position: relative; } #pageMovie div.panelMain ul.movieList li iframe{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; } } /* ------------------------------------------------------------------------------ */ @media print, screen and (min-width: 769px) { #pageTokuyoRoken{} #pageTokuyoRoken header.pageHeader{ height: 587px; background: url("../img/tokuyo-roken/header.bg.jpg") no-repeat; padding: 170px 0 0 60px; } #pageTokuyoRoken header.pageHeader .title{ margin: 0; padding: 25px 0 25px 28px; border-left: 5px solid #FFF; color: #FFF; font-size: 50px; line-height: 1.3; font-weight: var(--font-sans-bold); display: block; } #pageTokuyoRoken header.pageHeader p.intro{ margin: 0 0 25px; padding: 20px 0 20px 28px; border-left: 5px solid rgba(255,255,255,0.32); color: #FFF; width: 780px; font-size: 18px; line-height: 1.8; } #pageTokuyoRoken header.pageHeader p.intro a{ color: #FFF; } #pageTokuyoRoken header.pageHeader div.form{ display: flex; flex-wrap: wrap; justify-content: space-between; width: 494px; margin: 0 0 0 241px; } #pageTokuyoRoken header.pageHeader div.form select{ width: 240px; height: 64px; margin: 0 0 15px; font-weight: var(--font-sans-bold); font-size: 16px; padding: 0 20px 0 50px; border-radius: 10px; border: none; cursor: pointer; } #pageTokuyoRoken header.pageHeader div.form select.area{ background: #FFF url("../img/common/icon.map-maker.01.svg") no-repeat left 15px center; } #pageTokuyoRoken header.pageHeader div.form select.subT{ background: #FFF url("../img/common/icon.wheelchair.01.svg") no-repeat left 15px center; } #pageTokuyoRoken header.pageHeader div.form div.reset{ text-align: center; flex-grow: 1; } #pageTokuyoRoken header.pageHeader div.form div.reset a{ color: #FFF; font-size: 16px; text-decoration: none; border-bottom: 2px solid #FFF; padding: 0 0 5px; } #pageTokuyoRoken ._h2{ font-size: 30px; line-height: 1.4; font-weight: var(--font-sans-black); margin: 0 0 20px 0; padding: 5px 0 5px 23px; border-left: 5px solid #1C4A6D; position: relative; } #pageTokuyoRoken ._h2 span{ border-bottom: 5px solid #BF2424; margin-bottom: 5px; display: inline-block; } #pageTokuyoRoken section.byArea{ padding: 40px 42px 10px; border-top: 1px solid #D2D2D2; } #pageTokuyoRoken section.byArea ul.map{ list-style: none; padding: 0; background: url("../img/tokuyo-roken/byArea.map.svg") no-repeat; width: 735px; height: 601px; margin: 0 auto; position: relative; } #pageTokuyoRoken section.byArea ul.map li{ position: absolute; } #pageTokuyoRoken section.byArea ul.map li.kyoto{ left: 263px; top: 61px; } #pageTokuyoRoken section.byArea ul.map li.shiga{ left: 421px; top: 118px; } #pageTokuyoRoken section.byArea ul.map li.hyogo{ left: 138px; top: 151px; } #pageTokuyoRoken section.byArea ul.map li.osaka{ left: 291px; top: 208px; } #pageTokuyoRoken section.byArea ul.map li.nara{ left: 366px; top: 297px; } #pageTokuyoRoken section.byArea ul.map li.wakayama{ left: 264px; top: 381px; } #pageTokuyoRoken section.byArea ul.map li a.btnArea{ background: #FFF url("../img/common/btn.icon.arrow.03.svg") no-repeat right 15px center; border-radius: 20px; width: 169px; height: 40px; line-height: 35px; text-decoration: none; display: block; color: #000; border: 2px solid #BF2424; text-align: center; } #pageTokuyoRoken section.byArea ul.map li.selected a.btnArea{ background: #FFF url("../img/common/btn.icon.arrow.03.svg") no-repeat right 15px center; color: #000; border: 2px solid #BF2424; } #pageTokuyoRoken section.result{ background: #F4F5F6; padding: 40px 42px; } #pageTokuyoRoken section.result dl.condList{ display: flex; margin: 0 0 40px 0; padding: 0; align-items: stretch; flex-wrap: wrap; } #pageTokuyoRoken section.result dl.condList dt{ margin: 0 35px 15px 0; padding: 0 0 0 35px; font-size: 16px; line-height: 1.7; width: 150px; min-height: 50px; border-right: 1px solid #D2D2D2; font-weight: var(--font-sans-bold); } #pageTokuyoRoken section.result dl.condList dt.area{ background: url("../img/common/icon.map-maker.01.svg") no-repeat left top 5px; } #pageTokuyoRoken section.result dl.condList dt.subT{ background: url("../img/common/icon.wheelchair.01.svg") no-repeat left top 5px; } #pageTokuyoRoken section.result dl.condList dt span{ background: #FFF; border-radius: 5px; font-size: 12px; line-height: 1; display: inline-block; padding: 5px 10px; } #pageTokuyoRoken section.result dl.condList dd{ margin: 0 0 15px 0; padding: 0; font-size: 16px; line-height: 1.7; width: calc(100% - 35px - 150px - 1px); } #pageTokuyoRoken section.result dl.condList dd ul{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; } #pageTokuyoRoken section.result dl.condList dd ul li{ display: flex; flex-wrap: wrap; margin: 0 15px 0 0; } #pageTokuyoRoken section.result ul.list{ list-style: none; margin: 0; padding: 0; } #pageTokuyoRoken section.result ul.list > li{ margin: 0 0 34px; background: #FFF; padding: 3px; } #pageTokuyoRoken section.result ul.list > li article{} #pageTokuyoRoken section.result ul.list > li header{ margin: 0 0 0px; padding: 30px 30px 10px; border-bottom: 1px solid #D2D2D2; } #pageTokuyoRoken section.result ul.list > li header h3{ margin: 0 0 30px; padding: 0px 0 0px 15px; border-left: 5px solid #1C4A6D; font-size: 30px; line-height: 1.3; font-weight: var(--font-sans-bold); } #pageTokuyoRoken section.result ul.list > li header div.info{ display: flex; justify-content: space-between; align-items: flex-end; } #pageTokuyoRoken section.result ul.list > li header div.info div p.type::before{ content: '●'; color: #85A7BF; margin-right: 3px; } #pageTokuyoRoken section.result ul.list > li header div.info div p.type{ margin: 0 0 10px; font-size: 16px; line-height: 1.6; } #pageTokuyoRoken section.result ul.list > li header div.info div p.address::before{ content: '●'; color: #85A7BF; margin-right: 3px; } #pageTokuyoRoken section.result ul.list > li header div.info div p.address{ margin: 0 0 10px; font-size: 16px; line-height: 1.6; } #pageTokuyoRoken section.result ul.list > li header div.info div p.tel::before{ content: '●'; color: #85A7BF; margin-right: 3px; } #pageTokuyoRoken section.result ul.list > li header div.info div p.tel{ margin: 0 0 10px; font-size: 16px; line-height: 1.6; display: block; } #pageTokuyoRoken section.result ul.list > li header div.info div p.tel a{ text-decoration: none; color: #000; font-size: 20px; font-weight: var(--font-sans-bold); } #pageTokuyoRoken section.result ul.list > li header div.info p.company{ font-size: 16px; line-height: 1.4; margin: 0 0 10px; } #pageTokuyoRoken section.result ul.list > li header div.info p.company span{ padding: 0 15px 0 0; margin: 0 15px 0 0; border-right: 1px solid #D2D2D2; color: #85A7BF; font-weight: var(--font-sans-bold); } #pageTokuyoRoken section.result ul.list > li div.status{ display: flex; justify-content: space-between; align-items: flex-start; padding: 10px 30px 20px; } #pageTokuyoRoken section.result ul.list > li div.status table{ border-spacing: 0 15px; } #pageTokuyoRoken section.result ul.list > li div.status table tr{ margin: 0 0 5px; } #pageTokuyoRoken section.result ul.list > li div.status table th{ font-size: 16px; line-height: 1.4; padding: 0 15px 0 0; margin: 0 0 0 0; color: #85A7BF; text-align: right; border-right: 1px solid #D2D2D2; } #pageTokuyoRoken section.result ul.list > li div.status table td{ font-size: 16px; line-height: 1.4; padding: 0 0 0 15px; margin: 0 0 0 0; } #pageTokuyoRoken section.result ul.list > li div.status div.waiter{ text-align: right; } #pageTokuyoRoken section.result ul.list > li div.status div.waiter p.num{ font-size: 20px; font-weight: var(--font-sans-bold); margin: 10px 0 15px; } #pageTokuyoRoken section.result ul.list > li div.status div.waiter p.num span{ font-size: 78px; line-height: 1; color: #BF2424; font-family: "Lato"; font-weight: var(--font-lato-bold); min-width: 1.4em; text-align: center; display: inline-block; } #pageTokuyoRoken section.result ul.list > li div.status div.waiter p.date{ margin: 0 0 10px; font-size: 16px; line-height: 1.6; } #pageTokuyoRoken section.result ul.list > li div.status div.waiter p.ask{ margin: 0 0 0px; font-size: 16px; line-height: 1.6; } } @media screen and (max-width: 768px) { #pageTokuyoRoken{ background: #FFF; } #pageTokuyoRoken .breadcrumbs{ display: none; } #pageTokuyoRoken header.pageHeader{ background: #1C4A6D url("../img/tokuyo-roken/header.bg.sp.jpg") no-repeat left -15.23vw top -7.55vw; background-size: 107.68vw auto; margin: 0 0 12vw; padding: 66vw 5.33vw 8vw 5.33vw; position: relative; } #pageTokuyoRoken header.pageHeader .title{ margin: 0; padding: 1vw 0 1vw 4vw; border-left: 5px solid #FFF; color: #FFF; font-size: 6.67vw; line-height: 1.3; font-weight: var(--font-sans-bold); display: block; } #pageTokuyoRoken header.pageHeader p.intro{ margin: 0 0 5vw; padding: 2vw 0vw 2vw 4vw; border-left: 5px solid rgba(255,255,255,0.32); color: #FFF; font-size: max(3.47vw,var(--font-size-min)); line-height: 1.8; } #pageTokuyoRoken header.pageHeader p.intro a{ color: #FFF; } #pageTokuyoRoken header.pageHeader div.form{ display: flex; flex-wrap: wrap; justify-content: space-between; margin: 0 ; gap: 3%; } #pageTokuyoRoken header.pageHeader div.form select{ width: 48.5%; height: 11vw; margin: 0 0 5vw; font-weight: var(--font-sans-bold); font-size: max(3.47vw,var(--font-size-min)); padding: 0 5vw 0 9vw; border-radius: 10px; border: none; cursor: pointer; } #pageTokuyoRoken header.pageHeader div.form select.area{ background: #FFF url("../img/common/icon.map-maker.01.svg") no-repeat left 3vw center; background-size: auto 5vw; } #pageTokuyoRoken header.pageHeader div.form select.subT{ background: #FFF url("../img/common/icon.wheelchair.01.svg") no-repeat left 3vw center; background-size: auto 5vw; } #pageTokuyoRoken header.pageHeader div.form div.reset{ text-align: center; flex-grow: 1; } #pageTokuyoRoken header.pageHeader div.form div.reset a{ color: #FFF; font-size: max(3.47vw,var(--font-size-min)); text-decoration: none; border-bottom: 2px solid #FFF; padding: 0 0 1vw; } #pageTokuyoRoken header.pageHeader::after{ content: ''; width: 0; height: 0; border-top: 8.93vw solid #1C4A6D; border-left: 11.5vw solid transparent; border-right: 11.5vw solid transparent; position: absolute; bottom: -8.8vw; left: 0; right: 0; margin: 0 auto; } #pageTokuyoRoken ._h2{ font-size: 5.33vw; line-height: 1.4; font-weight: var(--font-sans-bold); margin: 0 5.33vw 5vw; padding: 1vw 0 1vw 4vw; border-left: 5px solid #1C4A6D; position: relative; } #pageTokuyoRoken ._h2 span{ border-bottom: 5px solid #BF2424; margin-bottom: 5px; display: inline-block; } #pageTokuyoRoken section.byArea{ padding: 5vw 0 0; background: #FFF; } #pageTokuyoRoken section.byArea ul.map{ list-style: none; padding: 0; background: url("../img/tokuyo-roken/byArea.map.sp.svg") no-repeat center center; background-size: 113.87vw 96.54vw; width: 100%; height: 96.54vw; margin: 0 auto; position: relative; } #pageTokuyoRoken section.byArea ul.map li{ position: absolute; } #pageTokuyoRoken section.byArea ul.map li.kyoto{ left: 27.07vw; top: 4vw; } #pageTokuyoRoken section.byArea ul.map li.shiga{ left: 55.47vw; top: 19.16vw; } #pageTokuyoRoken section.byArea ul.map li.hyogo{ left: 6.47vw; top: 19.17vw; } #pageTokuyoRoken section.byArea ul.map li.osaka{ left: 34vw; top: 33.2vw; } #pageTokuyoRoken section.byArea ul.map li.nara{ left: 43.68vw; top: 51.03vw; } #pageTokuyoRoken section.byArea ul.map li.wakayama{ left: 33.27vw; top: 68.83vw; } #pageTokuyoRoken section.byArea ul.map li a.btnArea{ background: #FFF url("../img/common/btn.icon.arrow.03.svg") no-repeat right 4vw center; background-size: 2.5vw auto; border-radius: 5vw; font-size: max(3.47vw,var(--font-size-min)); width: 35.73vw; height: 9.33vw; line-height: 8vw; text-decoration: none; display: block; color: #000; border: 3px solid #BF2424; text-align: center; } #pageTokuyoRoken section.byArea ul.map li.selected a.btnArea{ background: #FFF url("../img/common/btn.icon.arrow.03.svg") no-repeat right 4vw center;background-size: 2.5vw auto; color: #000; border: 3px solid #BF2424; } #pageTokuyoRoken section.result{ background: #F4F5F6; padding: 10.53vw 0; } #pageTokuyoRoken section.result dl.condList{ display: flex; margin: 0 4.33vw 5vw; padding: 0; align-items: stretch; flex-wrap: wrap; } #pageTokuyoRoken section.result dl.condList dt{ margin: 0 4vw 3vw 0; padding: 7vw 0 0 0; font-size: max(3.47vw,var(--font-size-min)); line-height: 1.7; width: 20vw; text-align: center; border-right: 1px solid #D2D2D2; font-weight: var(--font-sans-bold); } #pageTokuyoRoken section.result dl.condList dt.area{ background: url("../img/common/icon.map-maker.01.svg") no-repeat center top; background-size: 4.27vw auto; } #pageTokuyoRoken section.result dl.condList dt.subT{ background: url("../img/common/icon.wheelchair.01.svg") no-repeat center top; background-size: 5.27vw auto; } #pageTokuyoRoken section.result dl.condList dt span{ background: #FFF; border-radius: 5px; font-size: max(3.47vw,var(--font-size-min)); line-height: 1; display: inline-block; padding: 5px 10px; font-weight: normal; } #pageTokuyoRoken section.result dl.condList dd{ margin: 0 0 3vw 0; padding: 0; font-size: max(3.47vw,var(--font-size-min)); line-height: 1.7; width: calc(100% - 4vw - 20vw - 1px); } #pageTokuyoRoken section.result dl.condList dd ul{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; } #pageTokuyoRoken section.result dl.condList dd ul li{ display: flex; flex-wrap: wrap; margin: 0 3vw 0 0; } #pageTokuyoRoken section.result ul.list{ list-style: none; margin: 0; padding: 0 4.33vw; } #pageTokuyoRoken section.result ul.list > li{ margin: 0 0 6.13vw; background: #FFF; padding: 3px; } #pageTokuyoRoken section.result ul.list > li article{} #pageTokuyoRoken section.result ul.list > li header{ margin: 0 0 0px; padding: 4vw 0 0; } #pageTokuyoRoken section.result ul.list > li header h3{ margin: 0 4vw 5vw; padding: 0px 0 0px 3vw; border-left: 5px solid #1C4A6D; font-size: 30px; line-height: 1.3; font-weight: var(--font-sans-bold); } #pageTokuyoRoken section.result ul.list > li header div.info{} #pageTokuyoRoken section.result ul.list > li header div.info div{ margin: 0 4vw; } #pageTokuyoRoken section.result ul.list > li header div.info div p.type::before{ content: '●'; color: #85A7BF; margin-right: 3px; } #pageTokuyoRoken section.result ul.list > li header div.info div p.type{ margin: 0 0 2vw; font-size: max(3.47vw,var(--font-size-min)); line-height: 1.6; } #pageTokuyoRoken section.result ul.list > li header div.info div p.address::before{ content: '●'; color: #85A7BF; margin-right: 3px; } #pageTokuyoRoken section.result ul.list > li header div.info div p.address{ margin: 0 0 2vw; font-size: max(3.47vw,var(--font-size-min)); line-height: 1.6; } #pageTokuyoRoken section.result ul.list > li header div.info div p.tel::before{ content: '●'; color: #85A7BF; margin-right: 3px; } #pageTokuyoRoken section.result ul.list > li header div.info div p.tel{ margin: 0 0 2vw; font-size: max(3.47vw,var(--font-size-min)); line-height: 1.6; display: block; } #pageTokuyoRoken section.result ul.list > li header div.info div p.tel a{ text-decoration: none; color: #000; font-size: 20px; font-weight: var(--font-sans-bold); } #pageTokuyoRoken section.result ul.list > li header div.info p.company{ font-size: max(3.47vw,var(--font-size-min)); line-height: 1.4; margin: 4vw 0 0vw; border-top: 1px solid #D2D2D2; padding: 3.5vw 4vw 0; } #pageTokuyoRoken section.result ul.list > li header div.info p.company span{ padding: 0 2vw 0 0; margin: 0 2vw 0 0; width: 20vw; text-align: right; display: inline-block; border-right: 1px solid #D2D2D2; color: #85A7BF; font-weight: var(--font-sans-bold); } #pageTokuyoRoken section.result ul.list > li div.status{ margin: 0; } #pageTokuyoRoken section.result ul.list > li div.status table{ border-spacing: 0 2vw; margin: 0 4vw 2vw; } #pageTokuyoRoken section.result ul.list > li div.status table tr{ margin: 0 0 5px; } #pageTokuyoRoken section.result ul.list > li div.status table th{ font-size: max(3.47vw,var(--font-size-min)); line-height: 1.4; padding: 0 2vw 0 0; margin: 0 0 0 0; width: 20vw; color: #85A7BF; text-align: right; border-right: 1px solid #D2D2D2; } #pageTokuyoRoken section.result ul.list > li div.status table td{ font-size: max(3.47vw,var(--font-size-min)); line-height: 1.4; padding: 0 0 0 2vw; margin: 0 0 0 0; } #pageTokuyoRoken section.result ul.list > li div.status div.waiter{ text-align: center; border-top: 1px solid #D2D2D2; padding: 3vw 0 3vw 0; } #pageTokuyoRoken section.result ul.list > li div.status div.waiter p.num{ font-size: max(4vw,var(--font-size-min)); font-weight: var(--font-sans-bold); margin: 0px 0 3vw; } #pageTokuyoRoken section.result ul.list > li div.status div.waiter p.num span{ font-size: 16.13vw; line-height: 1; color: #BF2424; font-family: "Lato"; font-weight: var(--font-lato-bold); min-width: 1.4em; text-align: center; display: inline-block; } #pageTokuyoRoken section.result ul.list > li div.status div.waiter p.date{ margin: 0 0 3vw; font-size: max(3.47vw,var(--font-size-min)); line-height: 1.6; } #pageTokuyoRoken section.result ul.list > li div.status div.waiter p.ask{ margin: 0 0 3vw; font-size: max(3.47vw,var(--font-size-min)); line-height: 1.6; } } /* ------------------------------------------------------------------------------ */ @media print, screen and (min-width: 769px) { #pageCareWork{} #pageCareWork header.pageHeader{ height: 458px; background: url("../img/care-work/header.bg.png") no-repeat left -18px bottom; padding: 160px 0 0 42px; position: relative; } #pageCareWork header.pageHeader .title{ background: url("../img/care-work/header.title.svg") no-repeat; text-indent: 100%; overflow: hidden; white-space: nowrap; width: 803px; height: 134px; margin: 0; padding: 0; position: absolute; left: 157px; top: 206px; } #pageCareWork section.box01{ padding: 129px 0 100px 0; background: #F4F5F6; } #pageCareWork section.box01 ul.menu{ list-style: none; margin: 0 30px; padding: 0; display: flex; justify-content: space-between; gap: 0 30px; max-width: 1029px; } #pageCareWork section.box01 ul.menu > li{ max-width: 323px; width: 33%; } #pageCareWork section.box01 ul.menu > li section{ border-radius: 5px 5px 0 0; position: relative; } #pageCareWork section.box01 ul.menu > li section h2{ margin: 0; padding: 8px 0 0 0; line-height: 1.5; height: 140px; color: #FFF; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 20px; font-weight: var(--font-sans-bold); } #pageCareWork section.box01 ul.menu > li.i1 section{ background: #BF2424; } #pageCareWork section.box01 ul.menu > li.i2 section{ background: #D9A62E; } #pageCareWork section.box01 ul.menu > li.i3 section{ background: #1C4A6D; } #pageCareWork section.box01 ul.menu > li.i1 section::before{ content: ''; background: url("../img/care-work/box02.menu.i1.mark.svg") no-repeat; width: 82px; height: 82px; display: block; position: absolute; top: -48px; left: 0; right: 0; margin: 0 auto; border: 3px solid #BF2424; border-radius: 50px; } #pageCareWork section.box01 ul.menu > li.i2 section::before{ content: ''; background: url("../img/care-work/box02.menu.i2.mark.svg") no-repeat; width: 82px; height: 82px; display: block; position: absolute; top: -48px; left: 0; right: 0; margin: 0 auto; border: 3px solid #D9A62E; border-radius: 50px; } #pageCareWork section.box01 ul.menu > li.i3 section::before{ content: ''; background: url("../img/care-work/box02.menu.i3.mark.svg") no-repeat; width: 82px; height: 82px; display: block; position: absolute; top: -48px; left: 0; right: 0; margin: 0 auto; border: 3px solid #1C4A6D; border-radius: 50px; } #pageCareWork section.box01 ul.menu > li section a{ display: block; pointer-events: none; } #pageCareWork section.box01 ul.menu > li section a{ position: absolute; bottom: 0; left: 0; right: 0; color: #FFF; width: 100%; height: 100%; text-indent: 100%; white-space: nowrap; overflow: hidden; } #pageCareWork section.box01 ul.menu > li.i1 section a{ background: url("../img/care-work/box02.menu.arrow.down.svg") no-repeat center bottom 10px; background-size: 16px auto; } #pageCareWork section.box01 ul.menu > li.i2 section a{ background: url("../img/care-work/box02.menu.arrow.down.svg") no-repeat center bottom 10px; background-size: 16px auto; } #pageCareWork section.box01 ul.menu > li.i3 section a{ background: url("../img/care-work/box02.menu.arrow.down.svg") no-repeat center bottom 10px; background-size: 16px auto; } #pageCareWork section.box01 ul.menu > li.i1 section.isOpen a{ background: url("../img/care-work/box02.menu.arrow.up.svg") no-repeat center bottom 5px; background-size: 16px auto; } #pageCareWork section.box01 ul.menu > li.i2 section.isOpen a{ background: url("../img/care-work/box02.menu.arrow.up.svg") no-repeat center bottom 5px; background-size: 16px auto; } #pageCareWork section.box01 ul.menu > li.i3 section.isOpen a{ background: url("../img/care-work/box02.menu.arrow.up.svg") no-repeat center bottom 5px; background-size: 16px auto; } #pageCareWork section.box01 ul.menu > li nav{ display: block !important; } #pageCareWork section.box01 ul.menu > li nav ul{ background: #FFF; list-style: none; margin: 0; padding: 0; } #pageCareWork section.box01 ul.menu > li nav ul li{ border-bottom: 1px solid #AAA; } #pageCareWork section.box01 ul.menu > li nav ul li a{ display: block; line-height: 1.5; font-size: 16px; padding: 7px 10px; text-decoration: none; color: #000; } #pageCareWork section.box02{} #pageCareWork section.box02 > div.inner{ margin: 0 auto; padding: 60px 0 85px 0; position: relative; } #pageCareWork section.box02 h2{ font-size: 30px; line-height: 54px; font-weight: var(--font-sans-black); border-left: 5px solid #1C4A6D; padding: 0 0 0 26px; margin: 0 0 40px 43px; height: 60px; } #pageCareWork section.box02 ul{ list-style: none; width: 92%; margin: 0 0px 85px 43px; padding: 0; border-top: 1px solid #D2D2D2; } #pageCareWork section.box02 ul li{ border-bottom: 1px solid #D2D2D2; } #pageCareWork section.box02 ul li a{ display: flex; min-height: 75px; align-items: center; text-decoration: none; padding: 15px 0; } #pageCareWork section.box02 ul li a span.date{ font-size: 16px; color: #000; white-space: nowrap; margin: 0 37px 0 10px; } #pageCareWork section.box02 ul li a span.category{ font-size: 16px; line-height: 1; padding: 7px 0; display: block; white-space: nowrap; margin: 0 33px 0 0; width: 87px; text-align: center; } #pageCareWork section.box02 ul li a span.category.news{ background: #E5C213; color: #000; } #pageCareWork section.box02 ul li a span.category.seminar{ background: #108EE8; color: #FFF; } #pageCareWork section.box02 ul li a span.category.job{ background: #F65C5C; color: #FFF; } #pageCareWork section.box02 ul li a span.text{ font-size: 16px; color: #000; text-decoration: underline; } #pageCareWork section.box02 ul li a:hover span.text{ text-decoration: none; } #pageCareWork section.box02 a.more{ display: block; width: 280px; height: 60px; background: #FFF url("../img/common/btn.icon.arrow.01.svg") no-repeat right 28px center; font-weight: var(--font-sans-medium); line-height: 53px; text-decoration: none; text-align: center; font-size: 18px; color: #BF2424; border: 2px solid #BF2424; border-radius: 30px; margin: 0 auto; } } @media screen and (max-width: 768px) { #pageCareWork{} #pageCareWork header.pageHeader{ border-bottom: 4vw solid #1C4A6D; background: url("../img/care-work/header.bg.sp.png") no-repeat center bottom; background-size: 100% auto; height: 54.61vw; padding-top: 5.64vw; } #pageCareWork header.pageHeader .title{ background: url("../img/care-work/header.title.sp.svg") no-repeat; background-size: 100% auto; text-indent: 100%; overflow: hidden; white-space: nowrap; width: 84.1vw; height: 39.23vw; margin: 0 auto; padding: 0; } #pageCareWork section.box01{ position: relative; padding: 20vw 0 15vw 0; } #pageCareWork section.box01 ul.menu{ list-style: none; margin: 0 auto; padding: 0; gap: 17.44vw 0; width: 89.74vw; display: flex; flex-direction: column; } #pageCareWork section.box01 ul.menu > li{ margin: 0 0 0; } #pageCareWork section.box01 ul.menu > li section{ padding: 0; border-radius: 5px; position: relative; } #pageCareWork section.box01 ul.menu > li section.isOpen{ border-radius: 5px 5px 0 0; } #pageCareWork section.box01 ul.menu > li.i1 section{ background: #BF2424; height: 28.21vw; } #pageCareWork section.box01 ul.menu > li.i2 section{ background: #D9A62E; height: 28.21vw; } #pageCareWork section.box01 ul.menu > li.i3 section{ background: #1C4A6D; height: 33.33vw; } #pageCareWork section.box01 ul.menu > li section h2{ margin: 0; padding: 0 0 0; line-height: 1.4; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; color: #FFF; font-size: 4.62vw; } #pageCareWork section.box01 ul.menu > li.i1 section::before{ content: ''; background: url("../img/care-work/box02.menu.i1.mark.svg") no-repeat; background-size: 100% auto; width: 18.21vw; height: 18.21vw; display: block; position: absolute; top: -10vw; left: 0; right: 0; margin: 0 auto; border: 0.8vw solid #BF2424; border-radius: 10vw; } #pageCareWork section.box01 ul.menu > li.i2 section::before{ content: ''; background: url("../img/care-work/box02.menu.i2.mark.svg") no-repeat; background-size: 100% auto; width: 18.21vw; height: 18.21vw; display: block; position: absolute; top: -10vw; left: 0; right: 0; margin: 0 auto; border: 0.8vw solid #D9A62E; border-radius: 10vw; } #pageCareWork section.box01 ul.menu > li.i3 section::before{ content: ''; background: url("../img/care-work/box02.menu.i3.mark.svg") no-repeat; background-size: 100% auto; width: 18.21vw; height: 18.21vw; display: block; position: absolute; top: -10vw; left: 0; right: 0; margin: 0 auto; border: 0.8vw solid #1C4A6D; border-radius: 10vw; } #pageCareWork section.box01 ul.menu > li section a{ position: absolute; bottom: 0; left: 0; right: 0; color: #FFF; width: 100%; text-decoration: none; font-weight: var(--font-sans-bold); font-size: 3.83vw; display: flex; align-items: flex-end; padding-bottom: 2.5vw; padding-right: 6vw; justify-content: center; text-align: center; height: 100%; } #pageCareWork section.box01 ul.menu > li.i1 section a{ background: url("../img/siteTop/box01.arrow.white.down.svg") no-repeat right calc(50% - 10vw) bottom 3.8vw; background-size: 4vw auto; } #pageCareWork section.box01 ul.menu > li.i2 section a{ background: url("../img/siteTop/box01.arrow.white.down.svg") no-repeat right calc(50% - 10vw) bottom 3.8vw; background-size: 4vw auto; } #pageCareWork section.box01 ul.menu > li.i3 section a{ background: url("../img/siteTop/box01.arrow.white.down.svg") no-repeat right calc(50% - 10vw) bottom 3.8vw; background-size: 4vw auto; } #pageCareWork section.box01 ul.menu > li.i1 section.isOpen a{ background: url("../img/siteTop/box01.arrow.white.up.svg") no-repeat right calc(50% - 10vw) bottom 2.27vw; background-size: 4vw auto; } #pageCareWork section.box01 ul.menu > li.i2 section.isOpen a{ background: url("../img/siteTop/box01.arrow.white.up.svg") no-repeat right calc(50% - 10vw) bottom 2.27vw; background-size: 4vw auto; } #pageCareWork section.box01 ul.menu > li.i3 section.isOpen a{ background: url("../img/siteTop/box01.arrow.white.up.svg") no-repeat right calc(50% - 10vw) bottom 2.27vw; background-size: 4vw auto; } #pageCareWork section.box01 ul.menu > li nav{ display: none; } #pageCareWork section.box01 ul.menu > li nav ul{ background: #FFF; list-style: none; margin: 0; padding: 0; } #pageCareWork section.box01 ul.menu > li nav ul li{ border-bottom: 1px solid #AAA; } #pageCareWork section.box01 ul.menu > li nav ul li a{ display: block; line-height: 1.5; font-size: 3.59vw; padding: 2vw 1.8vw; text-decoration: none; color: #000; } #pageCareWork section.box02{ background: #FFF; } #pageCareWork section.box02 > div.inner{ padding: 11vw 0 27vw 0; position: relative; } #pageCareWork section.box02 h2{ font-size: 5.3vw; line-height: 7vw; font-weight: var(--font-sans-bold); border-left: 4px solid #1C4A6D; padding: 1vw 0 1vw 4vw; margin: 0 0 8vw 5.73vw; } #pageCareWork section.box02 p.intro{ margin: 0 9.3vw 8vw 5.73vw; padding: 2vw 0 2vw 4vw; font-size: max(3.47vw,var(--font-size-min)); line-height: 1.6; border-left: 4px solid #E0E0E0; } #pageCareWork section.box02 a.more{ display: block; width: 58.67vw; height: 12.53vw; background: #FFF url("../img/common/btn.icon.arrow.01.sp.svg") no-repeat right 4vw center; background-size: 1.8vw auto; font-weight: var(--font-sans-bold); line-height: 11vw; text-decoration: none; text-align: center; font-size: 4vw; color: #BF2424; border: 3px solid #BF2424; border-radius: 7vw; margin: 0 auto; } #pageCareWork section.box02 ul{ list-style: none; margin: 0 5.73vw 8.72vw; padding: 0; border-top: 1px solid #D2D2D2; } #pageCareWork section.box02 ul li{ border-bottom: 1px solid #D2D2D2; } #pageCareWork section.box02 ul li a{ display: flex; flex-wrap: wrap; text-decoration: none; padding: 4vw 0; } #pageCareWork section.box02 ul li a span.date{ font-size: max(3.47vw,var(--font-size-min)); line-height: 1; padding: 1vw 0; display: inline-block; margin: 0 5vw 3vw 0; color: #000; } #pageCareWork section.box02 ul li a span.category{ font-size: max(3.47vw,var(--font-size-min)); line-height: 1; padding: 1vw 0; display: block; margin: 0 0 3vw 0; min-width: 80px; width: 20vw; text-align: center; } #pageCareWork section.box02 ul li a span.category.news{ background: #E5C213; color: #000; } #pageCareWork section.box02 ul li a span.category.seminar{ background: #108EE8; color: #FFF; } #pageCareWork section.box02 ul li a span.category.job{ background: #F65C5C; color: #FFF; } #pageCareWork section.box02 ul li a span.text{ font-size: max(3.47vw,var(--font-size-min)); line-height: 1.6; color: #000; text-decoration: underline; width: 100%; } }