/* ==================== #point.css ==================== */ #point .box { position: relative; border: 4px solid #ffd7b8; border-radius: 1em; margin-top: 3em; } #point .box > div:not(:nth-of-type(1)) { border: dotted #f5a26b; border-width: 2px 0 0; margin: 1em 0 0; padding: 1em 0 0; } #point h3 { position: absolute; left: 0; top: 0; margin: 0; } #point h3 img { width: auto; height: 2.8em; } #point .box h4 { margin: 0; color: #872900; font-size: 120%; text-align: center; } @media (max-width: 640px) { #point .box { padding: 3em 1em 1em; } #point .box h3 { left: 50%; top: 0; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } #point .box h4 br { display: none; } } @media (min-width: 641px) { #point .box { padding: 1.5em; } #point .box h3 { left: 0; top: 0; -webkit-transform: translate(2em, -50%); transform: translate(2em, -50%); } #point .box > div { display: table; table-layout: fixed; width: 100%; } #point .box h4, #point .box p { display: table-cell; vertical-align: middle; } #point .box h4 { width: 12em; padding-right: 1em; } } /* ==================== .meal.p03.css ==================== */ body.meal.p03 section .head { position: relative; margin-bottom: 1em; } body.meal.p03 section .head:after { content: ' '; position: absolute; right: 0; bottom: 0; display: block; width: 100%; height: 8em; background-position: right bottom; background-repeat: no-repeat; background-size: auto 100%; } body.meal.p03 section:nth-of-type(1) .head:after { right: 2em; background-image: url(../images/meal/image3_1.png); } body.meal.p03 section:nth-of-type(2) .head:after { background-image: url(../images/meal/image3_2.png); } body.meal.p03 section:nth-of-type(3) .head:after { background-image: url(../images/meal/image3_3.png); background-size: auto 80%; } body.meal.p03 section .head h3 { display: inline-block; margin: 0; padding: 1em; background: url(../images/meal/title_back1.png) no-repeat center center; background-size: 100% 100%; color: #b84f26; font-size: 140%; line-height: 1; } @media (max-width: 640px) { body.meal.p03 section:nth-of-type(1) { padding-top: 1.5em; } body.meal.p03 section:nth-of-type(n+2) { padding-top: 2.5em; } body.meal.p03 section .head:after { right: 0; height: 5em; } body.meal.p03 section .head h3 { font-size: 110%; } } @media (min-width: 641px) { body.meal.p03 section { padding-top: 4em; width: 800px; } } /* ==================== @p01.css ==================== */ #meal1-1 .image img { width: 8em; } #meal1-2 .image img { width: 16em; } #meal1-3 .image img { width: 12em; } #meal1-3 h4 { margin: 0 0 1em; color: #872900; font-size: 110%; } #meal1-3 > div > div:nth-of-type(n+3) { border-top: 2px dotted #ccc; margin: 1em 0 0; padding: 1em 0 0; } #meal1-3 > div > div:nth-of-type(4) { border-top: none; } html.PC #meal1-3 > div > div .image { vertical-align: middle; } html.PC #meal1-3 > div > div:not(:nth-of-type(3)) h4 br { display: none; } /* html.SP #meal1-4 .sitelink.comingsoon { font-size: 70%; } */ #summary { margin-top: 6em; } /* ==================== @p02.css ==================== */ #column2-1 > div { background-image: url(../images/common/summary_doctor2.png); background-repeat: no-repeat; } html.PC #column2-1 > div { padding-top: 2.5em; padding-bottom: 2.5em; padding-left: 7em; background-size: 4em auto; background-position: 1.5em bottom; } html.SP #column2-1 > div { padding-left: 6em; background-size: 3.5em auto; background-position: 1.25em bottom; } html.SP #column2-1 p br { display: none; } #meal2-1 .image img { width: 6em; } #meal2-1 .contents-list { } #meal2-1 .contents-list { margin: 1em 0 0; } #meal2-1 .contents-list h4 { margin: 0; color: #872900; font-size: 110%; } #meal2-1 .contents-list + div { margin-top: 2em; } html.PC #meal2-1 .set .image { width: 12em; } html.PC #meal2-1 .contents-list h4 br { display: none; } /* ==================== @p04.css ==================== */ #main04-1 .image { width: 12em; } #main04-2 .image { width: 15em; }