/*lightning専用********************/ /*下部コピー非表示*/ .site-footer-copyright p:nth-child(2){ display:none; } /*下部コピー非表示*/ .copySection p:nth-child(2){ display:none; } /*スマホプルダウンメニューの右ボタンを大きくする*/ .vk-menu-acc .acc-btn { border: 1px solid var(--vk-menu-acc-btn-border-color); /*background: var(--vk-menu-acc-icon-open-black-bg-src) center 100% no-repeat;*/ } .vk-menu-acc .acc-btn { position: absolute; right: 1px; top: 1px; width: 40px; height: 40px; border: 1px solid rgba(25,25,25,.8); border-radius: 2px; /*background: url(../../inc/vk-mobile-nav/package/images/vk-menu-acc-icon-open-white.svg) center 50% no-repeat;*/ background-size: 40px 40px; cursor: pointer; z-index: 1000; transition: transform .5s ease-out; } /*vk最近の投稿を横並びにする*/ .veu_postList .postList_title { display: inline-block;/*block*/ clear: both; margin: 3px 0 0; padding-left:15px; } /*vk投稿一覧日付*/ span.published.postList_date.postList_meta_items{ display:inline-block; width:9em !important; } /*トップNEWS*/ h2.widgettitle{ text-align: center !important; } .mainSection-title, h2 { padding: .8em 0 .7em; border-top: 0px solid #337ab7 !important; border-bottom: 1px solid #245796;/*#e9e9e9*/ margin: 0px 0 5px 0!important; } @media (max-width: 992px){ .mainSection-title, h2 { margin: 0px 0 5px 0!important; } } /*サイトボディー*/ .site-body { padding: 2rem 5px 2rem !important; } @media (min-width: 992px){ .site-body { /*padding: 0rem 15px 3.5rem !important;*/ } } @media (min-width: 768px){ .site-body { /*padding: 0rem 15px 2.5rem !important;*/ } } @media (max-width: 767px){ .site-body { /*padding: 0rem 15px 2rem !important;*/ } } /*ロゴ*/ .site-header-logo img { max-height:110px !important; max-width: 400px; display: block; margin-left: auto; margin-right: auto; } @media screen and (max-width: 896px) { /*スマホ横タブレット縦*/ .site-header-logo img { max-height:100px !important; max-width: 400px; display: block; margin-left: auto; margin-right: auto; } } @media screen and (max-width: 480px) { /*スマホ縦*/ .site-header-logo img { max-height:90px !important; max-width: 80%; display: block; margin-left: auto; margin-right: auto; } } /*固定ページヘッダーに画像　共通の場合*/ .page-header { color: #000; background-color:#fff; background-image: url(https://hiraokashiki.com/wp-content/uploads/2021/05/kobetuheader.jpg); height: 15.6vw;/*300pxの場合は15.6vw、600pxの場合は31.25vw*/ background-size: cover; background-repeat: no-repeat; background-position: center center; /*min-height:180px;*/ } /*固定ページヘッダーに画像　ページごとに背景を変える場合の中のID等*/ .page-id-17>.page-header { color: #000; background-color:#fff; background-image: url(https://eigomura1.com/wp-content/uploads/2021/06/toiawase.jpg) !important; height: 15.6vw;/*300pxの場合は15.6vw、600pxの場合は31.25vw*/ background-size: cover; background-repeat: no-repeat; background-position: center center; } .page-id-33>.page-header { color: #000; background-color:#fff; background-image: url(https://eigomura1.com/wp-content/uploads/2021/06/kobetu_header.jpg) !important; height: 15.6vw;/*300pxの場合は15.6vw、600pxの場合は31.25vw*/ background-size: cover; background-repeat: no-repeat; background-position: center center; } .page-id-31>.page-header { color: #000; background-color:#fff; background-image: url(https://eigomura1.com/wp-content/uploads/2021/06/eiken.jpg) !important; height: 15.6vw;/*300pxの場合は15.6vw、600pxの場合は31.25vw*/ background-size: cover; background-repeat: no-repeat; background-position: center center; } .page-id-29>.page-header { color: #000; background-color:#fff; background-image: url(https://eigomura1.com/wp-content/uploads/2021/06/eikaiwa_kidse.jpg) !important; height: 15.6vw;/*300pxの場合は15.6vw、600pxの場合は31.25vw*/ background-size: cover; background-repeat: no-repeat; background-position: center center; } .page-id-27>.page-header { color: #000; background-color:#fff; background-image: url(https://eigomura1.com/wp-content/uploads/2021/06/eikaiwa_kidse.jpg) !important; height: 15.6vw;/*300pxの場合は15.6vw、600pxの場合は31.25vw*/ background-size: cover; background-repeat: no-repeat; background-position: center center; } .category-blog>.page-header { color: #000; background-color:#fff; background-image: url(https://eigomura1.com/wp-content/uploads/2021/06/blog.jpg) !important; height: 15.6vw;/*300pxの場合は15.6vw、600pxの場合は31.25vw*/ background-size: cover; background-repeat: no-repeat; background-position: center center; } .single-post>.page-header {/*下部にもあるので注意*/ color: #000; background-color:#fff; background-image: url(https://eigomura1.com/wp-content/uploads/2021/06/blog.jpg) !important; height: 15.6vw;/*300pxの場合は15.6vw、600pxの場合は31.25vw*/ background-size: cover; background-repeat: no-repeat; background-position: center center; } .page-id-422>.page-header,.page-id-686>.page-header,.page-id-1321>.page-header,.page-id-130>.page-header,.page-id-132>.page-header,.page-id-1411>.page-header { color: #000; background-color:#fff; background-image: url(https://chem-tokushima-u.sakura.ne.jp/c/wp-content/uploads/2021/09/Mirai.jpg) !important; height: 15.6vw;/*300pxの場合は15.6vw、600pxの場合は31.25vw*/ background-size: cover; background-repeat: no-repeat; background-position: center center; } .page-id-473>.page-header { color: #000; background-color:#fff; background-image: url(https://chem-tokushima-u.sakura.ne.jp/c/wp-content/uploads/2021/09/B.jpg) !important; height: 15.6vw;/*300pxの場合は15.6vw、600pxの場合は31.25vw*/ background-size: cover; background-repeat: no-repeat; background-position: center center; } .page-id-1073>.page-header { color: #000; background-color:#fff; background-image: url(https://chem-tokushima-u.sakura.ne.jp/c/wp-content/uploads/2021/09/A.jpg) !important; height: 15.6vw;/*300pxの場合は15.6vw、600pxの場合は31.25vw*/ background-size: cover; background-repeat: no-repeat; background-position: center center; } .page-id-1075>.page-header { color: #000; background-color:#fff; background-image: url(https://chem-tokushima-u.sakura.ne.jp/c/wp-content/uploads/2021/09/B2.jpg) !important; height: 15.6vw;/*300pxの場合は15.6vw、600pxの場合は31.25vw*/ background-size: cover; background-repeat: no-repeat; background-position: center center; } .page-id-1077>.page-header { color: #000; background-color:#fff; background-image: url(https://chem-tokushima-u.sakura.ne.jp/c/wp-content/uploads/2021/09/C.jpg) !important; height: 15.6vw;/*300pxの場合は15.6vw、600pxの場合は31.25vw*/ background-size: cover; background-repeat: no-repeat; background-position: center center; } .category-news>.page-header,.category-information>.page-header,.category-award>.page-header,.category-paper>.page-header,.category-conference>.page-header,.category-ido>.page-header,.single-post>.page-header,.archive.date>.page-header { color: #000; background-color:#fff; background-image: url(https://chem-tokushima-u.sakura.ne.jp/c/wp-content/uploads/2021/09/News.jpg) !important; height: 15.6vw;/*300pxの場合は15.6vw、600pxの場合は31.25vw*/ background-size: cover; background-repeat: no-repeat; background-position: center center; } /*ヘッダーのタイトル*/ /*タイトルにtransitionをつける*/ .page-header-title{ /*position:absolute;*/ top:0px; left:0px; height:15.6vw;/* .page-headerの高さにそろえる*//*300pxの場合は15.6vw、600pxの場合は31.25vw*/ width:100%; z-index: 900; display: flex; justify-content: center; align-items: center; text-decoration: none; transition: text-shadow .5s; /*vertical-align:middle;*/ color:#FFF; font-weight: bold; font-size:250% !important; /*font-family: 'Sawarabi Mincho','游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif !important;*/ /*margin-top:4.7vw !important; text-shadow: 2px 2px 2px #000;*/ text-shadow:1px 1px 0 #000, -1px -1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, 0px 1px 0 #000, 0-1px 0 #000, -1px 0 0 #000, 1px 0 0 #000; } .page-header-title, h1.page-header-title:first-child { /*margin: 1.7em 0;*/ margin: 0 0 !important; font-size: 1.75rem; line-height: 15.6vw !important;/*1.1*//*300pxの場合は15.6vw、600pxの場合は31.25vw*/ height:15.6vw !important;/*300pxの場合は15.6vw、600pxの場合は31.25vw*/ } /*ホバー時にタイトルに影をつける*/ .page-header-title:hover{ /*text-shadow: 2px 2px 2px #000 !important;*/ } @media screen and (max-width: 896px) { /*スマホ横タブレット縦*/ /*ヘッダーのタイトルの大きさ*/ .page-header-title{ font-size:220% !important; /*font-family: 'Sawarabi Mincho','游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif !important;*/ /*margin-top:4.7vw !important;*/ color: #FFF; text-shadow:1px 1px 0 #000, -1px -1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, 0px 1px 0 #000, 0-1px 0 #000, -1px 0 0 #000, 1px 0 0 #000; } } @media screen and (max-width: 480px) { /*ヘッダーのタイトルの垂直位置*/ .page-header-title{ font-size:180% !important; /*margin-top:4.5vw !important;*/ color: #FFF; text-shadow:1px 1px 0 #000, -1px -1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, 0px 1px 0 #000, 0-1px 0 #000, -1px 0 0 #000, 1px 0 0 #000; } /*ブログタイトル*/ h1.entry-title{ font-size:20px; } } /*ヘッダーキャッチコピー*/ .ltg-slide-text-title { text-shadow: 2px 2px 5px rgb(0 0 0); } /*ヘッダーサブキャッチコピー*/ .ltg-slide-text-caption { text-shadow: 2px 2px 5px rgb(0 0 0); } /*ヘッダーボタン*/ a.btn.btn-ghost{ background-color: rgba(0, 37, 88, .5) !important; } /*タイトルにtransitionをつける*/ .page-header_pageTitle{ text-decoration: none; transition: text-shadow .5s; } /*ホバー時にタイトルに影をつける*/ .page-header_pageTitle:hover{ text-shadow: 0 4px 4px; } /*レイアウト********************/ /*部分的に全幅にする*/ div.wide-wrap{ position:relative; margin:0 calc(50% - 50vw); overflow:hidden; } .wide-wrap{ position:relative; margin:0 calc(50% - 50vw); overflow:hidden; } /*縦横中央揃え*/ .mannaka { display: flex; justify-content: center; align-items: center; height: 100vh;/*画面全体の高さにする指定。必要に応じ変更する*/ } /*横並び*/ .yokonarabi{ display: flex; /*justify-content: center;*/ /*justify-content: space-between;*/ justify-content: space-around; align-items: center; flex-wrap: nowrap; } @media screen and (max-width: 480px) { /*スマホ縦*/ .yokonarabi{ display: flex; /*justify-content: center;*/ /*justify-content: space-between;*/ justify-content: space-around; align-items: center; flex-wrap: wrap; } } .i-block{ display:inline-block; } .width800{ width:100%; max-width:800px; margin:0 auto; } .width960{ width:100%; max-width:960px; margin:0 auto; } .width1000{ width:100%; max-width:1000px; margin:0 auto; } .center{ text-align:center; } .p_left10{ padding-left:10px; } /*交互に表示 flex*/ .item-flex { display: flex; flex-wrap: nowrap; margin-bottom: 0; /*2em*/ } .item-flex:nth-child(odd) { flex-direction: row-reverse; } .item-flex-image { width: 50%; } .item-flex-image img { /*width: 100%;*/ /*height: 100%;*/ object-fit: cover; } .item-flex-text { display: flex; flex-wrap: wrap; flex: 1; justify-content: center; align-content: center; align-items: center; padding: 0 0.8em; /*background: #eee;*/ margin-top: -20px; } /*スマホの場合は縦並びにする*/ @media screen and (max-width: 767px) { .item-flex { display: block; } .item-flex .item-flex-image { width: 100%; margin: 0 auto; } .item-flex .item-flex-text { width: 100%; margin: 0 auto; padding: 0em 0em; } } /*テーブル縦位置中央*/ .table td, .table th { padding: 0.75rem; vertical-align: middle !important; border-top: 1px solid #dee2e6; } /*tableで交互に色を変える*/ table.table_color td { background: #fff; } table.table_color tr:nth-child(odd) td { background: #eee; } table.table_color th { background: #fff; } table.table_color tr:nth-child(odd) th { background: #eee; } table.table_color th { height:60px; text-align:left; } /*width********************/ .width120{ width:120px; } /*フォント********************/ .f100{ font-size:100%; } .f110{ font-size:110%; } .f120{ font-size:120%; } .f130{ font-size:130%; } .f140{ font-size:140%; } .f150{ font-size:150%; } .f200{ font-size:200%; } .f250{ font-size:250%; } .f300{ font-size:300%; } @media screen and (max-width: 896px) { /*スマホ横タブレット縦*/ .f200{ font-size:150%; } } @media screen and (max-width: 480px) { /*スマホ縦*/ .f200{ font-size:120%; } } .f_bold{ font-wight:bold; } .f_normal{ font-wight:normal; } .s_mincho{ font-family: 'Sawarabi Mincho','游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif; } /*フォント*/ .futidori_shadow { text-shadow: #fff 2px 0, #fff -2px 0, #fff 0 -2px, #fff 0 2px, #fff 2px 2px, #fff -2px 2px, #fff 2px -2px, #fff -2px -2px, #fff 1px 2px, #fff -1px 2px, #fff 1px -2px, #fff -1px -2px, #fff 2px 1px, #fff -2px 1px, #fff 2px -1px, #fff -2px -1px, rgb(0 0 0 / 50%) 3px 3px 3px; font-size: calc(1.3rem + 1vw) !important; letter-spacing: 0.0em !important; color:#FF0F08; } .futidori_shadow2 { text-shadow: #fff 2px 0, #fff -2px 0, #fff 0 -2px, #fff 0 2px, #fff 2px 2px, #fff -2px 2px, #fff 2px -2px, #fff -2px -2px, #fff 1px 2px, #fff -1px 2px, #fff 1px -2px, #fff -1px -2px, #fff 2px 1px, #fff -2px 1px, #fff 2px -1px, #fff -2px -1px, rgb(0 0 0 / 50%) 3px 3px 3px; font-size: calc(1.3rem + 1vw) !important; letter-spacing: 0.0em !important; color:#336774; } /*文字縁取りシャドウ3*/ .futidori_shadow3 { text-shadow: #000 2px 0, #000 -2px 0, #000 0 -2px, #000 0 2px, #000 2px 2px, #000 -2px 2px, #000 2px -2px, #000 -2px -2px, #000 1px 2px, #000 -1px 2px, #000 1px -2px, #000 -1px -2px, #000 2px 1px, #000 -2px 1px, #000 2px -1px, #000 -2px -1px, rgba(0, 0, 0, .5) 3px 3px 3px; color: #FFF; /*font-size:calc(1.0rem + 0.9vw);*/ /*letter-spacing: 0.3em;*/ } /*文字縁取り*/ .fuchidori { color: #FB3C2A; text-shadow:1px 1px 0 #FFFF00, -1px -1px 0 #FFFF00, -1px 1px 0 #FFFF00, 1px -1px 0 #FFFF00, 0px 1px 0 #FFFF00, 0-1px 0 #FFFF00, -1px 0 0 #FFFF00, 1px 0 0 #FFFF00; } /*ボタン********************/ .btn { /*font-size: 1.2rem !important;*/ max-width:260px; /*width:100%;*/ /*padding: 0.9rem 1.5rem !important;*/ transition: 1.0s ; /*height:60px;*/ border-radius:30px; /*line-height:30px;*/ } .btn:hover{ background-color: #4682b4; } /*リンクボタンの中のフォント*/ .btn_font{ font-size:calc(0.6vw + 9px); } .veu_contact .contact_bt { padding: 1.0rem 1.5rem !important; /*max-width:260px;*/ width:100%; } /*サブミットボタン*/ input[type=submit] { border: 1px solid var(--vk-color-primary-dark); background-color: var(--vk-color-primary); color: #fff; /*padding: .5em 2em !important;*/ border-radius: var(--vk-size-radius); transition: 1.0s ; width:240px; height:60px; border-radius:30px; line-height:30px; } input[type=submit]:hover { border:1px #4682b4 solid !inmportant; cursor: pointer; background-color: #4682b4 !important; color:#FFF !important; width:240px; } /*枠*************************************/ /*枠グリーン*/ .waku_green{ width:100%; border: 2px solid #15B5AF; border-radius:0 0 20px 20px; padding:15px 15px 0 15px; } /*枠ワインカラー*/ .waku_wine{ width:100%; border: 2px solid #CC405F; border-radius:0 0 20px 20px; padding:15px 15px 0 15px; } /*枠イエロー*/ .waku_yellow{ width:100%; border: 2px solid #EFA522; border-radius:0 0 20px 20px; padding:15px 15px 0 15px; } /*枠ブルー*/ .waku_blue{ width:100%; border: 2px solid #207AAF; border-radius:0 0 20px 20px; padding:15px 15px 0 15px; } /*枠ピンク*/ .waku_pink{ width:100%; border: 2px solid #eb6ea0; border-radius:0 0 20px 20px; padding:15px 15px 0 15px; } /*背景ボックスワインカラー*/ .haikei_wine{ width:100%; border: 2px solid #CC405F; background-color: #CC405F; border-radius:20px 20px 0 0; padding:5px 0; color: #FFF; } /*背景ボックスグリーン*/ .haikei_green{ width:100%; border: 2px solid #15B5AF; background-color: #15B5AF; border-radius:20px 20px 0 0; padding:5px 0; color: #FFF; } /*背景ボックスイエロー*/ .haikei_yellow{ width:100%; border: 2px solid #EFA522; background-color: #EFA522; border-radius:20px 20px 0 0; padding:5px 0; color: #FFF; } /*背景ボックスブルー*/ .haikei_blue{ width:100%; border: 2px solid #207AAF; background-color: #207AAF; border-radius:20px 20px 0 0; padding:5px 0; color: #FFF; } /*背景ボックスブラック*/ .haikei_black{ width:100%; border: 2px solid #000; background-color: #000; border-radius:0px; padding:5px 0; color: #FFF; } /*背景ボックスピンク01*/ .haikei_pink{ width:100%; border: 2px solid #eb6ea0; background-color: #eb6ea0; border-radius:20px 20px 0 0; padding:5px 0; color: #FFF; } /*枠点線角丸*/ .box_tensenkadomaru { padding: 1em 1em; margin: 2em 0; background: #f0f7ff; border: dashed 1px #5b8bd0; border-radius: 10px; font-size: 85%; } /* メモ　クリップ　Ａ */ .clip-box-a { position: relative; margin: 2em auto; padding: 15px 35px 15px 25px; width: 90%; /* ボックス幅 */ background-color: #fff; /* ボックス背景色 */ color: #555555; /* 文章色 */ border: 1px solid #ccc; /* 枠線 */ box-shadow: 1px 1px 1px #acacac; /* 影の色 */ } .clip-box-a::before { position: absolute; content: ''; top: -15px; right: 10px; height: 55px; width: 15px; border: 3px solid #555555; /*クリップ色 */ background-color: none; border-radius: 12px; box-shadow: 1px 1px 2px #999; transform: rotate(10deg); z-index: 1; } .clip-box-a::after { position: absolute; content: ''; top: 0px; width: 10px; right: 20px; border: solid 5px #fff; /*背景色と同じ色にする*/ z-index: 2; } /* コンタクトフォーム********************/ .table tbody tr td .form-control, .table tbody tr th .form-control, .table td .form-control, .table th .form-control, .table thead tr td .form-control, .table thead tr th .form-control, table tbody tr td .form-control, table tbody tr th .form-control, table td .form-control, table th .form-control, table thead tr td .form-control, table thead tr th .form-control{ max-width:100% !important; } /*交互に色を変える*/ table td { background: #fff; } table tr:nth-child(odd) td { background: #eee; } table th { background: #fff; } table tr:nth-child(odd) th { background: #eee; } input[type=date], input[type=email], input[type=number], input[type=tel], input[type=text], input[type=url], select, textarea { border: 1px solid var(--vk-color-border-form); border-radius: var(--vk-size-radius); padding: .8em 1em; /*margin: 10px 0 !important;*/ width: 100%; } .table-bordered td, .table-bordered th { border: 1px solid #dee2e6; border-bottom: 0px solid rgba(0,0,0,.05) !important; } .required-contactform7{ padding: 1px; color: #FF0000; margin-right: 3px; /*margin-left: 7px;*/ } .table-contactform7 th{ font-weight:bold; /*background: #eee !important;*/ /*vertical-align:middle !important;*/ width:22%; padding: 8px 15px; text-align:left; height:34px; } .table-contactform7 td{ font-weight:normal; /*background: #eee !important;*/ vertical-align:middle !important; width:78%; } /*郵便番号*/ .form-control { display: inline-block; } /*Chromeのテーブルの罫線修正*/ table{ border-collapse:separate;/*ポイント*/ border-spacing:0;/*ポイント*/ border:1px solid #DCDCDC !important; } th,td{ border:1px solid #DCDCDC !important; } // コンタクトフォームの上下余白調整 /*コンタクトフォーム上下余白*/ .wpcf7 th p{ margin-bottom: 3px !important; margin-top: 6px !important; } .wpcf7 td p{ margin-bottom: 3px !important; margin-top: 6px !important; } .box_tensenkadomaru p{ margin-bottom:-2px; } .wpcf7 input[name="zip31"] , .wpcf7 input[name="zip32"] { width: 120px !important; /*height: 35px !important;*/ } /*住所１行表示のため*/ input[name="zip"]{ width:180px !important; } .wpcf7 select[name="pref3"] { width: 200px !important; height: 34px !important; padding: 0 5px; } .wpcf7 input[type="number"] { text-align:left; width:65px; padding: 0.8em 0.6em !important; } .wpcf7 input[type="date"] { width:160px; } @media screen and (max-width: 991px) { /*スマホ縦*/ /* コンタクトフォーム********************/ .table-contactform7 th{ font-weight:bold; /*background: #eee !important;*/ vertical-align:middle !important; width:100% !important; display:block; } .table-contactform7 td{ font-weight:normal; /*background: #eee !important;*/ vertical-align:middle !important; width:100% !important; display:block; } } /* アニメーション********************/ /*キャラクターアニメーション*/ .img_fuwafuwa{ animation: img_box_9955 3s linear infinite; transform-origin: 50% 50%; margin: 1rem 0 !important; } @keyframes img_box_9955 { 0% { transform: translateY(0) } 33.33333% { transform: translateY(-10px) } 66.66667% { transform: translateY(0) } 100% { transform: translateY(0) } } .chara_haba{ width:238px; } @media screen and (max-width: 1024px) { /*タブレット横*/ .chara_haba{ width:130px; } } @media screen and (max-width: 896px) { /*スマホ横タブレット縦*/ .chara_haba{ width:100px; } } @media screen and (max-width: 480px) { /*スマホ縦*/ .chara_haba{ width:70px; } } /*ピコピコ*/ .cyuo{ position: absolute; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); -webkit- transform: translateY(-50%) translateX(-50%); } .img_picopico{ animation: fluffy 3s linear infinite; transform-origin: 50% 50%; margin: 1rem 0 !important; } @keyframes fluffy { 0% { transform:translateY(0); } 15% { transform:translateY(0); } 20% { transform:translateY(-15px) } 25% { transform:translateY(0); } 30% { transform:translateY(-15px); } 35% { transform:translateY(0); } 100% { transform:translateY(0); } } /*キャラクターアニメーションend*/ /* ホバーアニメーション***************/ /*マウスオーバー画像拡大*/ .figure_bigger { /*width: 13.0vw;*/ /*height: 25.5vw;*/ margin: 0; padding: 0; background: #B2B2A2; overflow: hidden; text-align:center; } .figure_bigger img { -webkit-transform: scale(1.0); transform: scale(1.0); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } .figure_bigger:hover img { -webkit-transform: scale(1.4); transform: scale(1.4); } /*影をつけて浮かせる*/ .float{ transition: box-shadow .5s; } .float:hover{ box-shadow: 0 12px 12px gray; } /* プラグイン関係*********************/ /*content viewsに枠*/ .pt-cv-view .pt-cv-ifield { margin-bottom: 0px !important; border: 1px solid #000 !important; /*box-shadow: 0px 0px 16px -6px rgba(0,0,0,0.6);*/ transition:box-shadow .5s; } .pt-cv-view .pt-cv-ifield:hover { box-shadow: 0 12px 12px gray; } /* Q&A********************************/ .cp_qa *:after, .cp_qa *:before { font-family: 'Font Awesome 5 Free';/*←ココ！！！！！！！*/ font-weight: 900; /*←ココ！！！！！！！ free版は400か900*/ } .cp_qa dt { position: relative; margin: 0 0 1.5em 0; font-weight: bold; } .cp_qa dd { position: relative; margin: 0 0 2em 0; padding: 0 0 1.5em 2em; border-bottom: 1px dotted #0097a7; font-weight: normal; } .cp_qa dt::before, .cp_qa dd::before { font-size: 1.2em; margin: 0 0.5em 0 0; color: #ffffff; border-radius: 50%; display: inline-block; width: 1.3em; height: 1.3em; line-height: 1.2em; } .cp_qa dt::before { padding: 0.1em 0.3em; content: '\f128'; background: #f57c00; } .cp_qa dd::before { padding: 0.12em 0.45em; content: '\f12a'; background: #0097a7; } .cp_qa dt::after, .cp_qa dd::after { position: absolute; top: 0.5em; display: inline-block; width: 0; height: 0; content: ''; border-width: 5px 0 5px 5px; border-style: solid; } .cp_qa dt::after { left: 1.5em; border-color: transparent transparent transparent #f57c00; } .cp_qa dd::after { left: 3.5em; border-color: transparent transparent transparent #0097a7; } /* 装飾******************************/ /*黄色の蛍光ペン(太)*/ .marker_yellow_futo { background: linear-gradient(transparent 0%, #ffff66 0%); } /*黄色の蛍光ペン(細)*/ .marker_yellow_hoso { background: linear-gradient(transparent 60%, #ffff66 60%); } /*黄緑色の蛍光ペン(細)*/ .marker_lime_hoso { background: linear-gradient(transparent 60%, #66FFCC 60%); } /*水色の蛍光ペン(細)*/ .marker_water_hoso { background: linear-gradient(transparent 60%, #66ccff 60%); } /*桃色の蛍光ペン(細)*/ .marker_pink_hoso { background: linear-gradient(transparent 60%, #ff66ff 60%); } /*くぼみ下線*/ .kubomikasen01{ border-bottom: 1px solid #C5C5BB; box-shadow: 0px 1px 0px #FFF; } /* 画像関係*************************/ /* 写真を傾ける*/ .frame5d { display: inline-block; transform: rotate(5deg); } .frame5rd { display: inline-block; transform: rotate(-5deg); } /* 写真を重ねる*/ .frame_d { display: inline-block; position: relative; } .frame_d:after { position: absolute; display: block; content: ""; top: 0; left: 0; width: 100%; height: 100%; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); transform: rotate(3deg); /* 回転させる */ background: #fff; z-index: -1; } /* 写真の周囲をぼかす*/ .frame_b { display: inline-block; position: relative; } .frame_b:after { position: absolute; display: block; content: ""; top: 0; left: 0; width: 100%; height: 100%; background: #fff; box-shadow: inset 0 0 20px #fff /* 背景色と同じ色 */, inset 0 0 20px #fff, inset 0 0 20px #fff, inset 0 0 20px #fff; } /* 写真に影をつける*/ .frame_k { display: inline-block; box-shadow: 0px 0px 20px -5px rgba(0, 0, 0, 0.8); } /*長方形の画像を円形にする*/ .myEyeCatch{ width:70px; height:70px; border-radius:50%; margin-top:-50px; z-index:100; object-fit:cover; /*object-position:0px 0px;*//*左上を基準、何も書かなければ中央基準*/ border:5px solid rgba(255,255,255,0.5); /* 半透明の枠線を付加 */ } /*正方形の中に縦横長さの違う画像を入れる contain*/ .img_fit > p{ position: relative; } .img_fit > p::before{ display: block; content: ''; padding-top: 100%; } .img_fit > p > img{ position: absolute; top: 0; width: 100%; height: 100%; border: solid 1px #999; object-fit: contain; /*background:#ddd;*/ background:url("https://order.kokoro-egao.com/wp-content/uploads/2021/05/haikei01.jpg"); } /*長方形の中に縦横長さの違う画像を入れる cover*/ .img_fit2 > p{ position: relative; } .img_fit2 > p::before{ display: block; content: ''; padding-top: 0%; } .img_fit2 > p > img{ position: absolute; top: 0; width: 100%; height: 70%; border: solid 1px #999; object-fit: cover; background:#ddd; /*background:url("https://order.kokoro-egao.com/wp-content/uploads/2021/05/haikei01.jpg");*/ } /*内接リサイズ*/ .gazou_contain { object-fit: contain; width: 750px;/*750px*/ height: calc(90px + 38.0vw);/*750px*/ background-color: #CCCCCC;/*#F8F8F8*/ /*background:url("https://order.kokoro-egao.com/wp-content/uploads/2021/05/haikei01.jpg");*/ border: 5px solid #ccc; } /*外接リサイズ*/ .gazou_cover { object-fit: cover; width: 240px; height: 180px; background-color: #F0F0F0; border: 1px solid #ccc; } /*画像の中央に文字*/ .title_on_image{ position: relative; } .title_on_image p{ position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); margin:0; padding:0; /*文字の装飾は省略*/ } .title_on_image img{ width: 100%; } /* その他*****************************/ /*infiniteslide2用*/ .gallery { margin-bottom: 0px !important; } .gallery__img { height: 200px; } @media screen and (max-width: 767px) { /*infiniteslide2*/ .gallery { margin-bottom: 0px !important; } } /*パララックス*/ /*背景画像01*/ .para_haikei01{ background-image:url('https://new.sasakidentalclinic.com/wp-content/uploads/2022/07/para01.jpg'); background-size: cover; background-position: center; background-attachment: fixed; position: relative; width: 100%; margin-top: 0px; height: calc(19vw + 50px);/*変更する*/ } .para_haikei01::before { content: ''; background-color: rgba(254,245,214,.1);/*色をかぶせる*/ position: absolute; left: 0; right: 0; top: 0; bottom: 0; } /*背景画像02*/ .para_haikei02{ background-image:url('https://new.sasakidentalclinic.com/wp-content/uploads/2022/07/para01.jpg'); background-size: cover; background-position: center; background-attachment: fixed; position: relative; width: 100%; margin-top: 0px; height: calc(19vw + 50px);/*変更する*/ } .para_haikei02::before { content: ''; background-color: rgba(2,6,246,.3); position: absolute; left: 0; right: 0; top: 0; bottom: 0; } .parapack{ position:relative; margin:0 calc(50% - 50vw); overflow:hidden; background-color:#FFF; z-index:2; padding:0 0px; } .no-parapack{ position:relative; z-index:0; /*height:33vw;*//*変更する*/ } /*パララックス*/ .para_haikei01{ display:block; } .para_sp1{ display:none; } @media screen and (max-width: 896px) { .para_haikei01{ display:none; } .para_sp1{ display:block; margin-top: -40px; } } /*スマホ用パララックス（iphone対応）*/ .wrap1{ /*padding:5%;*/ height: calc(19vw + 140px);/*変更する*/ /*margin-top:-100px;*/ } .wrap1::before { content:""; display:block; position:fixed; top:0; left:0; z-index:0; width:100%; height:100vh; background-repeat:no-repeat; background-position:50% 100%; background-image:url('https://new.sasakidentalclinic.com/wp-content/uploads/2022/07/para01.jpg'); background-size:cover; } .siteFooter { position: relative; z-index: 10; background-color: #FFF; margin-top: -30px; } .site-footer { position: relative; z-index: 10; background-color: #FFF; /*margin-top: -30px;*/ } .para_haikei01 p{ position: absolute; color: #fff; top: 50%; left: 50%; -ms-transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); margin: 0; padding: 0px 0px 0px; /* background: rgba(0,0,0,0.5); */ } .para_sp1 p{ position: absolute; color: #fff; top: 50%; left: 50%; -ms-transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); margin: 0; padding: 0px 0px 0px; /* background: rgba(0,0,0,0.5); */ } /*スクロールバーの装飾*/ /* スクロールの幅の指定 */ #scroll_box::-webkit-scrollbar { width: 10px; height: 10px; } /* スクロールの背景の設定 */ #scroll_box::-webkit-scrollbar-track { border-radius: 5px; box-shadow: 0 0 4px #aaa inset; } /* スクロールのつまみ部分の設定 */ #scroll_box::-webkit-scrollbar-thumb { border-radius: 5px; background: #B6C3EF; } /*div要素にスクロールバー*/ .box_srcollbar { /* overflow: auto; */ overflow-y: scroll; /*max-width: 670px;*/ height: 120px; padding: 5px; border: 1px solid #000; background-color: #F9F9F9; color: #000; font-size: 12px; } .box_title { border: 1px solid #000; padding: 5px; /* width: 300px; */ font-weight: bold; font-size: 14px; background-color: #F57C00; color: #fff; text-align: center; } /*スクロールバー非表示*/ .no_scrollbar { width:100%; height: 500px; overflow-y: scroll; -ms-overflow-style: none; /* IE, Edge 対応 */ scrollbar-width: none; /* Firefox 対応 */ } .no_scrollbar::-webkit-scrollbar { /* Chrome, Safari 対応 */ display:none; } /*「お問合せ」を固定（fixed）*/ .border_maru { width: 90px; height: 90px; -moz-background-clip: padding; -webkit-background-clip: padding; background-clip: padding-box; background-color: rgba(68,160,119,0.6); /* 背景の設定 */ border: 0px solid rgba(0,0,0,0.3); /* ボーダーの設定 */ border-radius: 50%; /* 角丸 */ -webkit-border-radius: 50%; -moz-border-radius: 50%; font-weight: bold; color:#FFFFFF; padding:32px 0 24px 9px; } .booking { position: fixed; bottom: 120px; right: 6px; z-index:100000; } /*リンクを無効にする*/ .no_link{ pointer-events: none; } /*電話番号*/ @media screen and (min-width: 1025px) { /*PCの電話番号*/ .p-events{ pointer-events:none; } } @media screen and (max-width: 1024px) { /*タブレット横以下*/ .p-events{ pointer-events:auto !important; } } /*iframeをレスポンシブにする　ウィジェットの高さ一定*/ /*iframeレスポンシブ*/ .iframe-wrapper { position: relative; padding-bottom: 100%;/*56.25%*/ height: 0; overflow: hidden; } .iframe-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /*lightning新バージョン*/ /*メニューのお問合せボタンに枠スマホ版*/ #menu-main_navi .toiawase_btn a{ border: 1px solid #1E73BE; background-color: #000; border-radius: 20px; padding: 0 15px; color: #FFF !important; margin-left:0px; height:40px !important; line-height:10px; /*width:110px;*/ margin-top:4px; text-align:center; } #menu-main_navi .toiawase_btn a:hover{ color: #FFFF00 !important; border-bottom: 0px solid #FFF !important; } @media screen and (max-width: 1024px) { #menu-main_navi .toiawase_btn a { padding: 0 20px !important; color: #FFF !important; margin-left: 0px; height: 40px; line-height: 40px; /*width: 110px;*/ text-align:center; } } /*メニューのお問合せボタンに枠スマホ版*/ .toiawase_btn a{ border: 1px solid #1E73BE; background-color: #000; border-radius: 20px; padding: 0 15px; color: #FFF !important; margin-left:0px; height:40px !important; line-height:10px; /*width:110px;*/ margin-top:4px; text-align:center; } .toiawase_btn a:hover{ color: #FFFF00 !important; border-bottom: 0px solid #FFF !important; } @media screen and (max-width: 1024px) { .toiawase_btn a { padding: 0 20px !important; color: #FFF !important; margin-left: 0px; height: 40px; line-height: 40px; /*width: 110px;*/ text-align:center; } } /*ヘッダーナビ最後のメニュー(お問合せボタン)だけ下線を引かない*/ .gMenu>li.toiawase_btn:before{ position: absolute; left: 0; bottom: 0; content: ""; width: 0; border-bottom: 0px solid #FFF; transition: all .5s ease-out; } /*lightning旧バージョン*/ /*ヘッダーナビ最後のメニューだけ下線を引かない*/ .global-nav-list>li.toiawase_btn:before{ position: absolute; left: 0; bottom: 0; content: ""; width: 0; border-bottom: 0px solid #FFF; transition: all .5s ease-out; } /*二重打消し線*/ .utikesi{ display: inline-block; /* 打ち消し線と文字の幅を揃えられるようにする */ position: relative; /* 打ち消し線の位置を調整する時の基準点になるようにする */ } .utikesi::before { content: ''; /* 擬似要素に実体を持たせる */ width: 100%; /* 打ち消し線の幅を指定する*/ height: 1px; /* 線を表示させるために1pxだけ高さを入れる */ border-top: solid 1px #000; /* 二重線の上側になる線をひく */ position: absolute; /* 線の位置を自由に動かせるようにする */ left: 0 ; /* 線の位置を左に揃える */ top: calc(50% - 3px); /* 線の位置を真ん中から3px上にする */ } .utikesi::after { content: ''; /* 擬似要素に実体を持たせる */ width: 100%; /* 打ち消し線の幅を指定する*/ height: 1px; /* 線を表示させるために1pxだけ高さを入れる */ border-bottom: solid 1px #000; /* 二重線の上側になる線をひく */ position: absolute; /* 線の位置を自由に動かせるようにする */ left: 0 ; /* 線の位置を左に揃える */ bottom: calc(50% - 3px); /* 線の位置を真ん中から3px下にする */ } /*頭ぞろえ*/ .atamazoroe ul{ margin-left:0px;/*調整する*/ line-height:100% !important; } .atamazoroe li{ list-style-type:none !important; padding-left:1em; text-indent:-1em; margin-bottom: -1px; margin-top:4px; line-height:1.45em; } /*イメージフィット*/ .image_fit{ object-fit:cover; object-position: left top;/* 0 0と同じ */ width:640px; aspect-ratio:1.524;/*640÷420*/ } /*fontawesomeのホバー時にカラーチェンジ*/ .awesome_color01{ color:#FFF; } .awesome_color01:hover{ color:#71BDCD; } /*グーグルマップレスポンシブ*/ .gmap_iframe { aspect-ratio: 90/56; max-width: 1000px; width: 100%; height: auto; } /*縦書き*/ .tategaki { -ms-writing-mode: tb-rl; writing-mode: vertical-rl; } /*点滅*/ .blinking { animation: blink 1.5s step-start infinite; }