/* -------------------------------------------------- */
/* 汎用 */
/* -------------------------------------------------- */



/* -------------------------------------------------- */
/* デコレーション */
/* -------------------------------------------------- */

/* ベース */
.deco { display:none; }

@container( min-width:1000px ) {

/* ベース */
.deco { display:block; position:relative; top:0; left:0; width:100vw; z-index:-1; }
div.deco-1, div.deco-2, div.deco-3, div.deco-4 { position:absolute; z-index:1; }

/* デコレーション01 */
div.deco-1 { aspect-ratio:333/158; background-image:url('../img/deco/fv-deco-01.png'); top:100px; right:2.5vw; height:158px; width:333px; }
div.deco-2 { aspect-ratio:326/282; background-image:url('../img/deco/fv-deco-02.png'); top:70vh; right:5vw; height:282px; width:326px; }
div.deco-3 { aspect-ratio:151/126; background-image:url('../img/deco/fv-deco-03.png'); transform:translateY(-50%); top:50vh; left:-10px; height:151px; width:126px; }
div.deco-4 { aspect-ratio:52/56; background-image:url('../img/deco/fv-deco-04.png'); transform:translateX(-360px); top:70vh; left:50%; height:52px; width:56px; }

}

/* -------------------------------------------------- */
/* ファーストビュー */
/* -------------------------------------------------- */

/* トップのみ */
main h1 { text-align:center; padding-top:40px; }
main h1 a img { margin:auto; height:auto; max-width:150px; }

/* ベース */
.fv { padding-top:40px; margin-bottom:120px; } 

/* 見出し */
.fv h2 { margin-bottom:24px; }
.fv h2 img { height:auto; max-width:350px; width:calc( 100% - 80px ); }

/* 画像 */
.fv div.center img { height:auto; max-width:100%; }

/* デコレーション */
div.fv-ph { position:relative; }
div.fv-ph::before { aspect-ratio:541/508; background-image:url('../img/fv/fv-drag.png'); position:absolute; top:200px; height:210px; width:210px; }

@container( min-width:561px ) {

/* デコレーション */
div.fv-ph::before { top:310px; left:10px; height:250px; width:250px; }

}

@container( min-width:1000px ) {

/* トップのみ */
main h1 { display:none; }

/* ベース */
.fv { padding-top:80px; } 

}

/* -------------------------------------------------- */
/* 薬局について */
/* -------------------------------------------------- */

/* ベース */
.about-us .block { margin-bottom:40px; }
.about-us .block.last-block { margin-bottom:0; }

/* 画像 */
div.ph-block { align-items:center; display:flex; justify-content:center; position:relative; margin:auto; margin-bottom:24px; max-width:250px; }
div.ph-block img { aspect-ratio:9/10; object-fit:cover; margin:auto; height:100%; width:100%; }

/* テキスト */
.about-us p { margin-bottom:8px; }

/* 表 */
.about-us dl { flex-wrap:wrap; }
.about-us dl dt, .about-us dl dd { box-sizing:border-box; text-align:left; line-height:200%; }
.about-us dl dt { width:25%; }
.about-us dl dd { width:75%; }

/* メールボタン  */
p.mail-link a { aspect-ratio:193/54; background-image:url('../img/store-info/button-mail-ov.png'); display:inline-block; transition:.3s; margin:auto; height:54px; width:193px; }
p.mail-link a img { aspect-ratio:193/54; opacity:1; transition:.3s; margin:auto; height:54px; width:193px; }
p.mail-link a:hover img { opacity:0; transition:.3s; }

@container( min-width:561px ) {

/* 画像 */
div.ph-block::before, div.ph-block::after { position:absolute; }
div.ph-block::before { aspect-ratio:52/56; background-image:url('../img/about-us/left-kira.png'); top:50%; left:-80px; height:56px; width:52px; }
div.ph-block::after { aspect-ratio:65/92; background-image:url('../img/about-us/right-kira.png'); top:50%; right:-90px; transform:translateY(-70%); height:92px; width:65px; }

}

/* -------------------------------------------------- */
/* 私たちの取り組み */
/* -------------------------------------------------- */

/* ベース */
div.card { align-items:center; background-color:var(--ye); box-shadow:4px 4px 8px 2px rgba(0, 0, 0, 0.25); flex:1; justify-content:center; padding:24px; }
div.card.naname-01 { transform:rotate(-2deg); }
div.card.naname-02 { transform:rotate(2deg); }

/* 全体調整 */
.initiative div.flex.flex-column { gap:-10px; }

/* 画像 */
.pc-flex img { margin-bottom:20px; }
div.card img { aspect-ratio:217/278; overflow:hidden; object-fit:contain; width:50%; }

/* テキスト部分 */
div.item-box { padding-left:20px; width:50%; }

/* 特殊処理 */
p.card-button a { align-items:center; background-color:var(--bl); border-radius:40px; color:var(--wh); font-size:14px; font-weight:700; justify-content:center; line-height:1; transition:.3s; height:32px; width:250px; }
p.card-button a:hover { opacity:0.8; transition:.3s; }

@container( max-width:560px ) {

/* ベース */
div.card { flex-direction:column; gap:20px; }

/* 画像 */
div.card img { aspect-ratio:3/2; object-fit:cover; width:100%; }

/* テキスト部分 */
div.item-box { padding-left:0; width:100%; }

}

@container( min-width:561px ) {

/* ベース */
div.card.naname-01 { transform:rotate(-4.5deg); }
div.card.naname-02 { transform:rotate(4.5deg); }
div.card.vertical-card { flex-direction:column; gap:20px; }
div.card.vertical-card div.pc-flex { display:flex; flex-direction:row; gap:20px; }

/* 全体調整 */
.initiative div.flex.flex-column { gap:20px; }

/* 画像 */
.pc-flex img { margin-bottom:0; }

/* 特殊処理 */
p.card-button a { font-size:20px; height:40px; width:300px; }

}

/* -------------------------------------------------- */
/* 店舗情報 */
/* -------------------------------------------------- */

/* ベース */
.store-all { gap:40px; }
.store-info { background-image:url('../img/store-info/cork.jpg'); border-radius:8px; border:8px solid #c19a73; padding:40px 10px; }
.store-box { background-color:var(--wh); border-radius:4px; box-shadow:4px 4px 4px 0 rgba(0, 0, 0, 0.25); gap:16px; padding:32px 20px; }

/* 店舗情報（写真） */
.store-box .ph img { height:auto; max-width:100%; width:auto; }

/* 見出し */
.store-box h2.center { font-size:24px; font-weight:700; line-height:32px; }
.business-hours h3 { font-size:20px; font-weight:700; line-height:160%; }

/* 営業時間 */
.business-hours { border:1px solid var(--bl); border-radius:8px; padding:8px 16px; }
.business-hours ul li.flex { justify-content:flex-start; }
.business-hours ul li.flex p { font-size:14px; font-weight:300; line-height:200%; }
.business-hours ul li.flex p:first-child { width:32.5%; }

/* 店舗情報 */
.s-info address, .s-info p { font-size:14px; line-height:200%; }
.s-info address { align-items:center; gap:8px; justify-content:flex-start; }
.s-info a.map-button { align-items:center; background-color:var(--bl); border-radius:20px; box-sizing:border-box; color:var(--wh); gap:4px; justify-content:center; line-height:100%; padding-bottom:4px; height:22px; width:66px; }
.s-info a.map-button img { transform:translateY(2px); height:10px; width:auto; }
.s-info p.shisetu-kijun { justify-content:flex-start; margin-top:8px; }
.s-info p.shisetu-kijun a { align-self:center; gap:4px; border:1px solid var(--bk); box-sizing:border-box; justify-content:center; transition:.3s; height:33px; width:164px; }
.s-info p.shisetu-kijun a:hover { background-color:#ddd; transition:.3s; }
.s-info p.shisetu-kijun a img { margin:5px 0; }

@container(min-width:561px) {

/* ベース */
.store-info { padding:40px 40px; margin-right:40px; margin-left:40px; }

/* 営業時間 */
.business-hours ul li.flex p { font-size:16px; }

/* 店舗情報 */
.s-info address, .s-info p { font-size:16px; }

}

/* -------------------------------------------------- */
/* kakariについて */
/* -------------------------------------------------- */

/* ベース */
.kakari { border-radius:24px; background-color:var(--re); padding:40px 0 20px 0; }
.kakari-box { background-color:var(--wh); border-radius:20px; padding:20px 0; margin:0 20px; position:relative; }

/* 見出し */
.kakari-box h3 { align-items:center; justify-content:center; margin-top:20px; margin-bottom:8px; }
.kakari-box h3 span { border-radius:20px; border:1px solid var(--re); font-weight:700; line-height:200%; height:32px; width:100px; }

/* テキスト */
.kakari-box p { margin:0 24px 20px 24px; }

/* 罫線 */
hr.kakari-hr { border:none; border-bottom:solid var(--re) 4px; }

/* リスト */
.kakari-box ol { margin:0 24px; }
.kakari-box ol li { text-indent:calc( -1rem - 4px ); padding-left:calc( 1rem + 4px ); line-height:200%; }
.kakari-box ol li::before { content:'①'; margin-right:4px; }
.kakari-box ol li:nth-child(2)::before { content:'②'; }
.kakari-box ol li:nth-child(3)::before { content:'③'; }
.kakari-box ol li:nth-child(4)::before { content:'④'; }

/* ボタン */
a.kakari-button { aspect-ratio:1/1; transition:.3s; position:absolute; height:100px; width:100px; }
a.kakari-button.button-takaragi { background-image:url('../img/kakari/button-takaragi.png'); bottom:-80px; right:80px; transform:rotate(-17.803deg); }
a.kakari-button.button-takaragi:hover { background-image:url('../img/kakari/button-takaragi-ov.png'); transition:.3s; }
a.kakari-button.button-futaba { background-image:url('../img/kakari/button-futaba.png'); bottom:0; right:0; transform:rotate(15.841deg); }
a.kakari-button.button-futaba:hover { background-image:url('../img/kakari/button-futaba-ov.png'); transition:.3s; }

@container(min-width:561px) {

/* ベース */
.kakari { margin-right:40px; margin-left:40px; }

/* ボタン */
a.kakari-button { height:144px; width:144px; }
a.kakari-button.button-takaragi { bottom:-110px; right:120px; }
a.kakari-button.button-futaba { bottom:-40px; right:-25px; }

}

/* -------------------------------------------------- */
/* 学生のみなさんへ */
/* -------------------------------------------------- */

/* ベース */
.student { background-color:var(--pi); padding:40px 25px; }

/* 見出し */
.student h3 { align-items:center; color:var(--bl); font-size:24px; font-weight:700; gap:5px; justify-content:center; line-height:32px; margin-bottom:16px; }
.student h3 > span { background-color:transparent; display:inline-block; padding:0 5px; }
.student h3::before, .student h3::after { border-bottom:2px dotted var(--bl); content:''; flex:1; }

/* ボタン */
.student .link-more { margin-top:16px; margin-bottom:40px; }

@container(min-width:561px) {

/* ベース */
.student { padding:40px; }

}

/* -------------------------------------------------- */
/* 採用情報 */
/* -------------------------------------------------- */

/* ベース */
.recruit { background-color:var(--or); padding:40px 0; }

/* 画像 */
.recruit img { margin:auto; height:auto; max-width:100%; }

/* テキスト */
.recruit p { line-height:200%; }

/* ボタン */
.recruit .link-more { margin-top:40px; }

@container( min-width:561px ) {

/* 画像 */
.recruit img { max-width:390px; }

}

/* -------------------------------------------------- */
/* お知らせ */
/* -------------------------------------------------- */

/* リスト */
.info ul { gap:32px; margin:0 20px 40px 20px; }
.info ul li { gap:8px; }
.info ul li div.sub-info { align-items:center; gap:24px; }
.info ul li div.sub-info time { font-size:16px; line-height:32px; }
.info ul li div.sub-info p.cat { font-size:14px; }
.info ul li div.sub-info p.cat a { align-items:center; aspect-ratio:100/30; background-image:url('../img/info/oshirase-back.png'); color:var(--wh); display:flex; gap:4px; justify-content:center; height:30px; width:100px; }
.info ul li div.sub-info p.cat a::before, .info ul li div.sub-info p.cat a::after { display:none; }
.info ul li div.sub-info p.cat.tayori a { background-image:url('../img/info/tayori-back.png'); }
.info ul li p.post-title { font-size:16px; line-height:32px; }

@container( min-width:561px ) {

/* リスト */
.info ul { margin:0 40px 40px 40px; }

}

/* -------------------------------------------------- */
/* モーダルウインドウ */
/* -------------------------------------------------- */

/* ベース */
.modal { align-items:center; backdrop-filter:blur(6px); display:none; justify-content:center; position:fixed; top:50%; left:50%; transform:translateY(-50%) translateX(-50%);  max-height:100%; height:100vh; width:100vw; z-index:10000; }
.modal-content { background-color:var(--wh); border-radius:24px; box-shadow:2px 2px 3px var(--bk); padding:40px 20px; position:relative; overflow-y:scroll; max-height:75vh; height:auto; width:90vw; }
.modal h3 { color:var(--bl); font-size:18px; font-weight:700; line-height:160%; margin-bottom:16px; }
.modal-content dl { align-items:flex-start; flex-direction:column; gap:5px; justify-content:flex-start; margin-bottom:20px; }
.modal-content dl.last-dl { margin-bottom:0; }
.modal-content dl dt, .modal-content dl dd { font-size:14px; font-weight:400; display:block; line-height:125%; padding:5px; width:100%; }
.modal-content dl dt { background-color:var(--ye); text-align:center; }
.modal-close { cursor:pointer; font-size:24px; font-weight:700; transform:translateY(calc( -37.5vh + 10px )); position:fixed; top:50%; right:30px; }

/* かかりつけ薬剤師の機能 */
.kakarituke h2 { align-items:center; color:var(--bl); font-size:18px; font-weight:700; gap:5px; justify-content:center; line-height:32px; margin-bottom:16px; }
.kakarituke h2 > span { background-color:transparent; display:inline-block; padding:0 5px; }
.kakarituke h2::before, .kakarituke h2::after { border-bottom:2px dotted var(--bl); content:''; flex:1; }
.modal.kakarituke div.block-item { gap:4px; margin-bottom:16px; }
.modal.kakarituke div.block-item h3 { color:var(--bk); font-size:16px; line-height:200%; position:relative; padding-left:1.5rem; margin-bottom:0; }
.modal.kakarituke div.block-item h3::before { content:'①'; position:absolute; top:0; left:0; }
.modal.kakarituke div.block-item h3.nmb-2::before { content:'②'; }
.modal.kakarituke div.block-item h3.nmb-3::before { content:'③'; }
.modal.kakarituke p { line-height:200%; padding:0 1.5rem; } 

@container( min-width:1000px ) {

/* ベース */
.modal-content { overflow:auto; padding:40px 80px; max-height:75vh; height:auto; max-width:800px; width:90vw; }
.modal h3 { font-size:20px; }
.modal-content dl { align-items:stretch; flex-direction:row; flex-wrap:wrap; margin-bottom:40px; }
.modal-content dl dt, .modal-content dl dd { font-size:16px; padding:8px; }
.modal-content dl dt { width:120px; }
.modal-content dl dd { width:calc( ( 100% - 10px ) - 120px ); }
.modal-close { font-size:30px; top:50%; left:50%; transform:translateY( calc( -37.5vh + 50px ) ) translateX(350px); right:auto; }

/* かかりつけ薬剤師の機能 */
.kakarituke h2 { font-size:20px; }
.modal.kakarituke .modal-close { transform:translateY( calc( -37.5vh + 100px ) ) translateX(350px); }
}