/* Theme Name: BlankSlate Theme URI: https://github.com/tidythemes/blankslate Author: TidyThemes Author URI: http://tidythemes.com/ Description: Please read: tidythemes.com/concept. Donations: https://calmestghost.com/donate. BlankSlate is the definitive WordPress boilerplate starter theme. We've carefully constructed the most clean and minimalist theme possible for designers and developers to use as a base to build websites for clients or to build completely custom themes from scratch. Clean, simple, unstyled, semi-minified, unformatted, and valid code, SEO-friendly, jQuery-enabled, no programmer comments, standardized and as white label as possible, and most importantly, the CSS is reset for cross-browser-compatability and no intrusive visual CSS styles have been added whatsoever. A perfect skeleton theme. For support and suggestions, go to: https://github.com/tidythemes/blankslate/issues. Thank you. Tags: accessibility-ready, one-column, two-columns, custom-menu, featured-images, microformats, sticky-post, threaded-comments, translation-ready Version: 2021 Requires at least: 5.0 Tested up to: 5.8 Requires PHP: 7.0 License: GNU General Public License v3 or Later License URI: https://www.gnu.org/licenses/gpl.html Text Domain: blankslate BlankSlate WordPress Theme © 2011-2021 TidyThemes BlankSlate is distributed under the terms of the GNU GPL */ @charset "UTF-8"; /* Reset CSS - 2021.09 ---------------------------------------------------*/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, ruby, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, form, fieldset, legend, label, header, footer, hgroup, menu, nav, main, article, section, aside, details, figure, figcaption, canvas, embed, output, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; } header, footer, hgroup, menu, nav, main, article, section, aside, details, figure, figcaption { display: block; } body { line-height: 1; } ol, ul { list-style: none; } hr { display: none; } address, em { font-style: normal; } table { border-collapse: collapse; } img { vertical-align: bottom; } /* Fonts ---------------------------------------------------*/ body { font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "游ゴシック体", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", Sans-Serif; } /* clearfix ---------------------------------------------------*/ .clearfix::after { content: ''; display: block; clear: both; height: 0; } /*全体設定*/ html { overflow-x: hidden; } body { width: 100%; max-width: 100vw; min-width: 375px; margin: 0 auto; line-height: 2; color: #4C4B45; } #page a { text-decoration: none; } #title #wave { position: relative; } #title #wave img { width: 100%; } #title h2 { font-size: 2.5rem; text-align: center; position: absolute; top: 25%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } main { margin-top: 60px;} h3,#plan caption { color: #71C3A7; font-weight: bold; font-size: 1.875rem;} h3::before { content: ''; display: inline-block; width: 45px; height: 45px; background: url("images/icon.svg") no-repeat; background-size: contain; vertical-align: middle; } caption::before { content: ''; display: inline-block; width: 45px; height: 45px; background: url("images/icon.svg") no-repeat; background-size: contain; vertical-align: middle; } /*トップへ戻る*/ .button { position: fixed; z-index: 5; right: 0; bottom: 0; padding: 10px; cursor: pointer; -webkit-transition: .3s; transition: .3s; /*デフォルトで非表示にする*/ opacity: 0; visibility: hidden; } /*このクラスが付与されると表示する*/ .active { opacity: 1; visibility: visible; } footer { position: relative; } /*このクラスが付与されると表示する*/ .absolute { position: absolute; top: -108px; bottom: auto; } @media screen and (max-width: 1220px) { /*------------------------ ページタイトル --------------------------*/ #title h2 { top: 20%; } } @media (max-width: 799px) { #title h2 { width: 100%; font-size: 1.875rem; top: 17%;} main { margin-top: 39px; } h3,#plan caption { color: #71C3A7; font-weight: bold; font-size: 1.5625rem;} #title h2 { margin-top: 14px;} /*トップへ戻る　レスポンシブ*/ .button { width: 10%; } .button img { width: 100%; } .absolute { position: absolute; top: -35px; bottom: auto; } } #content { max-width: 1000px; margin: 0 auto; padding: 0 5%; } /*header*/ /*キャッチコピー*/ header #navigetion #header-wrap h1 img { width: 200px; } header #navigetion #header-wrap h1 #look span { color: #3cb371; } .h_navT:active > a { color: #788D8C; text-decoration: underline; } @media screen and (min-width: 800px) { /*ドロップダウンメニュー*/ header nav #navigetion { max-width: 1000px; margin: auto; list-style: none; } /*キャッチコピー*/ header #navigetion #header-wrap h1 #cath { font-size: 0.9rem; word-break: keep-all; } header .gnav { display: -webkit-box; display: -ms-flexbox; display: flex; height: 2rem; margin: 0 auto; } header .gnav > li { /*親階層のみ幅を25%にする*/ width: 25%; text-align: center; } /*全てのリスト・リンク共通*/ header .gnav li { position: relative; } header .gnav li a { border-right: 2px solid #eee; display: block; height: 2rem; line-height: 2rem; text-decoration: none; width: 100%; } /*子階層以降共通*/ header .gnav li li { height: 0; opacity: 0; overflow: hidden; -webkit-transition: opacity .5s; transition: opacity .5s; } header .gnav li ul { -webkit-box-shadow: 0 2px 2px rgba(140, 155, 147, 0.3); box-shadow: 0 2px 2px rgba(140, 155, 147, 0.3); background-color: #f4f9f8; } header .gnav li li a { border-top: 1px solid #eee; } header .gnav li:hover > ul > li { height: 2rem; opacity: 1; overflow: visible; } /*hover*/ header .gnav > li > a, header .gnav > li li > a { /*子階層*/ position: relative; display: inline-block; } header .gnav > li > a::after, header .gnav > li li > a::after { position: absolute; bottom: 4px; left: 2px; content: ''; width: 100%; height: 2px; background: #788D8C; -webkit-transform: scale(0, 1); transform: scale(0, 1); -webkit-transform-origin: center top; transform-origin: center top; -webkit-transition: -webkit-transform .3s; transition: -webkit-transform .3s; transition: transform .3s; transition: transform .3s, -webkit-transform .3s; } header .gnav > li:hover > a:hover::after { -webkit-transform: scale(0.5, 0.5); transform: scale(0.5, 0.5); } header .gnav > li li:hover > a:hover::after { -webkit-transform: scale(0.6, 0.6); transform: scale(0.6, 0.6); } header .gnav > li li > a { /*子階層*/ background: #fff; } /*リストに「▶」を付ける*/ header .gnav .h_navT .r_arrow::before { /*子階層*/ border: 5px solid transparent; border-top: 5px solid #4C4B45; content: ""; right: 20px; position: absolute; top: 1rem; -webkit-transform: translateY(-40%); transform: translateY(-40%); } /* |開||閉|ボタンを非表示にする */ header #check header #btn_open, header #btn_close { display: none; } #navigetion #header-wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding-bottom: 0.8rem; font-size: 1.125rem; margin: 0 2rem; } /*お問い合わせsp版隠す*/ #sp-nav-menu .gnav .contact-btn { display: none; } } /*ナビゲーションpc*/ header { -webkit-box-shadow: 0 2px 2px rgba(140, 155, 147, 0.65); box-shadow: 0 2px 2px rgba(140, 155, 147, 0.65); background-color: #f4f9f8; position: fixed; top: 0; left: 0; z-index: 5000; width: 100%; min-height: 60px; margin: 0 auto; } header nav #navigetion a { color: #4C4B45; } /*お問い合わせボタン*/ #header-wrap .contact-btn a { background: #1374AF; padding: 0.5rem 1rem; color: #fff; } #header-wrap .contact-btn #mail-icon { width: 1.5rem; stroke: #fff; stroke-width: 2px; fill: #1374AF; margin-bottom: 0.5rem; margin-right: 2px; } #header-wrap .contact-btn a:hover, header #sp-nav-menu .gnav .contact-btn a:hover { background: #68aab6; } /* 背景、通常時隠す設定 */ header #n_Back, header #sp_wave { display: none; } /*checkbox非表示*/ header #check, header #btn_open { display: none; } @media screen and (max-width: 799px) { /*レスポンシブ*/ #navigetion { position: relative; } #navigetion #header-wrap { display: block; font-size: 1rem; margin-left: 1rem; } /*キャッチコピー*/ #navigetion #header-wrap h1 { font-size: 0.875rem; margin-left: 1.5em; } header #header-wrap h1 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } #header-wrap .contact-btn { display: none; } /* |開||閉|ボタン */ header #btn_open, header #sp-nav-menu #btn_close { font-size: 10px; display: block; /* 見える */ width: 3.5em; cursor: pointer; /* 指のマーク出る */ text-align: center; position: absolute; /* ページ右上部に絶対配置*/ top: 25px; right: 18px; height: 3.5em; -webkit-transition: .3s; transition: .3s; z-index: 10000; border-radius: 50%; padding: 4px 4.5px; margin-right: 1em; background-color: #fff; font-weight: bold; border: 2px solid #788D8C; } header #sp-nav-menu #btn_open { -webkit-animation: fadein .5s; animation: fadein .5s; } header #sp-nav-menu #btn_close { -webkit-animation: fadeout 0 0.5s; animation: fadeout 0 0.5s; } header #btn_open::before { content: ""; width: 3.5em; height: 0.5em; border-bottom: #4C4B45 1px solid; position: absolute; top: 1.5em; left: 3px; } header #btn_open::after { content: ""; width: 3.5em; height: 0.5em; border-bottom: #4C4B45 1px solid; position: absolute; top: 2.4em; left: 3px; } header #sp-nav-menu #btn_close::before { content: ""; display: block; width: 3.5em; /*バツ線の長さ*/ height: 1px; /*バツ線の太さ*/ background: #4C4B45; -webkit-transform: rotate(30deg); transform: rotate(30deg); -webkit-transform-origin: 0% 50%; transform-origin: 0% 50%; position: absolute; bottom: 2.4em; left: 6px; } header #sp-nav-menu #btn_close::after { content: ""; display: block; width: 3.5em; /*バツ線の長さ*/ height: 1px; /*バツ線の太さ*/ background: #4C4B45; -webkit-transform: rotate(-30deg); transform: rotate(-30deg); -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; position: absolute; bottom: 2.4em; right: 6px; } /*隠してあるnavの設定*/ header #sp-nav-menu::after { content: ""; width: 100%; min-height: 600px; position: absolute; z-index: -9999; top: 0; left: 0; -webkit-transition: all 0.5s; transition: all 0.5s; /* 5秒かけて変化する */ } header #sp-nav-menu { position: absolute; /* 親要素(header/#navigetionを基準に絶対配置) */ top: -150vh; right: 0; /*画面外に配置 */ background-color: #f4f9f8; z-index: 9999; /* 重なり順:最上面 */ width: 100%; /* デバイス幅100% */ -webkit-transition: all 0.5s; transition: all 0.5s; /* 5秒かけて変化する */ } /* check中、背景が出現する設定 */ #check:checked ~ #n_Back { display: block; position: absolute; top: 0; left: 0; z-index: 9000; width: 100vw; /*画面全体*/ height: 150vh; -webkit-animation: beback 0.5s; animation: beback 0.5s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; /* ｱﾆﾒｰｼｮﾝ終了状態を継続 */ } /* check中、navが出現する設定 */ #check:checked ~ #sp-nav-menu { top: 0; text-align: center; /* nav内要素を中央揃え */ } /* 開閉ボタンアニメーション */ #check:checked ~ #btn_open { -webkit-animation: fadeout 0.5s; animation: fadeout 0.5s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } #check:checked ~ #btn_close { visibility: visible; -webkit-animation: fadein 0.5s; animation: fadein 0.5s; } /* 背景のアニメーション変数の設定 */ @-webkit-keyframes beback { /* ふわっと */ 0% { background: rgba(0, 0, 0, 0); } 100% { background: rgba(123, 153, 145, 0.8); } } @keyframes beback { /* ふわっと */ 0% { background: rgba(0, 0, 0, 0); } 100% { background: rgba(123, 153, 145, 0.8); } } @-webkit-keyframes fadeout { /* 開ボタンフェードアウト */ 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 0; } } @keyframes fadeout { /* 開ボタンフェードアウト */ 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 0; } } @-webkit-keyframes fadein { /* 閉ボタンフェードアウト */ 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadein { /* 閉ボタンフェードアウト */ 0% { opacity: 0; } 100% { opacity: 1; } } /*spナビゲーションメニュー*/ header #sp-nav-menu .gnav { margin-top: 50px; } header #sp-nav-menu .gnav .h_navT { line-height: 3.5; } header #sp-nav-menu .gnav .h_navT #links02, header #sp-nav-menu .gnav .h_navT #links03, header #sp-nav-menu .gnav .h_navT #links04 { line-height: 1.5; } /*hover*/ header .gnav > li > a, header .gnav > li li > a { /*子階層*/ position: relative; display: inline-block; } header .gnav > li > a::after { position: absolute; bottom: 18px; left: 2px; content: ''; width: 100%; height: 1px; background: #788D8C; -webkit-transform: scale(0, 1); transform: scale(0, 1); -webkit-transform-origin: center top; transform-origin: center top; -webkit-transition: -webkit-transform .3s; transition: -webkit-transform .3s; transition: transform .3s; transition: transform .3s, -webkit-transform .3s; } header .gnav > li li > a::after { position: absolute; bottom: 0; left: 0.8rem; content: ''; width: 70%; height: 1px; background: #788D8C; -webkit-transform: scale(0, 1); transform: scale(0, 1); -webkit-transform-origin: center top; transform-origin: center top; -webkit-transition: -webkit-transform .3s; transition: -webkit-transform .3s; transition: transform .3s; transition: transform .3s, -webkit-transform .3s; } header .gnav > li:hover > a:hover::after { -webkit-transform: scale(1, 1); transform: scale(1, 1); } header .gnav > li li:hover > a:hover::after { -webkit-transform: scale(1, 1); transform: scale(1, 1); } header .gnav > li:active > a { color: #788D8C; } header .gnav > li li > a { /*子階層*/ width: 12rem; text-align: left; margin-left: 4rem; } header .gnav > li li > a:before { content: "- "; margin-left: 8px; } /*リストに「▶︎」を付ける*/ header .gnav .h_navT .r_arrow { position: relative; } header .gnav .h_navT .r_arrow:before { border: 5px solid transparent; border-top: 5px solid #4C4B45; content: ""; right: -1.5rem; position: absolute; top: 1.9rem; -webkit-transform: translateY(-40%); transform: translateY(-40%); } /*お問い合わせボタン*/ header #sp-nav-menu .gnav .contact-btn { display: block; margin-top: 1rem; } header #sp-nav-menu .gnav .contact-btn a { background: #1374AF; padding: 0.2rem 0.5rem; color: #fff; font-size: 0.93rem; } header #sp-nav-menu .gnav .contact-btn a::after { width: 0; } header #sp-nav-menu .gnav .contact-btn #mail-icon { width: 1.2rem; stroke: #fff; stroke-width: 2px; fill: #1374AF; margin-bottom: 0.5rem; margin-right: 2px; } /*背景のwave*/ header #sp-nav-menu .wave_container { position: relative; background: #f4f9f8; height: 95px; } header #sp-nav-menu .wave_container .wave { position: absolute; height: 95px; width: 100%; background: rgba(0, 0, 0, 0); bottom: 0; } header #sp-nav-menu .wave_container .wave::before, header #sp-nav-menu .wave_container .wave::after { content: ""; display: block; position: absolute; border-radius: 100% 50%; } header #sp-nav-menu .wave_container .wave::before { width: 55%; height: 109%; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(37%, rgba(123, 153, 145, 0.8)), color-stop(1%, rgba(0, 0, 0, 0))); background-image: linear-gradient(rgba(123, 153, 145, 0.8) 37%, rgba(0, 0, 0, 0) 1%); right: -1.5%; top: 60%; } header #sp-nav-menu .wave_container .wave::after { width: 55%; height: 100%; background-color: #f4f9f8; left: -1.5%; top: 40%; } } /*子階層以降共通ドロップダウンメニュー header .gnav li li { height: 0; opacity: 0; overflow: hidden; transition: opacity .5s; } header .gnav li:hover > ul > li { height: 2rem; opacity: 1; overflow: visible; } /*footer*/ footer { padding: 150px 0 0; background-image: url("images/machi_3.svg"); background-repeat: repeat-x; background-position: top center; background-size: auto 155px; color: #fff; margin-right: calc(50% - 50vw); margin-left: calc(50% - 50vw); } footer #f_content { width: 100%; margin: 0 auto; background-color: #71C3A7; } footer #f_content a { color: #fff; } footer #f_content a:hover { text-decoration: underline; } footer #f_content .f_flex { display: -webkit-box; display: -ms-flexbox; display: flex; max-width: 1000px; margin: 0 auto; } footer #f_content .f_flex .flex_menu { width: 25%; font-size: 1.125rem; } footer #f_content .f_flex #f_Top { width: 15%; margin-left: 10%; } footer #f_content .flex_menu .f_link { margin-top: 20px; padding-left: 5%; font-size: 1rem; } footer #f_content .flex_menu .f_link li { line-height: 2.5; } footer #f_content .flex_menu .f_link li::before { content: "- "; } footer #f_logo { background-color: #BDE0BD; } footer #f_logo .f_logo_content { text-align: center; } footer #f_logo p { margin-top: 10px; font-size: 0.75rem; color: #4C4B45; } footer #f_logo img { width: 90.83px; margin-top: 1rem; } footer { clear: both; } @media screen and (max-width: 799px) { footer #f_content { display: none; } } /*headerカレント設定*/ .home nav .gnav .top a, #suggestion nav .suggestion a, #app nav .app a, #feature nav .feature a, #morito nav .morito a, #operation nav .operation a, #plan nav .plan a, #case nav .case a, #exhibition nav .exhibition a, #exhibition_page nav .exhibition a, #lecture_page nav .exhibition a, #symposium_page nav .exhibition a { color: #788D8C; text-decoration: underline; } #contact nav .contact a, #contact nav .gnav .contact-btn a { background: #68aab6; } .homenav .gnav .top a::after, #suggestion nav .gnav .suggestion a::after, #app nav .gnav .app a::after, #feature nav .gnav .feature a::after, #morito nav .gnav .morito a::after, #operation nav .gnav .operation a::after, #plan nav .gnav .plan a::after, #case nav .gnav .case a::after, #exhibition nav .gnav .exhibition a::after, #exhibition_page .gnav .exhibition a::after, #lecture_page .gnav .exhibition a::after, #symposium_page .gnav .exhibition a::after { width: 0; } @media screen and (max-width: 799px) { #suggestion nav .r_arrow, #app nav .r_arrow, #feature nav .r_arrow, #morito nav .r_arrow, #plan nav .r_arrow, #case nav .r_arrow, #exhibition nav .r_arrow, #operation nav .r_arrow, #exhibition_page nav .exhibition .r_arrow, #lecture_page nav .exhibition .r_arrow, #symposium_page nav .exhibition .r_arrow { text-decoration: none; } } /*footerカレント*/ .homefooter #f_content .top a, #suggestion footer #f_content .suggestion a, #app footer #f_content .app a, #feature footer #f_content .feature a, #morito footer #f_content .morito a, #operation footer #f_content .operation a, #plan foooter #f_content .plan a, #case footer #f_content .case a, #exhibition footer #f_content .exhibition a, #exhibition_page footer .exhibition a, #lecture_page footer .exhibition a, #symposium_page footer .exhibition a { text-decoration: underline; } /*----------------------------------------------------------------------------------お問い合わせ*/ #contact #content #contact_txt { font-size: 1.2rem; text-align: center; margin-top: 3rem; } #contact #content .Form { margin-top: 80px; margin-left: auto; margin-right: auto; max-width: 900px; } #contact #content .Form-Item { padding-top: 24px; padding-bottom: 24px; width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } #contact #content .Form-Item-Label { width: 100%; max-width: 248px; letter-spacing: 0.05em; font-weight: bold; font-size: 18px; } #contact #content .Form-Item-Label.isMsg { margin-top: 8px; margin-bottom: auto; } #contact #content .Form-Item-Label-Required { border-radius: 6px; margin-right: 8px; padding-top: 8px; padding-bottom: 8px; width: 48px; display: inline-block; text-align: center; background: #68AAB6; color: #fff; font-size: 14px; } #contact #content .Form-Item-Input { border: 2px solid #ddd; border-radius: 6px; margin-left: 40px; padding-left: 1em; padding-right: 1em; height: 48px; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; width: 100%; max-width: 410px; background: #eaedf2; font-size: 18px; } #contact #content .Form-Item-Input:hover, #contact #content .Form-Item-Input:focus, #contact #content .Form-Item-Input:active { border: 2px solid #68AAB6; outline: none; } #contact #content .Form-Item-Textarea:hover, #contact #content .Form-Item-Textarea:focus, #contact #content .Form-Item-Textarea:active { border: 2px solid #68AAB6; outline: none; } #contact #content .Form-Item-Textarea { border: 2px solid #ddd; border-radius: 6px; margin-left: 40px; padding: 0 1em; height: 216px; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; width: 100%; max-width: 410px; background: #eaedf2; font-size: 18px; } #contact #content .Form-Btn { border-radius: 6px; margin-top: 32px; margin-left: auto; margin-right: auto; padding-top: 10px; padding-bottom: 10px; width: 150px; display: block; letter-spacing: 0.05em; background: #68AAB6; color: #fff; font-size: 1.125rem; border: none; } #contact #content .Form-Btn:hover { background-color: #A4CCD3; cursor: pointer; } @media screen and (max-width: 799px) { #contact #content #contact_txt { font-size: 1rem; } #contact #content .Form { margin: 40px 0 0 0; } #contact #content .Form-Item { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } #contact #content .Form-Item-Label { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 15px; } #contact #content .form_no_span { margin-left: 56px; } #contact #content .Form-Item-Label.isMsg { margin-top: 0; } #contact #content .Form-Item-Label-Required { border-radius: 4px; padding-top: 4px; padding-bottom: 4px; width: 32px; font-size: 10px; margin-left: 20px; } #contact #content .Form-Item-Input { margin-left: 0; margin-top: 18px; height: 40px; -webkit-box-flex: inherit; -ms-flex: inherit; flex: inherit; font-size: 15px; width: 80%; } #contact #content .Form-Item-Textarea { margin-top: 18px; margin-left: 0; height: 200px; -webkit-box-flex: inherit; -ms-flex: inherit; flex: inherit; font-size: 15px; width: 80%; padding: 0 2em; } #contact #content .Form-Btn { margin-top: 24px; padding-top: 8px; padding-bottom: 8px; width: 160px; font-size: 1rem; } #contact #content .Form-Item select { padding: 0 2.6em; } #contact #content #Form-Item-Input2 { width: auto;} } #contact #content .form_no_span { margin-left: 56px; max-width: 192px; } .home { /*------------------------ リードメッセージ --------------------------*/ /*------------------------ サキモリ特徴 --------------------------*/ /*------------------------ モリト紹介 --------------------------*/ /*------------------------ お知らせ --------------------------*/ } .home main { text-align: center; } .home #leadmessage_area { position: relative; } .home #leadmessage_area img { width: 100%; position: relative; } .home #lead_message { padding: 70px 0 100px; text-align: center; font-size: 1.5rem; position: absolute; top: 40%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .home #lead_message span { font-size: 1.875rem; font-weight: bold; color: #fff; } .home #content { max-width: 1000px; margin: 0 auto; padding: 0 5%; } .home #content h2 { font-size: 3.125rem; } .home #content .content_box { margin: 95px 0; } .home #content .content_box dl dt { font-size: 2rem; color: #71C3A7; font-weight: bold; border-bottom: #ccc 1px solid; } .home #content .content_box dl dd { padding: 36px 5%; text-align: left; font-size: 1.125rem; } .home #content .content_box .float_L { float: left; width: 60%; } .home #content .content_box .float_R { float: right; width: 60%; } .home #content .content_box { clear: both; } .home #content .content_box img { width: 35%; -webkit-filter: drop-shadow(5px 5px 5px rgba(138, 139, 138, 0.8)); filter: drop-shadow(5px 5px 5px rgba(138, 139, 138, 0.8)); } .home #content .content_box dl dt::before { content: ''; display: inline-block; width: 45px; height: 45px; background: url("images/icon.svg") no-repeat; background-size: contain; vertical-align: middle; } .home #content .more_btn { clear: both; } .home #content .more_btn a { display: block; width: 30%; margin-left: 35%; padding: 10px; color: #fff; background-color: #71c3a7; -webkit-box-shadow: 5px 5px 5px rgba(68, 89, 79, 0.75); box-shadow: 5px 5px 5px rgba(68, 89, 79, 0.75); } .home #content .more_btn a:hover { background-color: #aadbca; } .home #morito { background-color: #eaf4ef; border-radius: 10px; margin: 120px 5%; padding: 5%; text-align: left; } .home #morito #message { font-size: 1.5625rem; margin-bottom: 30px; text-align: center; font-weight: bold; } .home #morito #message .line { background: -webkit-gradient(linear, left top, left bottom, color-stop(60%, transparent), color-stop(60%, #f7f2b0)); background: linear-gradient(transparent 60%, #f7f2b0 60%); } .home #morito ul { margin-left: calc((100% - 32em) / 2); } .home #morito ul li { font-size: 1.25rem; } .home #morito ul.cp_list { padding: 0.5em; list-style: none; } .home #morito ul.cp_list li { position: relative; padding: 0.3em 1em 0.3em 2.3em; } .home #morito ul.cp_list li:after, .home #morito ul.cp_list li:before { content: ''; position: absolute; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .home #morito ul.cp_list li:before { top: 0.7em; left: 0.2em; width: 12px; height: 12px; border: 2px solid #71c3a7; } .home #morito ul.cp_list li:after { top: 0.9em; left: 0.7em; width: 14px; height: 14px; background: rgba(113, 189, 138, 0.5); -webkit-transform: rotate(60deg); transform: rotate(60deg); } .home #morito #morito_flex { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .home #morito #morito_img { width: 25%; text-align: center; } .home #morito #morito_img img { width: 100%; } .home #morito #morito_text { background-color: #71c3a7; width: 55%; } .home #morito #morito_text { position: relative; display: inline-block; margin: 1.5em 0 1.5em 15px; padding: 10px 5%; min-width: 120px; max-width: 100%; color: #4C4B45; font-size: 16px; background: #71c3a7; border: solid 3px #71c3a7; -webkit-box-sizing: border-box; box-sizing: border-box; border-radius: 15px; } .home #morito #morito_text:before { content: ""; position: absolute; top: 50%; left: -24px; margin-top: -12px; border: 12px solid transparent; border-right: 12px solid #71c3a7; z-index: 2; } .home #morito #morito_text:after { content: ""; position: absolute; top: 50%; left: -30px; margin-top: -14px; border: 14px solid transparent; border-right: 14px solid #71c3a7; z-index: 1; } .home #morito #morito_text p { margin: 0; padding: 0; } .home #morito #morito_name { font-size: 1.5rem; color: #fff; font-weight: bold; } .home #morito #morito_name br { display: none; } .home #morito #text { padding-bottom: 20px; color: #fff; } .home #morito .morito_btn a { display: block; width: 40%; margin-left: 35%; padding: 10px; color: #fff; background-color: #1374af; -webkit-box-shadow: 5px 5px 5px rgba(68, 89, 79, 0.75); box-shadow: 5px 5px 5px rgba(68, 89, 79, 0.75); text-align: center; } .home #morito .morito_btn a:hover { background: #68aab6; } .home #content #topics { clear: both; padding: 0 10%; margin: 50px 0; text-align: center; } .home #content #topics h3 { display: inline; font-size: 1.875rem; } .home #content #topics h3::before { display: none;} .home #content #topics table { width: 100%; margin-top: 30px; } .home #content #topics table tr { line-height: 3rem; } .home #content #topics table tr th::before { content: ''; display: inline-block; width: 25px; height: 25px; background: url("images/icon.svg") no-repeat; background-size: contain; vertical-align: middle; } .home #content #topics table th span { background-color: #f7f2b0; } .home #content #topics table .title { text-align: left; } @media screen and (max-width: 1170px) { .home #lead_message { font-size: 1.125rem; width: 100%; } .home #lead_message span { font-size: 1.1875rem; } .home #content .content_box dl dt { font-size: 1.5625rem; color: #71c3a7; font-weight: bold; border-bottom: #ccc 1px solid; } } @media screen and (max-width: 890px) { .home #morito #message { font-size: 1.25rem; } .home #morito #morito_name { font-size: 2rem; } } @media screen and (max-width: 799px) { .home { /*------------------------ リード文 --------------------------*/ /*------------------------ サキモリ特徴 --------------------------*/ /*------------------------ モリト紹介 --------------------------*/ } .home #content .content_box { margin: 50px 0; } .home #lead_message { padding: 70px 0 100px; text-align: center; font-size: 0.875rem; margin-top: 0.8rem;} .home #lead_message span { font-size: 1.125rem; font-weight: bold; color: #fff; } .home #content h2 { font-size: 2rem; } .home #content .content_box .float_L { display: block; width: 100%; } .home #content .content_box .float_R { display: block; width: 100%; } .home #content .content_box img { width: 60%; } .home #content .more_btn a { display: block; width: 60%; margin-left: 20%; } .home #morito #message { font-size: 1rem; margin-bottom: 30px; } .home #morito #message br { display: none; } .home #morito ul { margin-left: 0; } .home #morito ul li { font-size: 1rem; } .home #morito #morito_name { font-size: 1rem; color: #fff; font-weight: bold; } .home #morito #text { float: none; width: 100%; clear: both; } .home #morito .morito_btn { display: inline; margin-top: 20px; } .home #morito .morito_btn a { width: 80%; text-align: center; margin-left: 7%; font-size: 0.785rem; } .home #content #topics h3 { font-size: 1.25rem; } .home #content #topics table { font-size: 0.875rem; line-height: 2; } .home #content #topics table th, .home #content #topics table td { display: block; text-align: left; } .home #content #topics table td { border-bottom: #ccc 1px solid; } } @media screen and (max-width: 630px) { .home #morito ul li { font-size: 0.875rem; } } @media screen and (max-width: 425px) { .home { /*------------------------ サキモリ特徴 --------------------------*/ } .home #content h2 { font-size: 1.6rem; } .home #morito .br_none { display: inline; } } #operation #content_area { padding: 50px 10%; } #operation #content h3 { text-align: left; font-size: 2.1875rem; color: #71c3a7; font-weight: bold; clear: both; margin-bottom: 20px; line-height: 2rem; } #operation #content .float_L { width: 20%; float: left; } #operation #content .float_R { width: 70%; float: right; } #operation .content_box { margin: 10px 0; } #operation .line { text-align: left; margin-left: 10%; color: #71c3a7; clear: both; font-size: 3rem; } #operation footer { clear: both; } @media screen and (max-width: 799px) { #operation { /*------------------------ 見出し --------------------------*/ } #operation #content h3 { font-size: 1.5625rem; text-align: center; } #operation .line { text-align: center; margin-left: 10%; color: #71c3a7; clear: both; font-size: 3rem; } } #app { /*sp版用サキモリアプリ画像*/ } #app #content h3 { text-align: left; font-size: 2rem; color: #71c3a7; font-weight: bold; } #app #content h3::before { content: ''; display: inline-block; width: 35px; height: 45px; background: url("images/icon.svg") no-repeat; background-size: contain; vertical-align: middle; } #app .app_float_L { float: left; width: 40%; margin-left: 4%; } #app .sp { display: none; } #app .app_float_R { float: right; width: 30%; margin-right: 10%; } #app .app_float_R img { width: 100%; } #app .app_box { clear: both; padding: 70px 0; } #app h4 { font-size: 1.5rem; line-height: 1.5; width: 12em; padding-left: 3%; background: -webkit-gradient(linear, left top, left bottom, color-stop(60%, transparent), color-stop(60%, #f7f2b0)); background: linear-gradient(transparent 60%, #f7f2b0 60%); } #app .app_box .app_float_L .li_title { margin: 20px 0 10px; font-size: 1.25rem; width: 100%; border-bottom: #ccc 1px solid; } #app .app_box .app_float_L ul { margin-bottom: 30px; } #app .app_box .app_float_L li { list-style: square inside; padding: 15px 1%; line-height: 1rem; } #app .app_box #qr_flex { display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 20px; } #app .app_box #qr_flex img { width: 100%; } #app .app_box #qr_flex dl { margin: 0 7% 0 0; text-align: center; } #app .app_box .app_manual { margin-top: 20px; text-decoration: underline; } #app .app_box .app_manual a:hover { color: #999; } #app footer { clear: both; } @media screen and (max-width: 1120px) { #app { /*------------------------ 文字サイズ変更 --------------------------*/ } #app .app_box .app_float_L li { font-size: 0.875rem; } } @media screen and (max-width: 799px) { #app { /*------------------------ 配置変更 --------------------------*/ } #app .app_float_L { float: none; width: 96%; margin-left: 4%; } #app .app_float_R { display: none; } #app .sp { display: block; float: left; } #app .bunner img { width: 50%; } #app .app_box .app_float_L li { padding: 8px 1%; line-height: 1rem; } } @media screen and (max-width: 425px) { #app { /*------------------------ サキモリ特徴 --------------------------*/ } #app #content h2 { font-size: 1.25rem; } #app .app_box .app_float_L li { font-size: 0.785rem; padding: 8px 1%; line-height: 1rem; } } #exhibition #content h3 { text-align: left; font-size: 2rem; color: #71c3a7; font-weight: bold; } #exhibition #content h3::before { content: ''; display: inline-block; width: 35px; height: 45px; background: url("images/icon.svg") no-repeat; background-size: contain; vertical-align: middle; } #exhibition #content .exhibition_box { margin: 70px 0; } #exhibition #content ul { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 10px 4%; } #exhibition #content ul li { display: list-item; text-align: -webkit-match-parent; line-height: 1.2; } #exhibition #content ul li:nth-child(n+2) { margin-left: 20px; padding-left: 20px; border-left: #ccc solid 1px; } #exhibition #content ul li:hover { text-decoration: underline; cursor: pointer; } #exhibition #content ul li a { color: #4C4B45; } @media screen and (max-width: 799px) { #exhibition #content .exhibition_box { margin: 50px 0; } #exhibition #content ul { display: block; } #exhibition #content ul li:nth-child(n+2) { margin-left: 0; padding-left: 0; border-left: none; } #exhibition #content ul li { line-height: 2; list-style: square inside; } #exhibition #content ul li br { display: none; } } @media screen and (max-width: 799px) and (max-width: 425px) { #exhibition #content h2 { font-size: 1.25rem; } } #suggestion #content .suggestion_box h3 { text-align: left; font-size: 2rem; color: #71c3a7; font-weight: bold; } #suggestion #content h3::before { content: ''; display: inline-block; width: 45px; height: 45px; background: url("images/icon.svg") no-repeat; background-size: contain; vertical-align: middle; } #suggestion .suggestion_box { margin: 95px 0; } #suggestion .suggestion_box .text { margin: 0 5%; } #suggestion .suggestion_box .suggestion_img { text-align: center; } #suggestion .suggestion_box p img { width: 80%; } #suggestion .suggestion_box p { text-align: left; } #suggestion .suggestion_box .sug_btn { text-align: center; margin-top: 45px; } #suggestion .suggestion_box .sug_btn a { display: block; background-color: #71c3a7; color: #fff; width: 32.6%; margin-left: 33.7%; -webkit-box-shadow: 5px 5px 5px rgba(68, 89, 79, 0.75); box-shadow: 5px 5px 5px rgba(68, 89, 79, 0.75); padding: 5px; } #suggestion .suggestion_box .flex { display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: 30px; } #suggestion .suggestion_box .flex .flow { width: 28.5%; border-radius: 10px; } #suggestion .suggestion_box .flex #flow1 { background-color: #edf2ed; } #suggestion .suggestion_box .flex #flow2 { background-color: #becebe; } #suggestion .suggestion_box .flex #flow3 { background-color: #9eb79e; } #suggestion .suggestion_box .flex dl { padding: 10px 1%; } #suggestion .suggestion_box .flex dl dt { font-size: 1.125rem; text-align: center; margin-bottom: 10px; } #suggestion .suggestion_box .flex dl dd { font-size: 0.875rem; } #suggestion .triangle { margin: 130px 1%; width: 0; height: 0; border-top: 25px solid transparent; border-bottom: 25px solid transparent; border-left: 25px solid #4c4b45; } @media screen and (max-width: 799px) { #suggestion { /*------------------------ 見出し --------------------------*/ /*------------------------ ボタン --------------------------*/ /*------------------------ 活用展開 --------------------------*/ } #suggestion #content .suggestion_box h3 { font-size: 1.5625rem; } #suggestion .suggestion_box .sug_btn a { font-size: 0.875rem; width: 40%; margin-left: 30%; } #suggestion .suggestion_box .flex { display: block; } #suggestion .suggestion_box .flex .flow { width: 80%; margin: 0 9%; } #suggestion .triangle { margin: 20px 0 0 45%; width: 0; height: 0; border-top: 25px solid #4c4b45; border-left: 25px solid transparent; border-right: 25px solid transparent; } } @media screen and (max-width: 500px) { #suggestion { /*------------------------ ボタン --------------------------*/ } #suggestion .suggestion_box .sug_btn a { font-size: 0.875rem; width: 50%; margin-left: 25%; color: #fff; } } /*チョコ*/ #suggestion { /*------------------------ メインヴィジュアル --------------------------*/ /*------------------------ リードメッセージ --------------------------*/ /*------------------------ サキモリ特徴 --------------------------*/ /*------------------------ モリト紹介 --------------------------*/ /*------------------------ お知らせ --------------------------*/ } #suggestion main { text-align: center; } #suggestion main #main_visual img { width: 100%; } #suggestion #leadmessage_area { position: relative; } #suggestion #leadmessage_area img { width: 100%; position: relative; } #suggestion #lead_message { padding: 70px 0 100px; text-align: center; font-size: 1.5rem; position: absolute; top: 40%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } #suggestion #lead_message span { font-size: 1.25rem; font-weight: bold; color: #365b3c; } #suggestion #content h2 { font-size: 3.125rem; } #suggestion #content .content_box { margin: 95px 0; } #suggestion #content .content_box dl dt { font-size: 2rem; color: #71c3a7; font-weight: bold; border-bottom: #ccc 1px solid; } #suggestion #content .content_box dl dd { padding: 36px 5%; text-align: left; } #suggestion #content .content_box .float_L { float: left; width: 60%; } #suggestion #content .content_box .float_R { float: right; width: 60%; } #suggestion #content .content_box { clear: both; } #suggestion #content .content_box img { width: 35%; -webkit-filter: drop-shadow(5px 5px 5px rgba(138, 139, 138, 0.8)); filter: drop-shadow(5px 5px 5px rgba(138, 139, 138, 0.8)); } #suggestion #content .content_box dl dt::before { content: ''; display: inline-block; width: 45px; height: 45px; background: url("images/icon.svg") no-repeat; background-size: contain; vertical-align: middle; } #suggestion #content .more_btn { clear: both; } #suggestion #content .more_btn a { display: block; width: 30%; margin-left: 35%; padding: 10px; color: #fff; background-color: #71c3a7; } #suggestion #morito { background-color: #eaf4ef; border-radius: 10px; margin: 60px 5%; padding: 5%; text-align: left; } #suggestion #morito #message { font-size: 1.5625rem; margin-bottom: 30px; text-align: center; } #suggestion #morito #morito_flex { display: -webkit-box; display: -ms-flexbox; display: flex; } #suggestion #morito #morito_img { width: 100%; text-align: center; } #suggestion #morito #morito_img img { width: 70%; } #suggestion #morito #morito_name { font-size: 3.125rem; color: #456052; font-weight: 800; } #suggestion #morito #lead { font-size: 1.25rem; color: #456052; font-weight: 800; } #suggestion #morito #text { padding-bottom: 20px; } #suggestion #morito .morito_btn { display: block; } #suggestion #morito .morito_btn a { padding: 10px 15px; background-color: #1374af; color: #fff; border-radius: 5px; } #suggestion #morito .br_none { display: none; } #suggestion #content #topics { clear: both; padding: 0 10%; margin: 50px 0; text-align: center; } #suggestion #content #topics h3 { display: inline; font-size: 1.5625rem; border-bottom: 1px #68aab6 solid; } #suggestion #content #topics table { width: 100%; margin-top: 30px; } #suggestion #content #topics table tr { line-height: 3rem; } #suggestion #content #topics table tr th::before { content: ''; display: inline-block; width: 25px; height: 25px; background: url("images/icon.svg") no-repeat; background-size: contain; vertical-align: middle; } #suggestion #content #topics table th span { background-color: #f7f2b0; } #suggestion #content #topics table .title { text-align: left; } #suggestion #content #topics #topics_btn { text-align: right; padding-right: 2rem; margin-top: 30px; } #suggestion #content #topics #topics_btn::after { content: ""; border-top: solid 4px #5bc8ac; border-right: solid 4px #5bc8ac; width: 30px; height: 20px; -webkit-transform: rotate(45deg); transform: rotate(45deg); } @media screen and (max-width: 1170px) { #suggestion #content .content_box dl dt { font-size: 1.5625rem; color: #71c3a7; font-weight: bold; border-bottom: #ccc 1px solid; } } @media screen and (max-width: 799px) { #suggestion { /*------------------------ リード文 --------------------------*/ /*------------------------ サキモリ特徴 --------------------------*/ /*------------------------ モリト紹介 --------------------------*/ /*------------------------ お知らせ --------------------------*/ } #suggestion #lead_message { padding: 70px 0 100px; text-align: center; font-size: 1rem; } #suggestion #lead_message span { font-size: 1.125rem; font-weight: bold; color: #365b3c; } #suggestion #content h2 { font-size: 2rem; } #suggestion #content .content_box .float_L { display: block; width: 100%; } #suggestion #content .content_box .float_R { display: block; width: 100%; } #suggestion #content .content_box img { width: 60%; } #suggestion #morito #message { font-size: 1rem; margin-bottom: 30px; } #suggestion #morito #text { float: none; width: 100%; clear: both; } #suggestion #morito .morito_btn { display: inline; margin-top: 20px; } #suggestion #content #topics table { font-size: 0.875rem; line-height: 2; } #suggestion #content #topics table th, #suggestion #content #topics table td { display: block; text-align: left; } #suggestion #content #topics table td { border-bottom: #ccc 1px solid; } } @media screen and (max-width: 425px) { #suggestion { /*------------------------ サキモリ特徴 --------------------------*/ } #suggestion #content h2 { font-size: 1.25rem; } #suggestion #morito .br_none { display: inline; } } #operation #content_area { padding: 50px 10%; } #operation #content h3 { text-align: left; font-size: 2.1875rem; color: #71c3a7; font-weight: bold; clear: both; margin-bottom: 20px; line-height: 2rem; } #operation #content .float_L { width: 20%; float: left; } #operation #content .float_R { width: 70%; float: right; } #operation .content_box { margin: 10px 0; } #operation .line { text-align: left; margin-left: 10%; color: #71c3a7; clear: both; font-size: 3rem; } #operation footer { clear: both; } @media screen and (max-width: 799px) { #operation { /*------------------------ 見出し --------------------------*/ } #operation #content h3 { font-size: 1.5625rem; text-align: center; } #operation .line { text-align: center; margin-left: 10%; color: #71c3a7; clear: both; font-size: 3rem; } } #app { /*sp版用サキモリアプリ画像*/ } #app #content h3 { text-align: left; font-size: 2rem; color: #71c3a7; font-weight: bold; } #app #content h3::before { content: ''; display: inline-block; width: 35px; height: 45px; background: url("images/icon.svg") no-repeat; background-size: contain; vertical-align: middle; } #app .app_float_L { float: left; width: 40%; margin-left: 4%; } #app .sp { display: none; } #app .app_float_R { float: right; width: 30%; margin-right: 10%; } #app .app_float_R img { width: 100%; } #app .app_box { clear: both; padding: 70px 0; } #app h4 { font-size: 1.5rem; line-height: 1.5; width: 12em; padding-left: 3%; background: -webkit-gradient(linear, left top, left bottom, color-stop(60%, transparent), color-stop(60%, #f7f2b0)); background: linear-gradient(transparent 60%, #f7f2b0 60%); } #app .app_box .app_float_L ul { margin-bottom: 30px; } #app .app_box .app_float_L li { list-style: square inside; padding: 15px 1%; line-height: 1rem; } #app .app_box #qr_flex { display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 20px; } #app .app_box #qr_flex img { width: 100%; } #app .app_box #qr_flex dl { margin: 0 7% 0 0; text-align: center; } #app .app_box .app_manual { margin-top: 20px; text-decoration: underline; } #app .app_box .app_manual a:hover { color: #999; } #app footer { clear: both; } @media screen and (max-width: 1120px) { #app { /*------------------------ 文字サイズ変更 --------------------------*/ } #app .app_box .app_float_L li { font-size: 0.875rem; } } @media screen and (max-width: 799px) { #app { /*------------------------ 配置変更 --------------------------*/ } #app .app_float_L { float: none; width: 96%; margin-left: 4%; } #app .app_float_R { display: none; } #app .sp { display: block; float: left; } #app .bunner img { width: 50%; } #app .app_box .app_float_L li { padding: 8px 1%; line-height: 1rem; } } @media screen and (max-width: 425px) { #app { /*------------------------ サキモリ特徴 --------------------------*/ } #app #content h2 { font-size: 1.25rem; } #app .app_box .app_float_L li { font-size: 0.785rem; padding: 8px 1%; line-height: 1rem; } } #exhibition #content h3 { text-align: left; font-size: 2rem; color: #71c3a7; font-weight: bold; } #exhibition #content h3::before { content: ''; display: inline-block; width: 35px; height: 45px; background: url("images/icon.svg") no-repeat; background-size: contain; vertical-align: middle; } #exhibition #content .exhibition_box { margin: 70px 0; } #exhibition #content ul { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 10px 4%; } #exhibition #content ul li { display: list-item; text-align: -webkit-match-parent; line-height: 1.2; } #exhibition #content ul li:nth-child(n+2) { margin-left: 20px; padding-left: 20px; border-left: #ccc solid 1px; } #exhibition #content ul li:hover { text-decoration: underline; cursor: pointer; } @media screen and (max-width: 799px) { #exhibition #content .exhibition_box { margin: 50px 0; } #exhibition #content ul { display: block; } #exhibition #content ul li:nth-child(n+2) { margin-left: 0; padding-left: 0; border-left: none; } #exhibition #content ul li { line-height: 2; list-style: square inside; } #exhibition #content ul li br { display: none; } } @media screen and (max-width: 799px) and (max-width: 425px) { #exhibition #content h2 { font-size: 1.25rem; } } #suggestion #content .suggestion_box h3 { text-align: left; font-size: 2rem; color: #71c3a7; font-weight: bold; } #suggestion #content h3::before { content: ''; display: inline-block; width: 45px; height: 45px; background: url("images/icon.svg") no-repeat; background-size: contain; vertical-align: middle; } #suggestion .suggestion_box { margin: 95px 0; } #suggestion .suggestion_box .text { margin: 0 5%; } #suggestion .suggestion_box .suggestion_img { text-align: center; } #suggestion .suggestion_box p img { width: 80%; } #suggestion .suggestion_box p { text-align: left; } #suggestion .suggestion_box .sug_btn { text-align: center; margin-top: 45px; } #suggestion .suggestion_box .sug_btn a { display: block; background-color: #71c3a7; color: #fff; width: 32.6%; margin-left: 33.7%; -webkit-box-shadow: 5px 5px 5px rgba(68, 89, 79, 0.75); box-shadow: 5px 5px 5px rgba(68, 89, 79, 0.75); padding: 5px; } #suggestion .suggestion_box .sug_btn a:hover { background-color: #aadbca } #suggestion .suggestion_box .flex { display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: 30px; } #suggestion .suggestion_box .flex .flow { width: 28.5%; border-radius: 10px; } #suggestion .suggestion_box .flex #flow1 { background-color: #edf2ed; } #suggestion .suggestion_box .flex #flow2 { background-color: #becebe; } #suggestion .suggestion_box .flex #flow3 { background-color: #9eb79e; } #suggestion .suggestion_box .flex dl { padding: 10px 1%; } #suggestion .suggestion_box .flex dl dt { font-size: 1.125rem; text-align: center; margin-bottom: 10px; } #suggestion .suggestion_box .flex dl dd { font-size: 0.875rem; } #suggestion .triangle { margin: 130px 1%; width: 0; height: 0; border-top: 25px solid transparent; border-bottom: 25px solid transparent; border-left: 25px solid #4c4b45; } @media screen and (max-width: 799px) { #suggestion { /*------------------------ 見出し --------------------------*/ /*------------------------ ボタン --------------------------*/ /*------------------------ 活用展開 --------------------------*/ } #suggestion #content .suggestion_box h3 { font-size: 1.5625rem; } #suggestion .suggestion_box .sug_btn a { font-size: 0.875rem; width: 40%; margin-left: 30%; } #suggestion .suggestion_box .flex { display: block; } #suggestion .suggestion_box .flex .flow { width: 80%; margin: 0 9%; } #suggestion .triangle { margin: 20px 0 0 45%; width: 0; height: 0; border-top: 25px solid #4c4b45; border-left: 25px solid transparent; border-right: 25px solid transparent; } } @media screen and (max-width: 500px) { #suggestion { /*------------------------ ボタン --------------------------*/ } #suggestion .suggestion_box .sug_btn a { font-size: 0.875rem; width: 50%; margin-left: 25%; color: #fff; } } #content { width: 90%;} #plan { /*タイトル調整*/ /*pc時、sp用写真非表示*/ } #plan #title h2 { width: 100%; } #plan table { width: 90%; margin: 10px auto 90px; } #plan table caption, #plan h3 { font-size: 1.875rem; /*30px*/ } #plan table caption { text-align: left; margin-bottom: 5px; } #plan table td img { padding: 5px; } #plan .cost-table1 .item, #plan .cost-table2 .item, #plan .cost-table3 .item, #plan .cost-table4 .item { width: 35%; } #plan .cost-table1 { margin-top: 50px; } #plan .upload { width: 90%; margin: 50px auto; } #plan .about-cost { width: 86%; margin: 50px auto; padding: 2%; background: #f5f7f6; border-radius: 10px; } #plan .about-cost dl dt { color: #71C3A7; font-size: 1.875rem; /*30px*/ font-weight: bold; border-bottom: solid 3px #d6d6cc; width: 7em; line-height: 1em; padding-top: 20px; } #plan .about-cost dl dd { padding-top: 5px; } #plan .about-cost .cost2 { padding-top: 20px; } #plan .cost-sample1 { text-align: right; margin-right: 5%; padding-bottom: 20px; } #plan .btn_sample1 { color: #4c4b45; display: inline-block; text-align: center; padding: 5px 20px; background-color: #e6e6e0; } #plan .btn_sample1:hover { text-decoration: underline; background-color: #fff; } @media screen and (max-width: 1120px) { #plan #title h2 { line-height: 1.3; } } @media screen and (max-width: 420px) { #plan #title h2 { font-size: 1.5rem; } } @media screen and (max-width: 799px) { #plan { /*pc→sp　表の写真切り替え*/ } #plan h3, #plan table, #plan p { line-height: 1.5; } #plan table caption, #plan h3, #plan .about-cost dl dt { font-size: 1.5625rem; } #plan table { margin-bottom: 50px; } #plan .cost-table1 tr .pc_area { display: none; } #plan .cost-table1 tr .sp_area { display: block; } } @media screen and (min-width: 800px) { #plan .cost-table1 tr .sp_area { display: none; } } #feature #content { width: 90%; } #feature h3 { font-size: 1.875rem; /*30px*/ padding-bottom: 10px; margin: 0 5%; } #feature .feature1, #feature .feature2, #feature .feature3 { padding-top: 50px; margin-bottom: 50px; } #feature .feature2, #feature .feature3 { border-top: solid 1px #d6dedc; } #feature .feature1-wrap { display: -webkit-box; display: -ms-flexbox; display: flex; margin: 0 5%; } #feature .feature1-txt1, #feature .feature1-txt2 { background-color: #d6d6cc; margin: 0 0 20px 5%; padding: 2% 2% 2% 5%; text-indent: -1em; } #feature .feature1-txt1 span, #feature .feature1-txt2 span { font-weight: bold; font-size: 2em; } #feature .feature1-txt3 { margin: 0 0 0 5%; padding: 2% 2% 0 2%; line-height: 1.3; } #feature .feature2-wrap { margin: 0 5%; } #feature .feature2-wrap ul li { padding-bottom: 10px; } #feature .feature2-img { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-top: 20px; -webkit-filter: drop-shadow(3px 3px 3px rgba(138, 139, 138, 0.8)); filter: drop-shadow(3px 3px 3px rgba(138, 139, 138, 0.8)); } #feature .feature2-img p { padding: 0 2%; } #feature .feature2-imgtitle { font-weight: bold; text-align: center; } #feature .feature3-wrap { margin: 0 5%; } #feature .feature3 p img { display: block; margin: 0 auto; padding: 50px 0; } @media screen and (max-width: 799px) { #feature h3 { font-size: 1.5625rem; /*20px*/ } #feature .feature3 #feature_h3 { font-size: 1.4rem; } #feature .feature1-txt1, #feature .feature1-txt2, #feature .feature2-wrap ul li, #feature .feature3-wrap { line-height: 1.5; } } @media screen and (max-width: 699px) { #feature .feature1-wrap .feature1-img { text-align: center; margin-bottom: 20px; } #feature .feature1-wrap { display: block; margin: 0 5%; } #feature .feature1-txt1, #feature .feature1-txt2 { padding-left: 7%; } } @media screen and (max-width: 540px) { #feature .feature2-img { display: block; text-align: center; } #feature .feature2-img p { padding: 10px; } } #app { /*sp版用サキモリアプリ画像*/ } #app #content h3 { text-align: left; font-size: 2rem; color: #71c3a7; font-weight: bold; } #app #content h3::before { content: ''; display: inline-block; width: 35px; height: 45px; background: url("images/icon.svg") no-repeat; background-size: contain; vertical-align: middle; } #app .app_float_L { float: left; width: 40%; margin-left: 4%; } #app .sp { display: none; } #app .app_float_R { float: right; width: 30%; margin-right: 10%; } #app .app_float_R img { width: 100%; } #app .app_box { clear: both; padding: 70px 0; } #app h4 { font-size: 1.5rem; line-height: 1.5; width: 12em; padding-left: 3%; background: -webkit-gradient(linear, left top, left bottom, color-stop(60%, transparent), color-stop(60%, #f7f2b0)); background: linear-gradient(transparent 60%, #f7f2b0 60%); } #app .app_box .app_float_L .li_title { margin: 20px 0 10px; font-size: 1.25rem; width: 100%; border-bottom: #ccc 1px solid; } #app .app_box .app_float_L ul { margin-bottom: 30px; } #app .app_box .app_float_L li { list-style: square inside; padding: 15px 1%; line-height: 1rem; } #app .app_box #qr_flex { display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 20px; } #app .app_box #qr_flex img { width: 100%; } #app .app_box #qr_flex dl { margin: 0 7% 0 0; text-align: center; } #app .app_box .app_manual { margin-top: 20px; text-decoration: underline; } #app .app_box .app_manual a:hover { color: #999; } #app footer { clear: both; } @media screen and (max-width: 1120px) { #app { /*------------------------ 文字サイズ変更 --------------------------*/ } #app .app_box .app_float_L li { font-size: 0.875rem; } } @media screen and (max-width: 799px) { #app { /*------------------------ 配置変更 --------------------------*/ } #app .app_float_L { float: none; width: 96%; margin-left: 4%; } #app .app_float_R { display: none; } #app .sp { display: block; float: left; } #app .bunner img { width: 50%; } #app .app_box .app_float_L li { padding: 8px 1%; line-height: 1rem; } } @media screen and (max-width: 425px) { #app { /*------------------------ サキモリ特徴 --------------------------*/ } #app #content h2 { font-size: 1.25rem; } #app .app_box .app_float_L li { font-size: 0.785rem; padding: 8px 1%; line-height: 1rem; } } #operation #content_area { padding: 50px 10%; } #operation #content h3 { text-align: left; font-size: 2.1875rem; color: #71c3a7; font-weight: bold; clear: both; margin-bottom: 20px; line-height: 2rem; } #operation #content .float_L { width: 20%; float: left; } #operation #content .float_R { width: 70%; float: right; } #operation .content_box { margin: 10px 0; } #operation .line { text-align: left; margin-left: 10%; color: #71c3a7; clear: both; font-size: 3rem; } #operation footer { clear: both; } @media screen and (max-width: 799px) { #operation { /*------------------------ 見出し --------------------------*/ } #operation #content h3 { font-size: 1.5625rem; text-align: center; } #operation .line { text-align: center; margin-left: 10%; color: #71c3a7; clear: both; font-size: 3rem; } } #lecture_page #lecture_lesson { margin-top: 95px; } #lecture_page #lecture_lesson h3 { font-size: 1.56rem; color: #fff; background: #71c3a7; width: 50%; margin: 0 auto; text-align: center; padding: 0 5px; } #lecture_page #lecture_lesson h3::before { display: none; } #lecture_page #lecture_lesson p { text-align: center; margin-top: 2em; display: block; } #lecture_page #lecture_lesson img { width: 100%; } #lecture_page #lecture_lesson .lecture_whet { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: wrap; flex-wrap: wrap; } #lecture_page #lecture_lesson dl { display: -webkit-box; display: -ms-flexbox; display: flex; margin: 0 auto; margin-top: 2em; } #lecture_page #lecture_lesson dd { background: #D6D6CC; width: 5em; padding: 3px 1rem; text-align: center; } #lecture_page #lecture_lesson dt { margin-left: 2em; } @media (max-width: 700px) { #lecture_page #lecture_lesson h3 { font-size: 1.125rem; } } @media (max-width: 560px) { #lecture_page #lecture_lesson .lecture_whet { margin: 0 10%; } #lecture_page #lecture_lesson .lecture_whet dl { margin: 2em 0; } } #lecture_page #lecture_content2 h4 { font-size: 1.5rem; margin-top: 4em; border-bottom: 2px solid #71c3a7; text-indent: 1em; } #lecture_page #lecture_content2 .lesson_txt1 { text-indent: 1em; margin-top: 1.5em; } #lecture_page #lecture_content2 #lesson_txt { display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: 1.5em; } #lecture_page #lecture_content2 #lesson_txt dl { width: 50%; } #lecture_page #lecture_content2 #lesson_txt dd { text-align: center; } #lecture_page #lecture_content2 #lesson_txt dt { margin: 0.3em auto; width: 80%; } @media (max-width: 800px) { #lecture_page #lecture_content2 #lesson_txt { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } #lecture_page #lecture_content2 #lesson_txt dl { display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 1em; width: 100%; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; } #lecture_page #lecture_content2 #lesson_txt dt { width: 100%; } } @media (max-width: 700px) { #lecture_page #lecture_content2 h4 { font-size: 1rem; } } /*------------------------ メインヴィジュアル --------------------------*/ #main_visual img { width: 100%; } #main_visual #mainV_sp, #main_visual #mainV_fadesp { display: none; } @media screen and (max-width: 799px) { #main_visual #mainV_sp, #main_visual #mainV_fadesp { display: block; } #main_visual #mainV_pc, #main_visual #mainV_fadepc { display: none; } } /*# sourceMappingURL=sakimori.css.map */ /*wordpressカレント設定*/ header nav #navigetion .gnav > li.current > a {/*親*/ color: #788D8C; } header nav #navigetion .gnav > li.current > .r_arrow::before {/*親*/ border-top: 5px solid #788D8C; } header nav #navigetion .gnav > li.current > a::after { width: 0; } header nav #navigetion .gnav > li li.current > a {/*子*/ color: #788D8C; text-decoration: underline; } header nav #navigetion .gnav > li li.current > a::after { width: 0; } footer #f_content li.current a { text-decoration: underline; } /*wordpressお問い合わせ*/ header #header-wrap li.current_btn a,/*pc*/ header #sp-nav-menu .gnav li.current_btn a {/*sp*/ background: #68aab6; } #content { width: 90%; } #morito { /*テキスト囲み背景*/ /*↑ここまでテキスト囲み背景*/ } #morito .lead-txt { color: #4c4b45; margin: 50px 0; font-size: 1.875rem; /*30px*/ font-weight: bold; text-decoration: underline; text-decoration-thickness: 6px; -webkit-text-decoration-color: #efe865; text-decoration-color: #efe865; text-align: center; } #morito h3, #morito .morito-manual { width: 90%; margin: 0 5% 10px 5%; } #morito .morito-box { padding-top: 30px; margin-bottom: 50px; } #morito .morito-txt { margin: 0 5%; } #morito .downsizing { display: -webkit-box; display: -ms-flexbox; display: flex; } #morito .downsizing-txt { width: 40%; margin-right: 10%; } #morito .downsizing-img img { border-style: solid; border-color: #e3f3ed; border-width: 5px; border-radius: 10px; padding: 10px; -webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); background-color: #e3f3ed; } #morito .morito-txt { background-color: #fff; padding: 1em; position: relative; z-index: 1; } #morito .morito-txt::before, #morito .morito-txt::after { border-radius: 4px; -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); content: ""; height: 100%; position: absolute; width: 100%; } #morito .morito-txt::before { background-color: rgba(255, 255, 255, 0.5); left: 0; top: 0; z-index: -1; } #morito .morito-txt::after { background-color: #e3f3ed; top: 5px; left: 5px; z-index: -2; } #morito .morito-manual { width: 86%; margin: 90px auto 50px auto; padding: 1em; background: #f5f7f6; border-radius: 10px; } #morito h4 { color: #71C3A7; font-size: 1.875rem; /*30px*/ font-weight: bold; padding-bottom: 10px; } #morito dl { display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 20px; } #morito dl dt { width: 80%; } #morito .btn_manual { color: #4c4b45; display: inline-block; text-align: center; padding: 5px 20px; background-color: #e6e6e0; width: 150px; } #morito .btn_manual:hover { text-decoration: underline; background-color: #fff; } @media screen and (max-width: 980px) { #morito dl { display: block; margin-bottom: 30px; } #morito dl dt { width: auto; } #morito dl dd { text-align: right; } } @media screen and (max-width: 940px) { #morito .lead-txt { font-size: 1.5rem; /*24px*/ } } @media screen and (max-width: 799px) { #morito h3, #morito h4 { line-height: 1.5; font-size: 1.25rem; /*20px*/ } } @media screen and (max-width: 750px) { #morito .lead-txt { font-size: 1.25rem; /*20px*/ } #morito .downsizing { display: block; } #morito .downsizing-txt { width: auto; margin: 0 5% 30px 5%; } #morito .downsizing-img img { display: block; margin: 0 auto; } } @media screen and (max-width: 630px) { #morito .lead-txt { text-align: left; /*font-size: 1rem;*/ } } @media screen and (max-width: 420px) { #morito #title h2 { font-size: 1.75rem; /*28px*/ } } #case { /* .case_study_list_box:nth-of-type(3n) { margin-right: 0; } */ } #case .ref_search .tab { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } #case .ref_search .tab li { color: #fff; padding: 8px 0; width: 9.8%; text-align: center; border-radius: 7px 7px 0 0; cursor: pointer; margin-top: 10px; } #case .ref_search .tab li.active { padding-bottom: 18px; margin-top: 0; } #case .ref_search .tab .all { background: #A5A5A5; } #case .ref_search .tab .all.active { background: #505050; } #case .ref_search .tab .area1 { background: #B59899; } #case .ref_search .tab .area1.active { background: #835153; } #case .ref_search .tab .area2 { background: #B89F91; } #case .ref_search .tab .area2.active { background: #915a3b; } #case .ref_search .tab .area3 { background: #BAAC92; } #case .ref_search .tab .area3.active { background: #CF9E05; } #case .ref_search .tab .area4 { background: #B1B090; } #case .ref_search .tab .area4.active { background: #8F9A00; } #case .ref_search .tab .area5 { background: #88A59A; } #case .ref_search .tab .area5.active { background: #007A54; } #case .ref_search .tab .area6 { background: #87A4AA; } #case .ref_search .tab .area6.active { background: #01687B; } #case .ref_search .tab .area7 { background: #8791A0; } #case .ref_search .tab .area7.active { background: #014C87; } #case .ref_search .tab .area8 { background: #968C9D; } #case .ref_search .tab .area8.active { background: #513B7C; } #case .ref_search .tab .area9 { background: #AA949E; } #case .ref_search .tab .area9.active { background: #883168; } #case .ref_search .conditions { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-pack: distribute; justify-content: space-around; background: #F5F5F5; margin-bottom: 30px; padding: 30px 0; } #case .ref_search .conditions span { padding-right: 5px; } #case .ref_search .conditions select { width: 176px; padding: 8px; color: #fff; } #case .ref_search .conditions option { color: #fff; } #case .ref_search .conditions .sensor_type select { background: #00B7ED; color: #fff; } #case .ref_search .conditions .location select { background: #7F7F7F; color: #fff; } #case .ref_search .conditions .use select { background: #01AC77; color: #fff; } #case .case_study_list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -ms-flex-wrap: wrap; flex-wrap: wrap; width: calc(100% + 20px); } #case .case_study_list_box { width: calc((100% - 60px) / 3); margin: 0 1.3% 30px 0; height: 100%; } #case .case_study_list_box:hover { -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.25); box-shadow: 0 0 10px rgba(0, 0, 0, 0.25); } #case .case_study_list_box a { display: block; width: 100%; height: 100%; } #case .case_study_list_box img { width: 100%; } #case .case_study_list > div .details > * { color: #7F7F7F; } #case .case_study_list > div .details { padding: 15px; background: #F5F5F5; } #case .case_study_list > div .details p { font-size: 22px; font-weight: 700; margin-bottom: 15px; } #case .case_study_list > div .details ul { margin-bottom: 15px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } #case .case_study_list > div .details ul li { color: #fff; padding: 1px 11px; margin-right: 5px; margin-bottom: 5px; } #case .case_study_list > div .details ul li.sensor_type { background: #00B7ED; } #case .case_study_list > div .details ul li.location { background: #7F7F7F; } #case .case_study_list > div .details ul li.use { background: #01AC77; } #case .case_study_list > .area1 .details { border-left: solid 10px #B92E3F; } #case .case_study_list > .area2 .details { border-left: solid 10px #C6541E; } #case .case_study_list > .area3 .details { border-left: solid 10px #CF9E05; } #case .case_study_list > .area4 .details { border-left: solid 10px #8F9A00; } #case .case_study_list > .area5 .details { border-left: solid 10px #007A54; } #case .case_study_list > .area6 .details { border-left: solid 10px #01687B; } #case .case_study_list > .area7 .details { border-left: solid 10px #014C87; } #case .case_study_list > .area8 .details { border-left: solid 10px #513B7C; } #case .case_study_list > .area9 .details { border-left: solid 10px #883168; } @media screen and (max-width: 799px) { #case .ref_search .tab li { -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; } #case .ref_search .conditions { padding-left: 5%; display: block; } #case .ref_search .conditions .space { padding-right: 3.3rem; } #case .ref_search .conditions .search_condition { margin-bottom: 5px; } #case .case_study_list_box { min-width: 300px; } } @media screen and (max-width: 799px) { main{ margin-top: 83px; } } /*# sourceMappingURL=sakimori.css.map */ #lecture_page #lecture_lesson, #lecture_page1 #lecture_lesson, #lecture_page2 #lecture_lesson { margin-top: 95px; } #lecture_page #lecture_lesson h3, #lecture_page1 #lecture_lesson h3, #lecture_page2 #lecture_lesson h3 { font-size: 1.56rem; color: #fff; background: #71C3A7; width: 50%; margin: 0 auto; text-align: center; padding: 0 5px; } #lecture_page #lecture_lesson h3::before, #lecture_page1 #lecture_lesson h3::before, #lecture_page2 #lecture_lesson h3::before { display: none; } #lecture_page #lecture_lesson p, #lecture_page1 #lecture_lesson p, #lecture_page2 #lecture_lesson p { text-align: center; margin-top: 2em; display: block; } #lecture_page #lecture_lesson img, #lecture_page1 #lecture_lesson img, #lecture_page2 #lecture_lesson img { width: 100%; } #lecture_page #lecture_lesson .lecture_whet, #lecture_page1 #lecture_lesson .lecture_whet, #lecture_page2 #lecture_lesson .lecture_whet { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: wrap; flex-wrap: wrap; } #lecture_page #lecture_lesson dl, #lecture_page1 #lecture_lesson dl, #lecture_page2 #lecture_lesson dl { display: -webkit-box; display: -ms-flexbox; display: flex; margin: 0 auto; margin-top: 2em; } #lecture_page #lecture_lesson dd, #lecture_page1 #lecture_lesson dd, #lecture_page2 #lecture_lesson dd { background: #D6D6CC; width: 5em; padding: 3px 1rem; text-align: center; } #lecture_page #lecture_lesson dt, #lecture_page1 #lecture_lesson dt, #lecture_page2 #lecture_lesson dt { margin-left: 2em; } @media (max-width: 700px) { #lecture_page #lecture_lesson h3, #lecture_page1 #lecture_lesson h3, #lecture_page2 #lecture_lesson h3 { font-size: 1.125rem; } } @media (max-width: 560px) { #lecture_page #lecture_lesson .lecture_whet, #lecture_page1 #lecture_lesson .lecture_whet, #lecture_page2 #lecture_lesson .lecture_whet { margin: 0 10%; } #lecture_page #lecture_lesson .lecture_whet dl, #lecture_page1 #lecture_lesson .lecture_whet dl, #lecture_page2 #lecture_lesson .lecture_whet dl { margin: 2em 0; } } #lecture_page #lecture_content2 h4, #lecture_page1 #lecture_content2 h4, #lecture_page2 #lecture_content2 h4 { font-size: 1.5rem; margin-top: 4em; border-bottom: 2px solid #71C3A7; text-indent: 1em; } #lecture_page #lecture_content2 .lesson_txt1, #lecture_page1 #lecture_content2 .lesson_txt1, #lecture_page2 #lecture_content2 .lesson_txt1 { text-indent: 1em; margin-top: 1.5em; } #lecture_page #lecture_content2 #lesson_txt, #lecture_page1 #lecture_content2 #lesson_txt, #lecture_page2 #lecture_content2 #lesson_txt { display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: 1.5em; } #lecture_page #lecture_content2 #lesson_txt dl, #lecture_page1 #lecture_content2 #lesson_txt dl, #lecture_page2 #lecture_content2 #lesson_txt dl { width: 50%; } #lecture_page #lecture_content2 #lesson_txt dd, #lecture_page1 #lecture_content2 #lesson_txt dd, #lecture_page2 #lecture_content2 #lesson_txt dd { text-align: center; } #lecture_page #lecture_content2 #lesson_txt dt, #lecture_page1 #lecture_content2 #lesson_txt dt, #lecture_page2 #lecture_content2 #lesson_txt dt { margin: 0.3em auto; width: 80%; } @media (max-width: 800px) { #lecture_page #lecture_content2 #lesson_txt, #lecture_page1 #lecture_content2 #lesson_txt, #lecture_page2 #lecture_content2 #lesson_txt { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } #lecture_page #lecture_content2 #lesson_txt dl, #lecture_page1 #lecture_content2 #lesson_txt dl, #lecture_page2 #lecture_content2 #lesson_txt dl { display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 1em; width: 100%; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; } #lecture_page #lecture_content2 #lesson_txt dt, #lecture_page1 #lecture_content2 #lesson_txt dt, #lecture_page2 #lecture_content2 #lesson_txt dt { width: 100%; } } @media (max-width: 700px) { #lecture_page #lecture_content2 h4, #lecture_page1 #lecture_content2 h4, #lecture_page2 #lecture_content2 h4 { font-size: 1rem; } } #exhibition_page #exhibition_sakimori, #exhibition_page1 #exhibition_sakimori, #exhibition_page2 #exhibition_sakimori, #exhibition_page3 #exhibition_sakimori, #symposium_page #exhibition_sakimori, #symposium_page1 #exhibition_sakimori, #symposium_page2 #exhibition_sakimori { margin-top: 95px; } #exhibition_page #exhibition_sakimori h3, #exhibition_page1 #exhibition_sakimori h3, #exhibition_page2 #exhibition_sakimori h3, #exhibition_page3 #exhibition_sakimori h3, #symposium_page #exhibition_sakimori h3, #symposium_page1 #exhibition_sakimori h3, #symposium_page2 #exhibition_sakimori h3 { font-size: 1.56rem; color: #fff; background: #71C3A7; width: 50%; margin: 0 auto; text-align: center; } #exhibition_page #exhibition_sakimori h3::before, #exhibition_page1 #exhibition_sakimori h3::before, #exhibition_page2 #exhibition_sakimori h3::before, #exhibition_page3 #exhibition_sakimori h3::before, #symposium_page #exhibition_sakimori h3::before, #symposium_page1 #exhibition_sakimori h3::before, #symposium_page2 #exhibition_sakimori h3::before { display: none; } #exhibition_page #exhibition_sakimori p, #exhibition_page1 #exhibition_sakimori p, #exhibition_page2 #exhibition_sakimori p, #exhibition_page3 #exhibition_sakimori p, #symposium_page #exhibition_sakimori p, #symposium_page1 #exhibition_sakimori p, #symposium_page2 #exhibition_sakimori p { text-align: center; margin-top: 2em; display: block; } #exhibition_page #exhibition_sakimori p img, #exhibition_page1 #exhibition_sakimori p img, #exhibition_page2 #exhibition_sakimori p img, #exhibition_page3 #exhibition_sakimori p img, #symposium_page #exhibition_sakimori p img, #symposium_page1 #exhibition_sakimori p img, #symposium_page2 #exhibition_sakimori p img { width: 100%; } #exhibition_page #exhibition_sakimori dl, #exhibition_page1 #exhibition_sakimori dl, #exhibition_page2 #exhibition_sakimori dl, #exhibition_page3 #exhibition_sakimori dl, #symposium_page #exhibition_sakimori dl, #symposium_page1 #exhibition_sakimori dl, #symposium_page2 #exhibition_sakimori dl { display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: 2em; } #exhibition_page #exhibition_sakimori .exhibition_place, #exhibition_page1 #exhibition_sakimori .exhibition_place, #exhibition_page2 #exhibition_sakimori .exhibition_place, #exhibition_page3 #exhibition_sakimori .exhibition_place, #symposium_page #exhibition_sakimori .exhibition_place, #symposium_page1 #exhibition_sakimori .exhibition_place, #symposium_page2 #exhibition_sakimori .exhibition_place { margin: 0 10%; } #exhibition_page #exhibition_sakimori .exhibition_whet, #exhibition_page1 #exhibition_sakimori .exhibition_whet, #exhibition_page2 #exhibition_sakimori .exhibition_whet, #exhibition_page3 #exhibition_sakimori .exhibition_whet, #symposium_page #exhibition_sakimori .exhibition_whet, #symposium_page1 #exhibition_sakimori .exhibition_whet, #symposium_page2 #exhibition_sakimori .exhibition_whet { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } #exhibition_page #exhibition_sakimori dl dd, #exhibition_page1 #exhibition_sakimori dl dd, #exhibition_page2 #exhibition_sakimori dl dd, #exhibition_page3 #exhibition_sakimori dl dd, #symposium_page #exhibition_sakimori dl dd, #symposium_page1 #exhibition_sakimori dl dd, #symposium_page2 #exhibition_sakimori dl dd { background: #D6D6CC; width: 5em; padding: 3px 1rem; text-align: center; } #exhibition_page #exhibition_sakimori dl dt, #exhibition_page1 #exhibition_sakimori dl dt, #exhibition_page2 #exhibition_sakimori dl dt, #exhibition_page3 #exhibition_sakimori dl dt, #symposium_page #exhibition_sakimori dl dt, #symposium_page1 #exhibition_sakimori dl dt, #symposium_page2 #exhibition_sakimori dl dt { margin-left: 2em; } @media (max-width: 900px) { #exhibition_page #exhibition_sakimori .exhibition_place, #exhibition_page1 #exhibition_sakimori .exhibition_place, #exhibition_page2 #exhibition_sakimori .exhibition_place, #exhibition_page3 #exhibition_sakimori .exhibition_place, #symposium_page #exhibition_sakimori .exhibition_place, #symposium_page1 #exhibition_sakimori .exhibition_place, #symposium_page2 #exhibition_sakimori .exhibition_place { margin: 0 0; } } #exhibition_page #exhibition_pr h4, #exhibition_page1 #exhibition_pr h4, #exhibition_page2 #exhibition_pr h4, #exhibition_page3 #exhibition_pr h4, #symposium_page #exhibition_pr h4, #symposium_page1 #exhibition_pr h4, #symposium_page2 #exhibition_pr h4 { font-size: 1.5rem; margin-top: 4em; border-bottom: 2px solid #71C3A7; text-indent: 1em; } #exhibition_page #exhibition_pr #exhibition_pr_txt, #exhibition_page1 #exhibition_pr #exhibition_pr_txt, #exhibition_page2 #exhibition_pr #exhibition_pr_txt, #exhibition_page3 #exhibition_pr #exhibition_pr_txt, #symposium_page #exhibition_pr #exhibition_pr_txt, #symposium_page1 #exhibition_pr #exhibition_pr_txt, #symposium_page2 #exhibition_pr #exhibition_pr_txt { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-pack: distribute; justify-content: space-around; margin-top: 1.5em; } #exhibition_page #exhibition_pr #exhibition_pr_txt .pr_txt, #exhibition_page1 #exhibition_pr #exhibition_pr_txt .pr_txt, #exhibition_page2 #exhibition_pr #exhibition_pr_txt .pr_txt, #exhibition_page3 #exhibition_pr #exhibition_pr_txt .pr_txt, #symposium_page #exhibition_pr #exhibition_pr_txt .pr_txt, #symposium_page1 #exhibition_pr #exhibition_pr_txt .pr_txt, #symposium_page2 #exhibition_pr #exhibition_pr_txt .pr_txt { width: 50%; } @media (max-width: 700px) { #exhibition_page #exhibition_sakimori h3, #exhibition_page1 #exhibition_sakimori h3, #exhibition_page2 #exhibition_sakimori h3, #exhibition_page3 #exhibition_sakimori h3, #symposium_page #exhibition_sakimori h3, #symposium_page1 #exhibition_sakimori h3, #symposium_page2 #exhibition_sakimori h3 { font-size: 1.125rem; } #exhibition_page #exhibition_pr h4, #exhibition_page1 #exhibition_pr h4, #exhibition_page2 #exhibition_pr h4, #exhibition_page3 #exhibition_pr h4, #symposium_page #exhibition_pr h4, #symposium_page1 #exhibition_pr h4, #symposium_page2 #exhibition_pr h4 { font-size: 1rem; } #exhibition_page #exhibition_pr h4 span, #exhibition_page1 #exhibition_pr h4 span, #exhibition_page2 #exhibition_pr h4 span, #exhibition_page3 #exhibition_pr h4 span, #symposium_page #exhibition_pr h4 span, #symposium_page1 #exhibition_pr h4 span, #symposium_page2 #exhibition_pr h4 span { word-break: keep-all; } #exhibition_page #exhibition_sakimori .exhibition_whet, #exhibition_page1 #exhibition_sakimori .exhibition_whet, #exhibition_page2 #exhibition_sakimori .exhibition_whet, #exhibition_page3 #exhibition_sakimori .exhibition_whet, #symposium_page #exhibition_sakimori .exhibition_whet, #symposium_page1 #exhibition_sakimori .exhibition_whet, #symposium_page2 #exhibition_sakimori .exhibition_whet { display: block; } #exhibition_page #exhibition_pr #exhibition_pr_txt, #exhibition_page1 #exhibition_pr #exhibition_pr_txt, #exhibition_page2 #exhibition_pr #exhibition_pr_txt, #exhibition_page3 #exhibition_pr #exhibition_pr_txt, #symposium_page #exhibition_pr #exhibition_pr_txt, #symposium_page1 #exhibition_pr #exhibition_pr_txt, #symposium_page2 #exhibition_pr #exhibition_pr_txt { display: block; } #exhibition_page #exhibition_pr #exhibition_pr_txt .pr_txt, #exhibition_page1 #exhibition_pr #exhibition_pr_txt .pr_txt, #exhibition_page2 #exhibition_pr #exhibition_pr_txt .pr_txt, #exhibition_page3 #exhibition_pr #exhibition_pr_txt .pr_txt, #symposium_page #exhibition_pr #exhibition_pr_txt .pr_txt, #symposium_page1 #exhibition_pr #exhibition_pr_txt .pr_txt, #symposium_page2 #exhibition_pr #exhibition_pr_txt .pr_txt { width: 100%; margin-bottom: 1em; } #exhibition_page #exhibition_pr #exhibition_pr_txt .pr_txt2, #exhibition_page1 #exhibition_pr #exhibition_pr_txt .pr_txt2, #exhibition_page2 #exhibition_pr #exhibition_pr_txt .pr_txt2, #exhibition_page3 #exhibition_pr #exhibition_pr_txt .pr_txt2, #symposium_page #exhibition_pr #exhibition_pr_txt .pr_txt2, #symposium_page1 #exhibition_pr #exhibition_pr_txt .pr_txt2, #symposium_page2 #exhibition_pr #exhibition_pr_txt .pr_txt2 { text-align: right; } } @media (max-width: 400px) { #exhibition_page #exhibition_sakimori dl dd, #exhibition_page1 #exhibition_sakimori dl dd, #exhibition_page2 #exhibition_sakimori dl dd, #exhibition_page3 #exhibition_sakimori dl dd, #symposium_page #exhibition_sakimori dl dd, #symposium_page1 #exhibition_sakimori dl dd, #symposium_page2 #exhibition_sakimori dl dd { padding: 0; } } #tatuno #flex { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-top: 30px; } #tatuno .map { position: relative; width: 50%; height: 0; padding-top: 35%; } #tatuno .map iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #tatuno #case_img { width: 46.5%; } #tatuno #case_img img { width: 100%; } #tatuno .table table { width: 100%; border-spacing: 0 10px; border-collapse: separate; } #tatuno .table table th { width: 150px; background: #7F7F7F; color: #fff; text-align: center; padding: 17px 0; } #tatuno .table table td { padding: 15px; background: #F5F5F5; } #tatuno .table table td ul { display: -webkit-box; display: -ms-flexbox; display: flex; } #tatuno .table table td ul li { width: 30%; margin-right: 5%; padding-left: 20px; } #tatuno .table table td ul li:last-child { margin-right: 0; } #tatuno .table table td ul li span { font-weight: 600; display: block; text-indent: -20px; } #tatuno #background { margin: 30px auto 50px auto; padding: 1em; background: #f5f7f6; border-radius: 10px; } #tatuno #background h4 { font-size: 1.125rem; border-bottom: solid 1px #d6dedc; } #tatuno #background p { margin: 10px 0; } #tatuno #back_btn { color: #7F7F7F; text-decoration: underline; } #tatuno #back_btn::before { content: ""; width: 10px; height: 10px; border-right: 1px solid #71C3A7; border-top: 1px solid #71C3A7; display: inline-block; -webkit-transform: rotate(225deg); transform: rotate(225deg); } @media screen and (max-width: 799px) { #tatuno #flex { display: block; } #tatuno #case_img { width: 100%; } #tatuno .map { position: relative; width: 100%; height: 0; margin: 10px 0; } #tatuno .table table th { width: 100px; } #tatuno .table table td ul { display: block; } #tatuno .table table td ul li { width: 90%; margin-right: 5%; padding-left: 20px; } #tatuno .table table, #tatuno #background { font-size: 0.875rem; } } #symposium_page #exhibition_pr #symposium_pr, #symposium_page1 #exhibition_pr #symposium_pr, #symposium_page2 #exhibition_pr #symposium_pr { margin-bottom: 1em; } #symposium_page #exhibition_pr #symposium_pr .symposium_prtxt, #symposium_page1 #exhibition_pr #symposium_pr .symposium_prtxt, #symposium_page2 #exhibition_pr #symposium_pr .symposium_prtxt { margin-top: 1em; } #symposium_page #exhibition_pr #symposium_pr .symposium_pdf, #symposium_page1 #exhibition_pr #symposium_pr .symposium_pdf, #symposium_page2 #exhibition_pr #symposium_pr .symposium_pdf { margin-top: 1em; background: #e6e6e0; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; padding: 0rem 0.5rem; } #symposium_page #exhibition_pr #symposium_pr .symposium_pdf a, #symposium_page1 #exhibition_pr #symposium_pr .symposium_pdf a, #symposium_page2 #exhibition_pr #symposium_pr .symposium_pdf a { text-decoration: none; color: #4C4B45; } #symposium_page #exhibition_pr #symposium_pr .symposium_pdf a:hover, #symposium_page1 #exhibition_pr #symposium_pr .symposium_pdf a:hover, #symposium_page2 #exhibition_pr #symposium_pr .symposium_pdf a:hover { text-decoration: underline; } body:not(.home) #content { margin: 10% auto 20% auto;} #exhibition_page .return, #exhibition_page1 .return, #exhibition_page2 .return, #exhibition_page3 .return, #symposium_page .return, #symposium_page1 .return, #symposium_page2 .return { margin-top: 1em; } #exhibition_page .return a, #exhibition_page1 .return a, #exhibition_page2 .return a, #exhibition_page3 .return a, #symposium_page .return a, #symposium_page1 .return a, #symposium_page2 .return a { text-decoration: none; color: #4C4B45; font-size: 1.25rem; } #exhibition_page .return a::before, #exhibition_page1 .return a::before, #exhibition_page2 .return a::before, #exhibition_page3 .return a::before, #symposium_page .return a::before, #symposium_page1 .return a::before, #symposium_page2 .return a::before { content: ""; display: inline-block; width: 10px; height: 10px; margin: 0 10px; border-left: 2px solid #4C4B45; border-bottom: 2px solid #4C4B45; -webkit-transform: rotate(45deg); transform: rotate(45deg); } #exhibition_page .return a:hover, #exhibition_page1 .return a:hover, #exhibition_page2 .return a:hover, #exhibition_page3 .return a:hover, #symposium_page .return a:hover, #symposium_page1 .return a:hover, #symposium_page2 .return a:hover { text-decoration: underline; color: blue; } #lecture_page .return, #lecture_page1 .return, #lecture_page2 .return { margin-top: 1em; } #lecture_page .return a, #lecture_page1 .return a, #lecture_page2 .return a { text-decoration: none; color: #4C4B45; font-size: 1.25rem; } #lecture_page .return a::before, #lecture_page1 .return a::before, #lecture_page2 .return a::before { content: ""; display: inline-block; width: 10px; height: 10px; margin: 0 10px; border-left: 2px solid #4C4B45; border-bottom: 2px solid #4C4B45; -webkit-transform: rotate(45deg); transform: rotate(45deg); } #lecture_page .return a:hover, #lecture_page1 .return a:hover, #lecture_page2 .return a:hover { text-decoration: underline; color: blue; }