/* Theme Name: マリンパークニクス2025 Theme URI: https://www.nixe.co.jp/ Author: FrameWorks tsaito2024 Author URI: Description: Version: 1.0 */ /*media query PC ～768px SP ～1024px TAB */ /*記述方法 最初にPC記述を記載し、SPやtabで適用する部分は@mediaの中に 必要なもののみ記載。 /* CSS Document */ /********************************************************/ /******** 共通（body,inner,pタグ,imgタグの基本設定） ********/ /*******************************************************/ body { position: relative; line-break: strict; overflow-x: hidden;} body p { word-break:break-all;} .inner { width:95%; min-width:1000px; margin:0 auto;} .spOnly { display: none;} .pcOnly { display: block;} #page-top { width: 60px; height: 60px; position: fixed; right: 0; bottom: 0; z-index: 3;} img[src$=".svg"] { width: 100%; height: 100%; object-fit: contain;} a { text-decoration: none; } @media only screen and (max-width:768px){ body { font-size: 1.4rem; overflow-x: hidden;} .inner { max-width: 90%; min-width: auto;} .spOnly { display: block;} .pcOnly { display: none;} img { width: 100%; height: auto;} img[src$=".svg"] { width: 100%; height: auto;} .column2 { width: 100%; margin: 0 auto;} .column3 { width: 100%; margin: 0 auto;} .column3 + .column3 { margin-top: 30px;} .wp-block-columns { margin-bottom: 0!important;} } /*scroll_up ｜下から上へ出現*/ .scroll_up { transition: 0.8s ease-in-out; transform: translateY(30px); opacity: 0; } .scroll_up.on { transform: translateY(0); opacity: 1.0; } /*scroll_left ｜左から出現*/ .scroll_left { -webkit-transition: 0.8s ease-in-out; -moz-transition: 0.8s ease-in-out; -o-transition: 0.8s ease-in-out; transition: 0.8s ease-in-out; transform: translateX(-30px); opacity: 0; filter: alpha(opacity=0); -moz-opacity: 0; } .scroll_left.on { opacity: 1.0; filter: alpha(opacity=100); -moz-opacity: 1.0; transform: translateX(0); } /*scroll_right ｜右から出現*/ .scroll_right { -webkit-transition: 0.8s ease-in-out; -moz-transition: 0.8s ease-in-out; -o-transition: 0.8s ease-in-out; transition: 0.8s ease-in-out; transform: translateX(30px); opacity: 0; filter: alpha(opacity=0); -moz-opacity: 0; } .scroll_right.on { opacity: 1.0; filter: alpha(opacity=100); -moz-opacity: 1.0; transform: translateX(0); } .gap0 { gap: 0!important; } .gap10 { gap: 1rem!important; } .gap20 { gap: 2rem!important; } .gap30 { gap: 3rem!important; } .gap40 { gap: 4rem!important; } .gap50 { gap: 5rem!important; } .gap60 { gap: 6rem!important; } .gap70 { gap: 7rem!important; } .gap80 { gap: 8rem!important; } .gap90 { gap: 9rem!important; } @media only screen and (max-width:1024px){ .scroll_left { transition: 0.8s ease-in-out; transform: translateY(30px); opacity: 0; } .scroll_left.on { transform: translateY(0); opacity: 1.0; } .scroll_right { transition: 0.8s ease-in-out; transform: translateY(30px); opacity: 0; } .scroll_right.on { transform: translateY(0); opacity: 1.0; } } .topBack { width: 100px; height: 100px; position: absolute; right: 50px; } .topBack a { display: block; padding: 27px; } .inner { width: 1000px; margin: 0 auto; } @media only screen and (max-width:768px){ .inner { width: 95%; } } /*見出し類*/ /*下にグレー斜線がついた大見出し*/ .midashi2 { display: block; font-size: 2.0rem; color: #0b7b92; font-weight: 600; padding-bottom: 1rem; margin-bottom: 1rem; } .midashi2::after { content: ''; display: block; margin-top: 1rem; width: 100%; height: 10px; background:repeating-linear-gradient(-45deg, #ddd , #fff 3px, #fff 0,#fff 5px); } /*前後にカッコがついた大見出し（青）*/ .midashi3 { display: inline-block; width: auto; padding:0.7rem 4rem; font-size: 2.0rem; font-weight: 600; color: #0b7b92; text-align: center; position: relative; } .midashi3::before { content: ''; width: 20px; height: 100%; position: absolute; top: 0; left: 0; background: url(assets/images/midashi3L.svg) no-repeat; } .midashi3::after { content: ''; width: 20px; height: 100%; position: absolute; top: 0; right: 0; background: url(assets/images/midashi3R.svg) no-repeat; } /*前後にカッコがついた大見出し（白）*/ .midashi3w { display: inline-block; text-align: center; color: #fff; font-size: 2.0rem; font-weight: 500; position: relative; padding: 10px 80px; } .midashi3w::before { content: ''; width: 20px; height: 100%; position: absolute; top: 0; left: 0; background: url(assets/images/shop-midashi3L.svg) no-repeat; } .midashi3w::after { content: ''; width: 20px; height: 100%; position: absolute; top: 0; right: 0; background: url(assets/images/shop-midashi3R.svg) no-repeat; } @media only screen and (max-width:768px){ .midashi3w { display: block; } } /*左右に斜め線がついた小見出し（青）*/ .midashi4 { display: inline; text-align: center; padding: 10px 20px; color: #0b7b92; position: relative; } .midashi4::before { position: absolute; left: 0; top: 30%; content: ''; height: 50%; border-left: solid 3px #0b7b92; transform: rotate(-15deg); } .midashi4::after { position: absolute; right: 0; top: 30%; content: ''; height: 50%; border-left: solid 3px #0b7b92; transform: rotate(15deg); } /*下線のみ吹き出し（黒）*/ .midashi5 { position: relative; padding: 1rem 0; border-bottom: 3px solid #333; } .midashi5:before,.midashi5:after { position: absolute; top: 100%; left: 50%; content: ""; height: 0; width: 0; } .midashi5:before { border: 12px solid; border-color: transparent; border-top-color: #333; margin-left: -12px; } .midashi5:after { border: 8px solid; border-color: transparent; border-top-color: #fff; margin-left: -8px; } /*先頭に矢印がついた見出し*/ .midashi6 { padding-left: 50px; background: url(assets/images/midashi6Arrow.svg) no-repeat left center; } @media only screen and (max-width:768px){ .midashi6 { background-size: 10%; } } /*左右にドットが配置された見出し*/ .midashi7 { display: flex; justify-content: center; align-items: center; background: url(assets/images/midashi7Dot.png) repeat-x center center; } .midashi7 strong { background: #fff; padding: 1rem 2rem; } /*下線がブルードットの見出し*/ .midashi8 { border-bottom: dotted 3px #0b7b8f; padding-bottom: 0.7rem; } /*五角形囲い（左上が欠けている）*/ .pentaWaku { border: solid #0b7b8f 2px; position: relative; padding: 15px; } .pentaWaku::before { content: ''; background: #fff; position: absolute; top: -2px; left: -2px; width: 20px; height: 20px; } .pentaWaku::after { content: ''; border-left: solid 2px #0b7b8f; position: absolute; top: 4px; left: 4px; width: 28px; height: 28px; transform: rotate(45deg); } /*リボン囲み*/ .ribonBlue { background: url(assets/images/ribonBlueBg.svg) no-repeat left top; background-size: 65px 25px; padding: 0 0 0 5px; } .ribonBlue2 { background: url(assets/images/ribonBlueBg2.svg) no-repeat left top; background-size: 80px 25px; padding: 0 0 0 5px; } /*前後ズレた罫線で挟んだブロック*/ .borderBlock1 { position: relative; padding: 3rem; min-height: 80px; } .borderBlock1::before { content: ''; width: 93px; height: 60px; background: url(assets/images/borderBlock1L.png); position: absolute; bottom: 0; left: 0; } .borderBlock1::after { content: ''; width: 93px; height: 60px; background: url(assets/images/borderBlock1R.png); position: absolute; top: 0; right: 0; } /*Notes*/ .notesBox { border-top :solid 2px #0b7b8f; border-bottom :solid 2px #0b7b8f; padding: 0 0 20px 0; position: relative; } .notesBox .title { background: #fff;; border-left: solid 2px #0b7b8f; border-right: solid 2px #0b7b8f; border-top: solid 2px #0b7b8f; border-radius: 20px 20px 0 0; padding: 10px 50px 0; position: absolute; top: -36px; left: 3%; } .notesBox ul { list-style-type: none; margin: 20px 0 0 0; } .notesBox ul li { color: #333; padding-left: 30px; margin: 1rem auto; font-size: 1.6rem; line-height: 1.6rem; position: relative; } .notesBox ul li::before { content: ''; display: inline-block; width: 1.6rem; height: 1.6rem; background: #0b7b8f; border-radius: 0.8rem; position: absolute;top: 0; left: 0; } /*看板*/ .boardBlue { border: solid 2px #0b7b8f; border-radius: 20px; padding: 0; position: relative; } .boardBlue::before { content: ''; width: 4px; height: 16px; background: #0b7b8f; border-radius: 2px; position: absolute; top: -8px; left: 15%; } .boardBlue::after { content: ''; width: 4px; height: 16px; background: #0b7b8f; border-radius: 2px; position: absolute; top: -8px; right: 15%; } .boardBlue p:nth-of-type(1) { background: #e8fafa; padding: 10px 0; border-radius: 20px 20px 0 0; text-align: center; color: #0b7b8f; font-size: 1.6rem; } .boardBlue p:nth-of-type(2) { padding: 20px 10px; text-align: center; color: #0b7b8f; font-size: 1.6rem; line-height: 1.6; } /*横幅画面いっぱい（親要素を超えて）*/ .w100vw { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } .w100vw p { width: 1000px; margin: 0 auto; } .w100vw div { width: 1000px; margin: 0 auto; } .w100vw div p { width: auto; } @media only screen and (max-width:768px){ .w100vw p { width: 80%; } .w100vw div { width: 80%; } } /*上下波波の横幅画面いっぱい*/ .waveArea { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: 50px 0; background-image: url(assets/images/waveAreaTopBg.png) , url(assets/images/waveAreaBottomBg.png); background-repeat: repeat-x, repeat-x; background-position: top center, bottom center; background-color: #FFF1F1; } .waveArea .wp-block-group__inner-container { width: 1000px; margin: 0 auto; } @media only screen and (max-width:768px){ .waveArea .wp-block-group__inner-container { width: 100%; padding: 20px; } } /*角丸枠囲み*/ .borderBlue { border: solid 1px #0b7b8f; border-radius: 10px; padding: 20px; } /*一文字目●に白抜き*/ .marushiro:first-letter { background: #0b7b8f; color: #fff; padding: 9px 13px; border-radius: 20px; } /*明朝体*/ .mincho { font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; } /*背景薄い青*/ .bgLightBlue { background: #e8fafa; } /*行間開け*/ .lineHeight1 { line-height: 1.0; } .lineHeight2 { line-height: 2.0; } .lineHeight3 { line-height: 3.0; } .lineHeight4 { line-height: 4.0; } /*行頭●リスト*/ .maruList { list-style-type: none; margin: 20px 0 0 0; } .maruList li { padding-left: 30px; margin: 1rem auto; line-height: 1.4; position: relative; } .maruList li::before { content: ''; display: inline-block; width: 1.3rem; height: 1.3rem; background: #0b7b8f; border-radius: 0.8rem; position: absolute; top: 6px; left: 0; } /*ページ最初のページ内リンク用*/ .inpageAncherAea { gap: 2px; } .inpageAncherAea div { background: #b5d7de; padding: 1rem; position: relative; display: flex; justify-content: center; align-items: center; min-height: 100px; } .inpageAncherAea div::after { content: ''; background: #b5d7de; display: inline-block; width: 100%; height: 20px; clip-path: polygon(0 0, 100% 0%, 50% 100%); position: absolute; bottom: -20px; left: 0; } .inpageAncherAea div:hover { opacity: 0.8; } .inpageAncherAea div p:nth-of-type(1) { color: #fff; position: absolute; top: 0; left: 5px; font-size: 6.0rem; font-weight: 100; } .inpageAncherAea div p:nth-of-type(2) { display: block; width: 100%; height: 100%; } .inpageAncherAea div p a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: #0b7b8f; font-size: 1.6rem; font-weight: 500; text-align: center; } /** table **/ /*外枠なし、セル周りのborderあり*/ .table01 { border: none; border-collapse: collapse; } .table01 tr td { border: solid 1px #0b7b8f; padding: 10px 20px; font-size: 1.6rem; color: #0b7b8f; } .bnLn { border-left: none!important; } .bnRn { border-right: none!important; } .bnTn { border-top: none!important; } .bnBn { border-bottom: none!important; } /*ボタン（Pタグにclass付与し、その中のaタグに装飾）*/ .btn a { display: inline-block; width: 100%; text-align: center; background: #33b2dc; padding: 10px 20px; border-radius: 10px; color: #fff!important; text-decoration: none!important; cursor: pointer; } .btn a:hover { opacity: 0.5; } .btnSquare { width: 80%; max-width: 310px; margin: 30px auto 0; text-align: center; padding: 0!important;} .btnSquare a { display: block; font-size: 2.1rem; font-weight: 500; padding: 10px;} .btnSquareBlack { background: #000;} .btnSquareBlack a { color: #fff;} .btnSquareBlue { background: #004692;} .btnSquareBlue a { color: #fff;} .btnSquareWhite { background: #fff;} .btnSquareWhite a { color: #004692;} .btnBorder { width: 80%; max-width: 310px; background: rgba(255, 255, 255, 0.4); background-image: repeating-linear-gradient(-45deg,rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.4) 1px,transparent 0, transparent 3px); text-align: center; margin: 30px auto 0;} .btnBorder a { display: block; font-size: 2.1rem; font-weight: 500; padding: 10px;} .btnBorderBlue { background: #A4D3F4; background-image: repeating-linear-gradient(-45deg,#C8E4F8, #C8E4F8 2px,transparent 0, transparent 4px); margin: 50px auto;} @media only screen and (max-width:768px){ } /********************************************************/ /******** header ********/ /*******************************************************/ header { width: 100%; margin: 0 auto; padding-top: 2rem; } header .l1 { display: flex; justify-content: space-between; align-items: center; background: rgba(255,255,255,0); } .headerLogo { width: 340px; height: auto; } .headerLogo img { width: 100%; height: auto; } header .g-navi { width: calc( 100% - 370px ); display: flex; justify-content: space-between; padding: 1rem 0; } a.gNaviHomeBtn { width: 125px; height: 60px; margin: 1rem 0; display: flex!important; justify-content: center; align-items: center; border-bottom: solid 1px #fff; } header .g-navi ul { width: 100%; display: flex; flex-wrap: wrap; } header .g-navi ul li { width: calc( 100% / 3 ); height: 40px; padding: 0.5rem 0; } header .g-navi a { font-weight: 400; color: #000; border-right: solid 1px #ccc; font-size: 1.4rem; display: block; text-align: center; } header .g-navi a:hover { color: #004096; border-bottom: solid 1px #004096; } header .l2 { background: rgba(255,255,255,0); } header .l2 ul { display: flex; justify-content: space-between; align-items: stretch; background: rgba(255,255,255,0); } header .l2 ul li { width: calc( 100% / 6 ); padding: 0 1rem; } header .l2 ul li a { display: flex; height: 100%; justify-content: center; align-items: center; color: #0b7b92; padding: 1rem 0; border-top: solid 1px #0b7b92; text-align: center; font-size: 1.4rem; line-height: 1.1; } header .l2 ul li a:hover { background: #f5f5f5; } header .l3 .inner { position: relative; } header .l3 #menu-subnavi { position: absolute; right: 240px; z-index: 2; display: flex; justify-content: space-between; width: 300px; padding: 1rem; /*background: rgba(0,0,0,0.5);*/ text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.6); } header .l3 #menu-subnavi li { margin: 0 1rem; } header .l3 #menu-subnavi li a { color: #fff; font-size: 1.3rem; } .langMenu { width: 140px; height: 60px; position: absolute; top:0; right: 90px; background: #ffe45f; color: #000; text-align: center; z-index: 2; cursor: pointer; transition: all .3s; } .langMenu span { display: block; text-align: center; font-size:1.4rem; color: #000; width: 100%; height: 100%; padding: 1.6rem 0; } .langMenu .langContent { width: 140px; height: 100px; background: #fff; opacity: 0; } .langMenu .langContent a { display: block; text-align: center; padding: 1rem; font-size: 1.4rem; } .langMenu .langContent a:hover { color: #0089ed; } .langMenu.active .langContent { opacity: 1; transition: all .3s; } .back2topArea { display: flex; justify-content: center; border-bottom: solid 8px #e0d7dc; margin-top: 6rem; } .back2topArea a { width: 200px; text-align: center; font-size: 1.2rem; background: #e0d7dc; padding: 1.5rem 0; clip-path: polygon(10% 0%, 90% 0%, 100% 100%, 0% 100%); } .back2topArea a:hover { opacity: 0.5; } @media only screen and (max-width:768px){ #wpadminbar { display: none; } .headerLogo { width: 80%; height: auto; } header .g-navi { display: none; } header .l2 { display: none; } header .l3 .inner { position: static; } header .l3 #menu-subnavi { display: none; } /*.langMenu { display: none; }*/ .langMenu { top:62px; right: 0px; width: 70px; height: 44px; } .langMenu span { font-size:1.3rem; padding: 1.2rem 0; } .langMenu .langContent { width: 140px; height: 100px; background: #fff; opacity: 0; position: absolute; top: 44px; right: 0; } .langMenu.active .langContent {} } footer { width: 100%; margin: 0 auto; padding: 6rem 0; } footer .column3-2 { padding-left: 2rem; border-left: dotted 2px #333; } footer .column3-2 ul li { border-right: solid 1px #ccc; } footer .column3-2 ul li a { padding: 0 2rem; font-size: 1.3rem; } footer .column3-2 ul li a:hover { text-decoration: underline; } footer .column3-2 p { font-size: 1.3rem; } footer .column3-2 p a { font-size: 1.3rem; padding: 0 2rem; border-right: solid 1px #ccc; } footer .column3-2 p a:hover { text-decoration: underline; } footer .l2 { background: #e0d7dc; padding: 1rem 0; margin: 2rem auto; } footer .l2 p { padding: 0 2rem; font-size: 1.3rem; border-right: solid 1px #333; } footer .l2 ul li { border-right: solid 1px #333; } footer .l2 ul li a { padding: 0 2rem; font-size: 1.3rem; } footer .l2 ul li a:hover { text-decoration: underline; } footer .copyright { text-align: center; font-size: 1.2rem; color: #333; } .fix-btn { display: none; } @media only screen and (max-width:768px){ footer .column3-1 { width: 100%; } footer .column3-2 { width: 100%; margin: 3rem auto; border: none; padding-left: 0; } footer .column3-2 ul.flex { justify-content: center!important; } footer .column3-2 ul.flex li { width: 50%; margin: 1rem auto; } footer .column3-2 ul li a { display: block; width: 100%!important; text-align: center; } footer .column3-2 p span { width: 100%; text-align: center; font-weight: 500; } footer .column3-2 p a { width: 50%!important; display: block; text-align: center; margin: 1rem auto; } footer .l2 p { padding: 2rem 0; font-size: 1.3rem; border: none; font-weight: 500; } footer .l2 ul li { width: 50%; margin: 1rem auto; } footer .l2 ul li a { padding: 0; font-size: 1.3rem; display: block; text-align: center; } .fix-btn { display: block; position: fixed; bottom: 0; right: 0; width: 20%; } } /*HOME*/ .homeVisualtArea { width: 100%; height: auto; display: block; background-size: cover; position: relative; } .homeVisualtArea .inner { position: relative; height: 520px; } .homeVisualtArea .inner .hc01 { display: inline-block; padding: 0.5rem; font-size: 1.6rem; font-weight: 600; color: #0b7b92; background: #fff; position: absolute; top: 60px; left: 0; clip-path: polygon(3% 0%, 100% 0, 100% 100%, 0 100%, 0 24%); } .homeVisualtArea .inner .hc02 { display: inline-block; padding: 0.5rem; font-size: 1.8rem; font-weight: 500; color: #fff; text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4); position: absolute; top: 120px; left: 0; } .homeVisualtArea .inner .hc03 { display: inline-block; padding: 0.5rem; font-size: 3.0rem; font-weight: 500; color: #fff; text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4); position: absolute; top: 230px; left: 30%; text-align: center; } .homeVisualtArea .homeVisualCaution { width: 100%; height: 50px; position: absolute; z-index: 2; left: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); padding: 1rem 0; } .homeVisualtArea .homeVisualCaution p { font-size: 1.2rem; color: #fff; text-align: center; } .homeVisualtArea .homeVisualCaution p a { font-size: 1.2rem; color: #fff; margin: 0 2rem; } .homeVisualtArea .homeVisualCaution p a:hover { color: #ffe45f; } /*slider設定*/ .homeVisualtArea .sliderAncher p { position: absolute; width: 100%; top: 50%; left: 0%; transform: translate(0%, -50%); text-align: center; color: #fff; font-size: 2.6rem; font-weight: 500; text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.6); } @media only screen and (max-width:768px){ .homeVisualtArea .bx-viewport { height: 320px!important; } .homeVisualtArea .sliderAncher p { font-size: 2.0rem; padding: 2.0rem; top: 35%; } .homeVisualtArea .homeVisualCaution { height: 100px; padding: 1rem; } } .homeCautionArea { width: 100%; margin: 3rem auto; } .homeCautionArea .inner { display: flex; justify-content: center; } .homeCautionArea .cautionItem { width: 48%; margin: 1%; border: solid 3px #CC0000; padding: 2rem; } .homeCautionArea .cautionItem .newsDaytime { font-size: 1.4rem; color: #666; margin-bottom: 0.7rem; } .homeCautionArea .cautionItem .newsTitle a { font-size: 1.8rem; font-weight: 500; color: #CC0000; } @media only screen and (max-width:768px){ .homeCautionArea .cautionItem { width: 100%; padding: 1rem; } } .homeInfoArea { padding: 4rem 0; } .homeInfoArea .flex .subBox { margin-bottom: 10rem; } .homeInfoArea .midashi2 .btn a { display: inline; padding: 1.0rem; margin-left: 2rem; } .homeInfoArea .midashi2 img { margin-right: 10px; max-height: 80px; } @media only screen and (max-width:768px){ .homeInfoArea .flex .subBox { margin-bottom: 6rem; } .homeInfoArea .midashi2 img { width: 40px; max-height: 80px; } .homeInfoArea .midashi2 .btn a { width: 60%; display: block; margin: 0.7rem auto; } } .homeEventArea { padding: 0 0 4rem; } .homeEventArea .midashi2::after { display: none; } .homeEventArea #osusume { width: 100%; padding: 2.0rem 0; margin: 4rem 0; background: repeating-linear-gradient(135deg,#b0d4dc, #b0d4dc 3px, #fff 3px, #fff 6px); } .homeEventArea #osusume article { width: 33%; background: #fff; } .homeEventArea #osusume article .postImageArea { width: 100%; height: 205px; overflow: hidden; } .homeEventArea #osusume article .postTextArea { width: 100%; height: 100px; padding: 2rem; overflow: hidden; } .homeEventArea #osusume article .postTextArea p.newsDate { font-size: 1.2rem; font-weight: 400; color: #333; } .homeEventArea #osusume article .postTextArea .post-icon { background: #666; color: #fff; margin-left: 2rem; padding: 0.5rem; font-weight: 400; } .homeEventArea #osusume article .postTextArea .newsTitle { font-size: 1.4rem; color: #000; line-height: 1.2; padding: 1rem 0; } .homeEventArea .bx-wrapper { max-width: 960px!important; } .homeEventArea .bx-wrapper .bx-next { right: -80px; } .homeEventArea .bx-wrapper .bx-prev { left: -80px; } @media only screen and (max-width:768px){ .homeEventArea .bx-wrapper { max-width: 300px!important; } .homeEventArea .bx-controls-direction { display: none; } } .homeFacArea { padding: 0 0 4rem; } .frontPageImageWrap { display: flex; justify-content: center; } .frontPageImageWrap figure { width: calc( 100% / 5 ); } .frontPageImageWrap figure img { width: 100%; height: auto; transition:1s all; } .frontPageImageWrap figure img:hover { transform:scale(1.5,1.5); transition:1s all; } @media only screen and (max-width:768px){ .frontPageImageWrap figure { width: calc( 100% / 3 ); height: auto; } } .homeGuidArea { padding: 0 0 4rem; } .homeGuidArea p .btn { display: inline; } .homeGuidArea p .btn a { display: inline; } .homeGuidArea .edu .column3 { width: 33.33%; position: relative; } .homeGuidArea .edu .column3 p:nth-of-type(2) { position: absolute; bottom: 10px; left: 10px; color: #fff; } @media only screen and (max-width:768px){ .homeGuidArea .edu .column3 { width: 100%; position: relative; } .homeGuidArea img { width: auto; } .homeGuidArea p .btn a { display: inline-block; width: :60%; margin: 0.7rem auto; } } .homeSnsArea { padding: 0 0 4rem; } .homeSnsArea .midashi2::after { display: none; } .homeSnsArea a { text-align: center; } @media only screen and (max-width:768px){ .homeSnsArea .flex a { margin: 1rem auto; } } .hover-text { position: absolute; background-color: rgba(255, 255, 255, 1); color: #0b7b8f; font-size: 1.6rem; border: solid 2px #0b7b92; padding: 0.7rem 1.4rem; border-radius: 5px; display: none; pointer-events: none!important; z-index: 10; } @media only screen and (max-width:768px){ .hover-text { font-size: 1.2rem; } } /*固定ページ共通*/ .breadcrumbs { padding: 1rem 0; font-size: 1.3rem; color: #fff; text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.6); position: absolute; z-index: 2; } .breadcrumbs a { font-size: 1.3rem; color: #fff; text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.6); } main .visualArea { width: 100%; height: 240px; position: relative; padding-top: 5rem; margin-bottom: 2rem; } main .visualArea .pageTitleText { color: #fff; text-align: center; font-size: 4rem; letter-spacing: 1.5rem; text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.6); } main .visualArea .titleTextCatch { color: #fff; text-align: center; font-size: 2rem; font-weight: 500; text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.6); font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; margin-top: 2rem; } main .visualArea .titleTextMemo { color: #fff; text-align: center; font-size: 1.3rem; letter-spacing: 0; text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.6); margin-top: 1rem; } @media only screen and (max-width:768px){ main .visualArea { height: 280px; margin-bottom: 2rem; } main .visualArea .pageTitleText { font-size: 2rem; letter-spacing: 1.2rem; } main .visualArea .titleTextCatch { font-size: 1.4rem; } main .visualArea .titleTextCatch br { display: none; } main .visualArea .titleTextMemo { font-size: 1.1rem; } } .page .pageContentWrap h3 { display: block; font-size: 2.0rem; color: #0b7b92; font-weight: 600; padding-bottom: 1rem; margin-bottom: 1rem; } /* .midashi2とおなじ内容 */ .page .pageContentWrap h3::after { content: ''; display: block; margin-top: 1rem; width: 100%; height: 10px; background:repeating-linear-gradient(-45deg, #ddd , #fff 3px, #fff 0,#fff 5px); } @media only screen and (max-width:1024px){ .page main .inner { min-width: 90%; max-width: 90%; width: 90%; } }@media only screen and (max-width:768px){ .page main h3 span { font-size: 3rem; } } /*お知らせ一覧 news, カテゴリ*/ .categoryBtnArea { margin: 6rem auto; width: 100%; } .categoryBtnArea ul { list-style-type: none; } .categoryBtnArea ul li { width: calc( 100% / 4 ); border: solid 1px #999; } .categoryBtnArea ul li + li { border-left: none; } .categoryBtnArea ul li a { display: block; width: 100%; padding: 1.4rem 0; text-align: center; color: #666; letter-spacing: 1rem; background: #f5f5f5; } .categoryBtnArea ul li a:hover { background: #56a3b3; color: #fff; } .news .categoryBtnArea ul li:nth-of-type(1) a { background: #56a3b3; color: #fff; } .category-event .categoryBtnArea ul li:nth-of-type(2) a { background: #56a3b3; color: #fff; } .category-infomation .categoryBtnArea ul li:nth-of-type(3) a { background: #56a3b3; color: #fff; } .category-news .categoryBtnArea ul li:nth-of-type(4) a { background: #56a3b3; color: #fff; } .postContentWrap { display: flex; flex-wrap: wrap; } .postContentWrap article { width: calc( 100% / 3 ); border :solid 1px #777; position: relative; } .postContentWrap article a { display: block; } .postContentWrap article a:hover { opacity: 0.8; } .postContentWrap article .postImageArea { width: 100%; height: 250px; } .postContentWrap article .postTextArea { width: 100%; padding: 2rem; } .postContentWrap article .newsDate { color: #999; } .postContentWrap article .post-icon { display: block; position: absolute; top: 0; left: 20px; background: #0b7b92; color: #fff; padding: 1rem 0; font-size: 1.3rem; text-align: center; width: 30%; } .postContentWrap article .newsTitle { font-size: 1.8rem; font-weight: 600; color: #0b7b92; line-height: 1.1; } .postContentWrap article:nth-of-type(2) { border-left: none; } .postContentWrap article:nth-of-type(3) { border-left: none; } .postContentWrap article:nth-of-type(4) { border-top: none; } .postContentWrap article:nth-of-type(5) { border-top: none; border-left: none; } .postContentWrap article:nth-of-type(6) { border-top: none; border-left: none; } .postContentWrap article:nth-of-type(7) { border-top: none; } .postContentWrap article:nth-of-type(8) { border-top: none; border-left: none; } .postContentWrap article:nth-of-type(9) { border-top: none; border-left: none; } @media only screen and (max-width:768px){ .categoryBtnArea ul li { width: calc( 100% / 2 ); } .categoryBtnArea ul li + li { border-left: solid 1px #999; } .postContentWrap article { width: 100%; border: solid 1px #999!important; margin: 2rem auto; } } .pagenavi { margin: 4rem auto;; } .pagenavi .wp-pagenavi { display: flex; justify-content: center; gap: 20px; } .pagenavi .wp-pagenavi .pages { display: none; } .pagenavi .wp-pagenavi .current { background: #0b7b92; color: #fff; width: 40px; height: 40px; border-radius: 20px; border: none; text-align: center; font-size: 1.6rem; font-weight: 600; padding-top: 0.7rem; } .pagenavi .wp-pagenavi .page { background: #999; color: #fff; width: 40px; height: 40px; border-radius: 20px; border: none; text-align: center; font-size: 1.6rem; font-weight: 400; padding-top: 0.7rem; } .pagenavi .wp-pagenavi .nextpostslink { background: #999; color: #fff; width: 40px; height: 40px; border-radius: 20px; border: none; text-align: center; font-size: 1.6rem; font-weight: 400; padding-top: 0.7rem; } .pagenavi .wp-pagenavi .previouspostslink { background: #999; color: #fff; width: 40px; height: 40px; border-radius: 20px; border: none; text-align: center; font-size: 1.6rem; font-weight: 400; padding-top: 0.7rem; } /*single*/ .single article { width: 100%; padding: 8rem; margin-bottom: 4rem; } .single .postContentWrap article .post-icon { left: 80px; } .single .postContentWrap article .newsDate { color: #999; } .single .postContentWrap article .newsTitle { margin: 2rem 0; font-size: 3.2rem; } .single .newsContent { line-height: 1.6; } .single .newsContent img { margin: 2rem auto; } .single .newsContent p { margin: 4rem auto; line-height: 3.0;} .single .newsContent ul { list-style-type: circle; margin: 4rem 0; padding-left: 2rem; } .single .newsContent ul li { margin: 1rem; } .single a.btn { margin: 4rem auto; } @media only screen and (max-width:768px){ .single article { padding: 2rem; } .single .postContentWrap article .post-icon { left: auto; right: 10px; } } /*固定ページ別*/ /**ショップ＆レストラン**/ .food-shop .pageContentArea .wp-block-columns { gap: 100px; } .food-shop .pageContentArea .overlapArea { position: relative; display: block; } .food-shop .pageContentArea .overlapArea img { display: block; width: 100%; height: auto; } .food-shop .pageContentArea .overlapArea .wp-block-group { display: block; width: 100%; height: auto; background: rgba(11,123,146,0.5); /*mix-blend-mode: multiply;*/ padding: 20px 0; position: absolute; left: 0; bottom: 0; text-align: center; } .food-shop .pageContentArea .overlapArea h4 { display: inline-block; text-align: center; color: #fff; font-size: 2.0rem; font-weight: 500; position: relative; padding: 10px 80px; } .food-shop .pageContentArea .overlapArea h4::before { content: ''; width: 20px; height: 100%; position: absolute; top: 0; left: 0; background: url(assets/images/shop-midashi3L.svg) no-repeat; } .food-shop .pageContentArea .overlapArea h4::after { content: ''; width: 20px; height: 100%; position: absolute; top: 0; right: 0; background: url(assets/images/shop-midashi3R.svg) no-repeat; } @media only screen and (max-width:768px){ .food-shop .pageContentArea .wp-block-columns { gap: 30px; } .food-shop .pageContentArea .overlapArea .wp-block-group {padding: 10px; position: absolute; left: 0; bottom: 0; text-align: center; } .food-shop .pageContentArea .overlapArea h4 { font-size: 1.6rem; padding: 10px 30px; } } /*リーベ*/ .restantNameContentWrap { display: block; position: relative; width: 100%; height: auto; } .restantNameContentWrap .bgBlue { width: 360px; height: auto; display: block; position: absolute; top: 0; left: 0; } .restantNameContentWrap figure { width: 88%; margin-left: 12%; padding-top: 120px; } .restantNameContentWrap .midashi3w { font-size: 1.6rem; padding: 10px 50px; } @media only screen and (max-width:768px){ .restantNameContentWrap .bgBlue { width: 100%; height: auto; display: block; position: relative; top: auto; left: auto; padding: 10px!important; } .restantNameContentWrap .bgBlue p { text-align: center; } .restantNameContentWrap figure { width: 100%; margin-left: auto; padding-top: 0; } } .restantMenuContentWrap { display: block; position: relative; width: 100%; height: auto; margin: 80px auto; } .restantMenuContentWrap figure img { width: 100%; } .restantMenuContentWrap .menuTextBox { border: solid 2px #0b7b8f; background: rgba(255,255,255,0.8); padding:80px 20px; width: 380px; position: absolute; bottom: 0; } .restantMenuContentWrap .menuTextBox .midashi { display: block; font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; border-bottom: solid 2px #0b7b8f; padding-bottom: 20px; } .restantMenuContentWrap .menuTextBox .price { display: block; color: #0b7b8f; } .restantMenuContentWrap .menuFigText { width: calc( 100% - 400px ); padding: 20px; } @media only screen and (max-width:768px){ .restantMenuContentWrap { margin: 20px auto; } .restantMenuContentWrap .menuTextBox { padding: 20px; width: 100%; position: relative; bottom: auto; } .restantMenuContentWrap .menuFigText { width: 100%; padding: 20px; } } .restantMenuContentWrap.right .menuTextBox { left: 0; } .restantMenuContentWrap.right figure { padding-left: 12%; } .restantMenuContentWrap.right .menuFigText { margin-left: 400px; } .restantMenuContentWrap.left .menuTextBox { right: 0; } .restantMenuContentWrap.left figure { padding-right: 12%; } .restantMenuContentWrap.left .menuFigText { margin-right: 400px; } @media only screen and (max-width:768px){ .restantMenuContentWrap.right .menuTextBox { left: auto; margin-top: 10px; } .restantMenuContentWrap.right figure { padding-left: 0; } .restantMenuContentWrap.right .menuFigText { margin-left: 0; } .restantMenuContentWrap.left .menuTextBox { right: auto; } .restantMenuContentWrap.left figure { padding-right: 0; } .restantMenuContentWrap.left .menuFigText { margin-right: 0; } } /*ペンギンぱふぇ用*/ .restantMenuContentWrap2 { display: block; position: relative; width: 100%; height: auto; margin: 200px auto 80px; } .restantMenuContentWrap2 figure img { width: 100%; } .restantMenuContentWrap2 .menuTextBox { border: solid 2px #0b7b8f; background: rgba(255,255,255,0.8); padding:80px 20px; width: 380px; position: absolute; top: -100px; left: 400px; } .restantMenuContentWrap2 .menuTextBox .midashi { display: block; font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; border-bottom: solid 2px #0b7b8f; padding-bottom: 20px; } .restantMenuContentWrap2 .menuTextBox .price { display: block; color: #0b7b8f; } .restantMenuContentWrap2 .menuFigText { padding: 200px 20px 20px 20px; } /*団体レストラン*/ .group-restaurants .pageContentArea h3::after { display: none; } .group-restaurants .restantNameContentWrap .bgBlue { width: 430px; top: auto; bottom: 0; } .group-restaurants .restantNameContentWrap figure { display: flex; justify-content: flex-end; padding-top: 0; padding-bottom: 120px; } .group-restaurants .restantMenuContentWrap { margin: 150px auto; } .group-restaurants .menuTextBox { width: 500px; top: -50px; bottom: auto; padding:50px 20px; } .group-restaurants .restantMenuContentWrap.right .menuTextBox { right: 0; left: auto; } .group-restaurants .restantMenuContentWrap.left .menuTextBox { left: 0; right: auto; } @media only screen and (max-width:768px){ .group-restaurants .restantNameContentWrap .bgBlue { width: 100%; top: auto; bottom: auto; } .group-restaurants .restantNameContentWrap .bgBlue p.fs22 { font-size: 1.6rem; } .group-restaurants .restantNameContentWrap figure { padding-bottom: 20px; } .group-restaurants .restantMenuContentWrap { margin: 30px auto; } .group-restaurants .menuTextBox { width: 100%; top: auto; bottom: auto; padding:20px; } .group-restaurants .wp-container-core-columns-is-layout-2 { flex-direction: column-reverse; } .group-restaurants .wp-container-core-columns-is-layout-4 { flex-direction: column-reverse; } } /*団体旅行教育*/ .schooltrip .pageContentArea .wp-block-columns { gap: 40px; } .schooltrip .boardArea { gap: 20px!important; } .schooltrip .w100vw p { width: 1000px; margin: 0 auto; } .workBlock { gap: 20px!important; } .workTitle { display: inline-block; border: solid 2px #0b7b8f; border-radius: 5px; padding: 5px 30px; position: relative; } .workTitle::before { content: ''; width: 10px; height: 30px; position: absolute; top:16%; left: -2%; background: url(assets/images/workTitleLeft.svg) no-repeat; } .workTitle::after { content: ''; width: 30px; height: 30px; position: absolute; bottom:-5%; right: -5%; background: url(assets/images/icon-pen.svg) no-repeat; } .workLinkArea { gap: 20px!important; } .workLink { border-bottom: solid 3px #1eccef; position: relative; } .workLink a { padding-left: 30px; } .workLink a:hover { opacity: 0.8; } .workLink::before { content: ''; width: 28px; height: 28px; position: absolute; background: url(assets/images/workLinkBtn.svg) no-repeat; } @media only screen and (max-width:768px){ .schooltrip .pageContentArea .wp-block-columns { gap: 30px; } .schooltrip .w100vw p { width: 100%; } .workTitle { margin-top: 20px; } .schooltrip .wp-container-core-columns-is-layout-18 img { width: 100%!important; height: auto; } .schooltrip .wp-container-core-columns-is-layout-21 img { width: 100%!important; height: auto; } .schooltrip .wp-block-group:has(.ribonBlue2) { display: block; } .schooltrip .feetable tbody tr:nth-of-type(1) { display: none; } .schooltrip .feetable tbody td { width: 100%; display: block; border: none; position: relative; text-align: right; } .schooltrip .feetable tbody tr td:nth-of-type(1) { background: #0b7b92; margin: 2rem auto 0.7rem; padding: 0.7rem; color: #fff; text-align: center; } .schooltrip .feetable tbody td::before { content: attr(data-label); display: block; font-size: 1.3rem; color: #0b7b8f; position: absolute; top: 1.5rem; left: 0.5rem; } .schooltrip .bentoTable tbody tr:nth-of-type(1) { display: none; } .schooltrip .bentoTable tbody td { width: 100%; display: block; border: none; position: relative; text-align: right; } .schooltrip .bentoTable tbody tr td:nth-of-type(1) { background: #0b7b92; margin: 2rem auto 0.7rem; padding: 0.7rem; color: #fff; text-align: center; } .schooltrip .bentoTable tbody td::before { content: attr(data-label); display: block; font-size: 1.3rem; color: #0b7b8f; position: absolute; top: 1.5rem; left: 0.5rem; } } /*ニクス城*/ .castlePageNavi { gap: 0; } .castlePageNavi div { width: calc(100% / 4); height: 500px; } .castlePageNavi div p { width: 100%; height: 100%; } .castlePageNavi div p a { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; color: #fff; font-size: 1.6rem; font-weight: 500; text-align: center; text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.6); } .castlePageNavi div p a:hover { opacity: 0.7; } .castlePageNavi div:nth-of-type(1) a { background: url(assets/images/castle001.jpg) no-repeat; } .castlePageNavi div:nth-of-type(2) a { background: url(assets/images/castle002.jpg) no-repeat; } .castlePageNavi div:nth-of-type(3) a { background: url(assets/images/castle003.jpg) no-repeat; } .castlePageNavi div:nth-of-type(4) a { background: url(assets/images/castle004.jpg) no-repeat; } @media only screen and (max-width:768px){ .castlePageNavi div { height: 250px; } } .castle .restantNameContentWrap .bgBlue { width: 300px; text-align: center; } .placeWrap { position: relative; } .placeWrap figure:nth-of-type(1) { width: 90%; } .placeWrap figure:nth-of-type(2) { width: 30%; position: absolute; bottom: 0; } .placeWrap figcaption { font-size: 1.4rem; text-align: center; } .placeWrap.left { padding-right: 10%;} .placeWrap.left figure:nth-of-type(2) { right: 0; } .placeWrap.left h4 { padding-right: calc( 100% - 650px); } .placeWrap.left p { padding-right: calc( 100% - 650px); } .placeWrap.right { padding-left: 10%;} .placeWrap.right figure:nth-of-type(2) { left: 0; } .placeWrap.right h4 { padding-left: calc( 100% - 650px); } .placeWrap.right p { padding-left: calc( 100% - 650px); } .fureai.placeWrap h4 { padding-left: 0; } .fureai.placeWrap p { padding-left: 0; } .placeWrap h5 { -webkit-text-fill-color: white; -webkit-text-stroke: 3px #0b7b8f; font-size: 12rem; font-weight: 100; position: absolute; top: -0; left: 0; } .placeWrap h5::first-letter { font-size: 13.0rem; } @media only screen and (max-width:768px){ .castle .restantNameContentWrap { margin-top: 30px; } .castle .restantNameContentWrap .bgBlue { width: 100%; } .placeWrap h5 { font-size: 8rem; } .placeWrap h5::first-letter { font-size: 10.0rem; } .placeWrap.left { padding-right: 0;} .placeWrap.right { padding-left: 0;} .placeWrap.left h4.mt40 { margin-top: 10px!important; } .placeWrap.right h4.mt40 { margin-top: 10px!important; } .placeWrap figure:nth-of-type(1) { width: 100%; } .placeWrap figure:nth-of-type(2) { width: 100%; position: relative; bottom: auto; margin: 10px auto; } } .cs01 { background: url(assets/images/castleBg01.png) no-repeat; } .cs02 { background: url(assets/images/castleBg02.png) no-repeat; } .cs03 { background: url(assets/images/castleBg03.png) no-repeat; } .cs04 { background: url(assets/images/castleBg04.png) no-repeat; } .cs05 { background: url(assets/images/castleBg05.png) no-repeat; } .cs06 { background: url(assets/images/castleBg06.png) no-repeat; } .cs07 { background: url(assets/images/castleBg07.png) no-repeat; } .cs08 { background: url(assets/images/castleBg08.png) no-repeat; } .cs09 { background: url(assets/images/castleBg09.png) no-repeat; } .cs10 { background: url(assets/images/castleBg10.png) no-repeat; } .cs11 { background: url(assets/images/castleBg11.png) no-repeat; } /*陸族感*/ .amphibians .abItem01 { width: 140px; position: absolute; bottom: -20px; right: 100px; } .amphibians .abItem02 { width: 175px; height: 155px; background: url(assets/images/rizoku002.svg) no-repeat; position: absolute; bottom: -50px; right: 0px; display: flex; justify-content: center; align-items: center; } .amphibians .abItem03 { width: 175px; height: 155px; background: url(assets/images/rizoku002.svg) no-repeat; position: absolute; bottom: -10px; right: -160px; display: flex; justify-content: center; align-items: center; } .amphibians .abItem04 { width: 220px; height: auto; position: absolute; right: 50px; bottom: 0; } .abItem05 figcaption { width: 175px; height: 155px; background: url(assets/images/rizoku002.svg) no-repeat; position: absolute; top: -50px; right: 60px; padding: 60px 20px 40px 40px; font-size: 1.6rem; font-weight: 500; color:#0b7b8f; } .amphibians .abItem06 { width: 123px; height: 121px; background: url(assets/images/rizoku003.svg) no-repeat; position: absolute; top: 10px; left: 0px; display: flex; justify-content: center; align-items: center; } .amphibians .w100vw { background: url( assets/images/kokoumi-header.jpg ) no-repeat center center; background-size: cover; height: 240px; padding-top: 5rem; } .amphibians .w100vw h2 { width: 1000px; margin: 0 auto; font-size: 4.0rem; letter-spacing: 1.5rem; text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.6); margin-bottom: 2rem; } .amphibians .w100vw p { font-size: 2.0rem; font-weight: 500; font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.6); } @media only screen and (max-width:768px){ .amphibians .w100vw { height: 280px; } .amphibians .w100vw div { width: 95%!important; } .amphibians .w100vw h2 { width: 100%; font-size: 2.0rem; letter-spacing: 1.2rem; } .amphibians .w100vw p { font-size: 1.4rem; } .amphibians .abItem01 { position: relative; width: 50%; bottom: auto; right: auto; display: block; margin: 20px auto; } .amphibians .abItem02 { bottom: auto; top: -85px; right: 0px; } .amphibians .abItem03 { bottom: auto; top: 180px; right: 0px; } .abItem05 figcaption { top: auto; bottom: -130px; right: -10px; } .amphibians .wp-container-core-columns-is-layout-3 { flex-direction: column-reverse; } .amphibians .wp-container-core-columns-is-layout-5 { gap: 80px; } .amphibians .wp-block-columns + .wp-block-spacer { height: 80px!important; } } /*遊園地ニクスランド*/ .nixe-land .borderBlue { border-radius: 0; } .nixe-land .abItem001 { position: absolute; bottom: 0; right: -150px; width: 150px; } .nixe-land .boardBlue strong { font-size: 2.2rem; font-weight: 400; } .nixe-land .atName .wp-block-media-text__content { border-bottom: dotted 3px #0b7b8f; padding-bottom: 0.7rem; } @media only screen and (max-width:768px){ .nixe-land .wp-image-664 { width: 30%; display: block; margin: 0 auto; } .nixe-land .wp-image-659 { width: 80px; } .nixe-land .abItem001 { position:relative; bottom: auto; right: auto; width: 150px; margin: 1rem auto; } } /*裏方ツアーtest*/ .backyard .w100vw ul { width: 1000px; margin: 0 auto; } .backyard .w100vw p { width: 1000px; margin: 0 auto; } .backyard .pageContentArea .btn a { padding: 10px 50px; } .backyard .eventCalArea { margin: 3rem auto; } .backyard .eventCalArea table { border: none; border-collapse: collapse; width: 100%; } .backyard .eventCalArea table thead,.backyard .eventCalArea table tbody { width: 100%; } .backyard .eventCalArea table thead th { border: none; border-bottom: solid 1px #0b7b92; text-align: center; color: #0b7b8f; font-weight: 400; } .backyard .eventCalArea .calHeader { display: flex; justify-content: center; align-items: center; gap: 50px; margin-bottom: 2rem; } .backyard .eventCalArea .calHeader button { font-size: 3.0rem; font-weight: 500; color: #0b7b8f; cursor: pointer; } .backyard .eventCalArea .calHeader h4 { text-align: center; font-size: 2.2rem; font-weight: 500; color: #0b7b8f; } .backyard .pageContentArea h5 { display: block; font-size: 3.6rem; font-weight: 500; color: #0b7b92; } /*方式変更差分 20250401*/ .backyard .eventCalArea table td { background: #f5f5f5; width: 150px; height: 130px; position: relative; border: none; }/*カレンダーの範囲外*/ .backyard .eventCalArea table td.disp_out { background: #ccc; border: solid 1px #0b7b92; }/*過ぎたもの＝受付終了*/ .backyard .eventCalArea table td.disp_out p:nth-child(n+2) { display: none; } .backyard .eventCalArea table td.disp_out p:nth-of-type(1) { color:#678c94; } .backyard .eventCalArea table td.disp_out p:nth-of-type(1)::after { content: '不再接受'; width: 100%; position: absolute; left: 0; top: 45%; font-size: 1.4rem; font-weight: 500; color: #999; text-align: center; } .backyard .eventCalArea table td.disp_on { background: #fff; border: solid 1px #0b7b8f; }/*受付中*/ .backyard .eventCalArea table td.disp_on p:nth-of-type(1) { font-size: 1.8rem; margin-bottom: 0.7rem; color: #0b7b8f; } .backyard .eventCalArea table td.disp_on p:nth-of-type(1)::after { content: none; } .backyard .eventCalArea table td.disp_on p:nth-child(n+2) { font-size: 1.2rem; margin-bottom: 0.7rem; display: flex; justify-content: space-between; color: #0b7b8f; } .backyard .eventCalArea table td.disp_on p span.kuu { color: #0b7b8f; } .backyard .eventCalArea table td.disp_on p span.man { color: #CC0000; } .backyard .eventCalArea table td.disp_end { background: #ccc; border: solid 1px #0b7b8f; }/*受付期間外*/ .backyard .eventCalArea table td.disp_end p:nth-child(n+2) { display: none; } .backyard .eventCalArea table td.disp_end p:nth-of-type(1) { color: #678c94; } .backyard .eventCalArea table td.disp_end p:nth-of-type(1)::after { content: '接待期外'; width: 100%; position: absolute; left: 0; top: 45%; font-size: 1.4rem; font-weight: 500; color: #999; text-align: center; } @media only screen and (max-width:768px){ .backyard .w100vw ul { width: 100%; padding: 2rem; } .backyard .w100vw p { width: 100%; padding: 2rem; } .backyard .eventCalArea table td { display: block; width: 100%; height: auto; border: none; border-bottom: solid 1px #0b7b8f; padding: 1rem; position: relative; } .backyard .eventCalArea table thead { display: none; } .backyard .eventCalArea table td[data-label=""],.backyard .eventCalArea table td:not([data-label]) { display: none; } .backyard .eventCalArea table td::after { content: attr(data-label); display: block; font-size: 1.6rem; color: #0b7b8f; position: absolute; top: 1.2rem; left: 3rem; } .backyard .eventCalArea table td p:nth-child(n+2) { font-size: 1.6rem; } .backyard .eventCalArea table td.disp_out { border: none; border-bottom: solid 1px #0b7b92; display: none; }/*過ぎたもの＝受付終了*/ .backyard .eventCalArea table td.disp_on { border: none; border-bottom: solid 1px #0b7b8f; }/*受付中*/ .backyard .eventCalArea table td.disp_end { border: none; border-bottom: solid 1px #0b7b8f; }/*受付期間外*/ .backyard .pageContentArea h5 { font-size: 2.4rem; } } /*よくある質問*/ .faq .qandaWrap h4 { font-size: 2.0rem; font-weight: 500; color: #0b7b8f; padding: 1.5rem 0 1.5rem 8rem; background: url(assets/images/qandaQ.svg) no-repeat left center; border-bottom: dotted 3px #0b7b8f; margin-bottom: 20px; position: relative; } .faq .qandaWrap h4::before { content: ''; width: 50px; height: 5px; background: #fff; position: absolute; left: 0; bottom: -5px; } .faq .qandaWrap .aWrap { background: url(assets/images/qandaA.svg) no-repeat left top; background-size: 30px; margin: 20px 0 20px 80px; padding: 0 0 20px 50px; } .faq .qandaWrap .aWrap p a { text-decoration: underline; color: #CC0000; } @media only screen and (max-width:768px){ .faq .qandaWrap h4 { font-size: 1.6rem; padding: 1.5rem 0 1.5rem 6rem; background-size: 50px; } .faq .qandaWrap .aWrap { margin: 20px 0 20px 0; padding: 0 0 20px 40px; } } /*アトラクション*/ .attractionPlaceImageArea { position: relative; } .attractionPlaceImageArea p { position: absolute; top: 20px; left: 50px; -webkit-text-fill-color: white; -webkit-text-stroke: 3px #0b7b8f; font-size: 12rem; font-weight: 100; } .attractionPlaceImageArea h4 { position: absolute; bottom: 0; left: 25%; background: url(assets/images/attraction_titleBG01.png) no-repeat center center; width: 600px; height: 70px; font-size: 2.6rem; font-weight: 500; text-align: center; color: #0b7b8f; padding-top: 1rem; } .attraction table { margin: 1rem auto; width: 100%; } .attraction table td { font-size: 1.4rem; color: #0b7b92; font-weight: 500; text-align: center; border: solid 1px #666; } @media only screen and (max-width:768px){ .inpageAncherAea { display: none!important; } .inpageAncherAea + .wp-block-spacer { display: none; } .attractionPlaceImageArea p { top: -50px; left: 0; font-size: 10rem; -webkit-text-stroke: 1.5px #0b7b8f; } .attractionPlaceImageArea h4 { position: absolute; bottom: -30px; left: 0%; width: 100%; height: 70px; font-size: 1.6rem; background-size: contain; padding-top: 2rem; } } /*ご利用案内*/ .teburaFigArea div:nth-of-type(1) p { padding:1.4rem; border: solid 1px #0b7b8f; border-left: solid 6px #0b7b8f; align-items: center; } .teburaFigArea div:nth-of-type(2) p { padding:1.4rem; } .guide .w100vw .caution { border-right: solid 1px #cc0000; } .guide .w100vw .caution img { display: block; margin: 0 auto; } .guide .wp-container-core-columns-is-layout-13 table tr td:nth-of-type(1) { width: 40%; } .guide .wp-container-core-columns-is-layout-13 table tr td:nth-of-type(2) { width: 30%; } .guide .wp-container-core-columns-is-layout-13 table tr td:nth-of-type(3) { width: 30%; } .guide .flatBtn a { width: 30%; margin: 1rem auto; } @media only screen and (max-width:768px){ .guide .w100vw .caution { border-right: none; border-bottom: solid 1px #cc0000; padding-bottom:1rem; } .guide .feetable tbody tr:nth-of-type(1) { display: none; } .guide .feetable tbody td { width: 100%; display: block; border: none; position: relative; text-align: right; } .guide .feetable tbody tr td:nth-of-type(1) { background: #0b7b92; margin: 2rem auto 0.7rem; padding: 0.7rem; color: #fff; text-align: center; } .guide .feetable tbody td::before { content: attr(data-label); display: block; font-size: 1.3rem; color: #0b7b8f; position: absolute; top: 1.5rem; left: 0.5rem; } .guide .flatBtn a { width: 90%; margin: 1rem auto; } } /*Access*/ .access .car::before { content: ''; width: 40px; height: 30px; background: url(assets/images/top-icon002.png) no-repeat; background-size: cover; position: absolute; bottom: auto; left: 40%; z-index: 2; } .access .jr { padding: 0.7rem 4rem 0.7rem 7rem; background: url(assets/images/icon-jr.png) no-repeat 10% center; } .access .bus { padding: 0.7rem 4rem 0.7rem 7rem; background: url(assets/images/icon-bus.png) no-repeat 10% center; } .access iframe { width: 480px; height: 400px; } @media only screen and (max-width:768px){ .access .iframe { width: 100%!important; } .access h4 { font-size: 1.6rem; font-weight: 500; color: #0b7b8f; margin: 2rem 0 0.7rem; } .access h5 { font-size: 1.6rem; font-weight: 500; color: #fff; background: #0b7b8f; padding: 0.7rem; display: inline-block; margin: 2rem 0 0.7rem; } .access h6 { font-size: 1.6rem; font-weight: 500; color: #0b7b8f; margin: 2rem 0 0.7rem; } .access .car::before { display: none; } .access .car { background: url(assets/images/top-icon002.png) no-repeat 10% center; background-size: 30px; padding-left: 60px; } .access .jr { background: url(assets/images/icon-jr.png) no-repeat 10% center; background-size: 30px; padding-left: 60px; } .access .bus { background: url(assets/images/icon-bus.png) no-repeat 10% center; background-size: 30px; padding-left: 60px; } .access iframe { width: 300px; height: 400px; } } /*会社概要*/ .companyTable { width: 80%; margin: 0 auto 20px; align-items: flex-start; } .companyTable div { padding: 0.7rem 1.4rem; } .companyTable div .midashi3 { display: block!important; } .companyTable div:nth-of-type(2) p { display: flex; align-items: center; padding-top: 0.7rem; } @media only screen and (max-width:768px){ .companyTable { gap: 0; } .companyTable div .midashi3 { font-size: 1.6rem; margin-top: 2rem; } .companyTable div:nth-of-type(2) p { text-align: center; } } /** アトラクションテーブル **/ .homeAttractionScArea { padding: 0 0 4rem;} .homeAttractionScArea .midashi2 .btn a { display: inline; } .AttrTable { border: none; display: block; width: 100%; border-collapse: collapse; } .AttrTable thead td { height: 60px; border: none; position: relative; } .AttrTable thead td:nth-child(n+2) { width: 50px; } .AttrTable thead tr td:nth-child(even){ border-left: solid 2px #0b7b92; } .AttrTable thead td span { position: absolute; background: #fff; top: 0; left: -22px; } .AttrTable tbody td { height: 60px; border: none; position: relative; } .AttrTable tbody td img { max-height: 50px; } .AttrTable tbody td span.time { position: absolute; top: -4px; left: 5px; z-index: 3; min-width: 60px; font-size: 1.2rem; font-weight: 500; display: inline-block; margin-left: 20px; padding: 0.5rem; border: 2px solid #0b7b92; color: #0b7b92; background: #fff; } .AttrTable.maintenance span.time { min-width: 200px; top: 4px; } .AttrTable tbody td span.time::before { content: ""; position: absolute; top: 30%; left: 0; border-style: solid; border-width: 7.5px 10px 7.5px 0; border-color: transparent #0b7b92 transparent transparent; translate: -100% -50%; } .AttrTable tbody td span.time:after { content: ""; position: absolute; top: 30%; left: 0; border-style: solid; border-width: 5px 6.7px 5px 0; border-color: transparent #ffffff transparent transparent; translate: -100% -50%; } .AttrTable tbody tr td:nth-child(odd){ background: #eee; } .AttrTable tbody tr td:nth-of-type(1) { border: solid 2px #0b7b92; padding: 1rem; color: #0b7b92; font-size: 1.4rem; font-weight: 600; background: #fff; } .AttrTable tbody td:nth-child(n+2) { border-top: solid 2px #0b7b92; border-bottom: solid 2px #0b7b92; } .AttrTable tbody td .active { width: 100%; height: 70%; display: block; background: #56a3b3; position: absolute; z-index: 2; } .AttrTable tbody td .wm10 { width: 18px; } .AttrTable tbody td .wm15 { width: 25px; } .AttrTable tbody td .wm20 { width: 30px; } .AttrTable tbody td .wm15 span.time { left: 10px; } .AttrTable tbody td .wm20 span.time { left: 15px; } .AttrTable tbody td .pos_00 { top:10px; left: 0; } .AttrTable tbody td .pos_m05 { top: 10px; left: -5px; } .AttrTable tbody td .pos_p10 { top: 10px; left: 20px; } .AttrTable tbody td .pos_p15 { top: 10px; left: 30px; } .AttrTable tbody td .pos_p20 { top: 10px; left: 40px; } .AttrTable caption { font-size: 1.6rem; font-weight: 600; color: #000; text-align: left; } .AttrTable tr td:nth-of-type(1) { width: 250px; } .AttrTable .sealion td:nth-of-type(1) { background: url(assets/images/top-icon102.png) no-repeat right center; background-size: 50px; } .AttrTable .trueseal td:nth-of-type(1) { background: url(assets/images/top-icon105.png) no-repeat right center; background-size: 50px; } .AttrTable .penguin td:nth-of-type(1) { background: url(assets/images/top-icon103.png) no-repeat right center; background-size: 20px; } .AttrTable .sardine td:nth-of-type(1) { background: url(assets/images/top-icon104.png) no-repeat right center; background-size: 80px; } .AttrTable .dolphin td:nth-of-type(1) { background: url(assets/images/top-icon101.png) no-repeat right center; background-size: 50px; } .date_range { font-size: 1.6rem; font-weight: 500; color: #333; margin: 1rem auto; } .AttrTable + .eventTextArea { width: 100%; border: solid 2px #0b7b8f; margin: 2rem auto; display: flex; justify-content: space-between; flex-wrap: wrap; } .AttrTable + .eventTextArea div:nth-of-type(1) { width: 22%; padding: 1rem; } .AttrTable + .eventTextArea div:nth-of-type(1) h4 { width: 100%; font-size: 1.4rem; font-weight: 500; color: #0b7b92; background: url(assets/images/top-icon106.png) no-repeat right center; background-size: 50px; padding-right: 50px; } .AttrTable + .eventTextArea div:nth-of-type(2) { width: calc(100% - 22% ); padding: 1rem; border-left: solid 2px #0b7b92; } .AttrTable + .eventTextArea div:nth-of-type(2) p { color: #0b7b8f; font-size: 1.6rem; line-height: 1.6; font-weight: 500; } @media only screen and (max-width:768px){ .AttrTable + .eventTextArea { width: 100%; border: none; } .AttrTable + .eventTextArea div:nth-of-type(1) { width: 100%; } .AttrTable + .eventTextArea div:nth-of-type(2) { width: 100%; border-top: solid 2px #0b7b92; border-left: none; } } @media only screen and (max-width:768px){ .homeAttractionScArea .midashi2 img { width: 30px; max-height: 80px; } .homeAttractionScArea .midashi2 .btn { display: block; margin: 0.7rem auto; width: 60%; } .homeAttractionScArea .midashi2 .btn a { display: block; margin: 0.7rem auto; } .AttrTable tbody { width: 100%; display: block; } .AttrTable tr { width: 100%; display: block; } .AttrTable td { width: 100%; display: block; } /*.AttrTable tr:nth-of-type(1) { display: none; }*/ .AttrTable tr td { display: block; width: 100%; } .AttrTable tr td:nth-of-type(1) img { max-width: 50px; max-height: 50px; } .AttrTable tr td:nth-child(n+2) { display: none; } .AttrTable tr td:has(span.active) { display: block; } .AttrTable thead td { height: auto; } .AttrTable thead tr td:nth-child(even){ border-left: none; } .AttrTable tbody tr td:nth-of-type(1) { border: none; border-bottom: solid 1px #0b7b92; width: 100%; margin-top: 2rem; } .AttrTable tbody td:nth-child(n+2) { border-top: none; border-bottom: dashed 1px #0b7b92; } .AttrTable tbody td .active { background: inherit; } .AttrTable tbody td span.time { width: 280px; } .AttrTable tbody td .wm15 span.time { left: 0; } .AttrTable tbody td .wm20 span.time { left: 0; } .AttrTable tbody td .pos_00 { left: 0; } .AttrTable tbody td .pos_m05 { left: 0; } .AttrTable tbody td .pos_p10 { left: 0; } .AttrTable tbody td .pos_p15 { left: 0; } .AttrTable tbody td .pos_p20 { left: 0; } .AttrTable caption { display: block; } } .attractionschedule article { margin: 2rem auto; padding: 2rem 0; } .attractionschedule article h4 { font-size: 1.6rem; margin-bottom: 3rem; color:#0b7b8f; } .attractionschedule article h4 span { padding: 0.7rem 1.4rem; background: #f5f5f5; border-radius: 20px; margin-right: 15px; } @media only screen and (max-width:768px){ .attractionschedule article h4 { display: flex; flex-wrap: wrap; } .attractionschedule article h4 span { font-size: 1.4rem; margin: 0.7rem; } } /*クイズ*/ .quizzes { background: url(https://nixe-aqua.com/wp01/wp-content/uploads/2024/04/piilo_bg.png) left top; background-size: auto; background-attachment: fixed; }