/*
CSS の基本方針
●ブラウザのレンダリングに関わる処理を、できる限り効率化するために、以下の順番で記述していきます。
1.
2.
●表示スピードの高速化のための工夫
・CSS ファイルから、外部ファイルを読み込まないようにします。
・Google フォントなど外部フォントは使用せず、ブラウザのデフォルトフォントのみを使用します。
・FontAwesome など外部アイコンファイルパッケージは使用せず、必要な場合は html ファイルから個別に SVG ファイルを読み込みます。
・この CSS ファイルは、CSS ファイルの読み込み時間を 0 にし、html ファイルのダウンロード時間も短くするために、
php から呼び出され、minimize 処理された上で、html ファイルのインラインとして処理されます。
・CSS のセレクタはパフォーマンスに影響を与えます。
CSS のセレクタは、HTML ドキュメントの要素とマッチング処理を何回も行うため、
効率的にマッチングできるセレクタの方がパフォーマンス的に有利になるからです。
CSS のセレクタは、一般的に以下の順番でパフォーマンスが良いとされています。
1.ID (#hoge)
2.Class (.hoge)
3.Tag (div)
4.Adjacent sibling (h2 + p)
5.Child (li > ul)
6.Descendant (ul li)
7.Universal (*)
8.Attribute ([type="text"])
9.Pseudo-classes (a:hover)
セレクタは組み合わせた複合的な指定が可能ですが、
複雑な指定ほどマッチング処理に時間がかかり、パフォーマンスに悪影響を与えます。
CSS セレクタの最適化を行うには ID や Class を使ってシンプルに定義します。
但し、最適化を行っても 50ms ほどの改善しか見込まれないようなので、整備性と合わせて考慮します。
・ブラウザがレンダリングを計算する際、例えば DOM 要素 50個、CSSOM 要素 50個あったとき、
50 x 50 = 250 回の総当たりで DOM と CSSOM のツリー構造をするため、以下のことに注意します。
・DOM の階層を出来るだけ浅くしてあげます。(html タグの階層を、出来るだけ浅くしてあげます。)
・CSS セレクタの数を、最小限にしてあげます。
・CSS セレクタの階層を、できるだけ浅くしてあげます。
●minimize 処理されるので、人間が読みやすいように、スペース・改行・コメント・セレクタの最後の宣言の「;」を
積極的に利用していきます。
●html ファイルによっては、使われない CSS プロパティも出てきますが、利便性とメンテナンス性向上のため、
１つのサイトで１つの CSS ファイルを使っていきます。
その範囲内で、Chrome のデベロッパーツール の Coverage 機能を使って、不要な CSS プロパティは削除します。
▶︎後日、１つの html ファイルにつき１つの CSS ファイルをワンセットにして、html ファイル読み込み時間の最小化を狙う仕組みを導入予定です。
CSS の設計について
●OOCSS モデルで、記述していきます。
ex)
--- html ---
Title Red
Title Blue
Title White
--- CSS ---
h2{ font-size: 16px; }
.h2_r{ font-color: red; }
.h2_b{ font-color: blue; }
.h2_w{ font-color: white; }
--- html ---
--- CSS ---
.box{
width: 50px;
height: 50px;
}
.box-black{
border: 1px solid #333;
background-color: black;
}
.box-white{
border: 1px solid #ccc;
background-color: white;
}
レイアウトシステムについて
・Bootstrap 5.0.0-beta1 ののグリッドシステムをベースに、必要な部分を抜粋して使用しています。
*/
:root {
--breakpoint-xs: 0;
--breakpoint-sm: 576px;
--breakpoint-md: 768px;
--breakpoint-lg: 992px;
--breakpoint-xl: 1200px
}
@font-face {
font-family: "myfont"; /*任意のフォントファミリー名でOK*/
src: url("../font/ZenjidoJP-FeltPenLMT-TTF.ttf") format("truetype"); /*fontがあるパスを書いて、formatを指定*/
font-display: swap; /*ダウンロード状況に応じてフォントの表示を変える
(「swap」はWebフォントが読み込まれるまでフォールバックフォントで表示し、読み込まれた時点で置き換えます。)*/
}
.ttl{
font-family: "myfont",sans-serif; /*上で設定したフォントファミリー名*/
}
/* グローバル系 */
body {
/* font-family: 'Noto Serif JP', "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; */
font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
line-height: 1.6;
color: #161c2d;
font-size: 1rem;
font-weight: 400;
scroll-behavior: smooth;
margin: 0;
}
@media (max-width: 320px) {
body {
line-height: 1.2
}
}
@media (max-width: 575px) {
aside {
display: none;
}
}
*, ::after, ::before {
box-sizing: border-box
}
a, p {
font-size: 16px
}
.text-light {
color: #F9FBFD
}
a {
color:#107cec;
}
p {
margin-top: 0;
margin-bottom: 1rem
}
@media (max-width: 375px){
.font-size-10px-375 a {
font-size: 10px;
}
}
/* アンカー系 */
.block-anchor {
text-decoration: none;
display: block
}
/* フォント系 */
.font-mincho {
font-family: 'Noto Serif JP', "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
.font-gothic {
font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.font-mplusrounded {
font-family: 'M PLUS Rounded 1c', sans-serif;
}
.font-tsukuardgothic-bold {
font-family: FOT-TsukuARdGothic Std, sans-serif;
font-style: normal;
font-weight: 700;
}
h1.title {
font-size: 24px;
font-weight: bold
}
h2.title {
font-size: 21px;
font-weight: bold
}
h3.title {
font-size: 16px;
font-weight: bold
}
p.title {
font-size: 16px;
font-weight: bold
}
.font-size-8px {
font-size: 8px
}
.font-size-16px {
font-size: 16px
}
.font-size-18px {
font-size: 18px
}
.font-size-21px, .font-size-subtitle {
font-size: 21px
}
.font-size-24px {
font-size: 24px
}
.font-size-30px {
font-size: 30px;
}
.font-size-32px {
font-size: 32px
}
.font-size-40px {
font-size: 40px
}
.font-size-6vw {
font-size: 6vw;
}
.letter-spacing-1 {
letter-spacing: .5rem;
text-indent: .5rem;
}
@media (max-width: 320px) {
h1.title {
font-size: 16px
}
h2.title {
font-size: 16px
}
p.title {
font-size: 16px
}
.font-size-21px {
font-size: 16px
}
.font-size-32px {
font-size: 16px
}
.font-size-40px {
font-size: 16px
}
}
@media (max-width: 576px) {
.font-size-21px {
font-size: 18px
}
.font-size-24px {
font-size: 19px;
}
.font-size-30px {
font-size: 20px;
}
.font-size-32px {
font-size: 20px;
}
.font-size-40px {
font-size: 34px;
}
.font-size-3vw {
font-size: 5vw;
}
.font-size-4vw {
font-size: 7vw
}
.font-size-8vw {
font-size: 8vw
}
.font-size-subtitle {
font-size: 16px
}
}
@media (min-width: 576px) {
.font-size-3vw {
font-size: 2.9vw;
}
.font-size-4vw {
font-size: 4vw
}
.font-size-24px-sm {
font-size: 24px
}
.font-size-30px-sm {
font-size: 30px;
}
}
.font-weight-bold {
font-weight: bold
}
.gothic-weight-bold {
font-family: Hiragino Sans W6;
}
/* color & background */
.font-weight-500 {
font-weight: 500
}
.text-light {
color: #F9FBFD
}
.text-brown-light {
color: #b69e84
}
.text-brown-red {
color: #990000
}
.text-brown-wood {
color: #3B0B06
}
.text-pink {
color: #F96985
}
.text-orange-red {
color: #f24727
}
.text-orange {
color: #d88507
}
.text-paleblue {
color: #8ae0e7
}
.text-blue-purple {
color: #404cb2
}
.text-night-shadz {
color: #9b374a
}
.text-charcoal {
color: #404040
}
.text-sorrell-brown {
color: #967e66
}
.text-shadow-brown {
color: #83684c
}
.text-raw-umber {
color: #713907
}
.text-light-fuchi {
color: #fff;
-webkit-text-stroke: 1px #000;
text-stroke: 1px #000;
}
.text-light-fuchi-orange {
color: #fff;
-webkit-text-stroke: 2px #f24727;
text-stroke: 2px #f24727;
}
.text-highlighter-yellow-50 {
background: linear-gradient(transparent 50%, yellow 50%)
}
.text-highlighter-yellow-70 {
background: linear-gradient(transparent 70%, yellow 70%)
}
.text-highlighter-yellow-80 {
background: linear-gradient(transparent 80%, yellow 80%)
}
@media(min-width:768px) {
.text-shadow-black-md{
text-shadow: 0 0 #000;
}
}
.bg-white {
background-color: #fff
}
.bg-brown-wood-deep {
background-color: #3b0b06
}
.bg-gray {
background-color: #EAEAE8
}
.bg-red {
background: #ff0000
}
.bg-new {
background: #a1ffff
}
.bg-wait {
background: #fff4b4
}
.bg-sale {
background: #bbffbe
}
.bg-soldout {
background: #ffdeff
}
.bg-lightpink {
background: #FFFBF7
}
.bg-snow {
background: #fffafa
}
.bg-whitesmoke {
background: #fafafa
}
.bg-navy {
background-color: #1b2c68;
}
.bg-peach {
background-color: #ffcead;
}
.bg-peach-beige {
background-color: #ffd6bd;
}
.bg-shady-gray {
background-color: #959595;
}
.bg-yellowbeige{
background-color: #fef5e5;
}
.bg-fallow {
background-color: #bb956f;
}
.bg-cinnabar {
background-color: #db4a2e;
}
.bg-mountain-meadow {
background-color: #0da789;
}
.bg-curious-blue {
background-color: #387ccf;
}
.bg-shadow {
background-color: #83684c;
}
.bg-rodeo-dust {
background-color: #c9aa8c;
}
.bg-galliano-yellow {
background-color: #d0ae28;
}
.bg-barley-corn-beige {
background-color: #ae9b68;
}
.bg-glade-green {
background-color: #587b4e;
}
.bg-raw-umber {
background-color: #713907;
}
.bg-whip-beige {
background-color: #ffe6d6;
}
.bg-linen-beige {
background-color: #fbf4f0;
}
.bg-busan-beige {
background-color: #faf8eb;
}
/* ナビゲーションバー */
.navbar {
align-items: center;
justify-content: space-between;
z-index: 1030
}
.navbar-brand-title {
font-size: 21px;
font-weight: 600;
line-height: 35px;
padding: 0
}
.fixed-top {
position: fixed;
top: 0;
right: 0;
left: 0
}
.sticky-top {
position: -webkit-sticky;
position: sticky;
top: 0;
background-color: #fff;
z-index: 900;
}
.sticky-top-title {
position: -webkit-sticky;
position: sticky;
top: 4%;
z-index: 2;
}
.top-40 {
top: 40px;
}
.sticky-bottom {
position: -webkit-sticky;
position: sticky;
bottom: 0;
background-color: #fff;
z-index: 900;
}
@media(min-width: 993px) {
.bottom-menu {
display: none;
}
}
/* スライドメニュー */
.slide-menu-container {
overflow-x: scroll;
-webkit-overflow-scrolling: touch
}
.slide-menu {
display: -ms-flexbox;
display: flex
}
@media(max-width: 992px) {
.slide-menu-sp {
display: -ms-flexbox;
display: flex;
justify-content: center;
}
}
.slide-item {
display: block;
white-space: nowrap
}
.slide-item a {
/* 全て text-decoration-none に書き換えた後、削除*/
text-decoration: none
}
/* パンくずリスト系 */
.breadcrumbs-li {
display: inline-block;
list-style: none;
}
.breadcrumbs-li:after {
content: '>';
font-weight: bold;
padding-left: 1px;
padding-right: 5px;
color: #3b0b06
}
.breadcrumbs-li:last-child:after {
content: '';
}
/* 目次 */
.index {
background: #f6eef4;
border-radius: 15px
}
/*
のようにページ内の特定位置にリンクさせた場合に、
リンク先の表示でコンテンツの上部が画面外に飛び出て変な表示になることを
防止するテクニック。
*/
.internal-link {
display: block;
padding-top: 70px;
margin-top: -70px;
}
/* レイアウト系(画像系) */
.img {
vertical-align: middle;
border-style: none
}
.img-fluid {
max-width: 100%;
height: auto
}
/* レイアウト系(その他) */
.height-32 {
height: 32px
}
.height-40 {
height: 40px
}
.height-48 {
height: 48px
}
.height-56 {
height: 56px
}
.height-100 {
height:100%;
}
.height-full {
height: 100vh
}
/* レイアウト系(大枠) */
.container-fluid {
width: 100%;
margin-right: auto;
margin-left: auto;
}
.row {
display: flex;
flex-wrap: wrap
}
.width-full {
width: 100%
}
.width-auto {
width: auto
}
.white-space-pre {
white-space: pre
}
.white-space-nowrap {
white-space: nowrap
}
.width-80percent {
width: 80%;
}
.width-70percent {
width: 70%;
}
@media (max-width: 576px) {
.width-80percent {
width: 95%;
}
}
@media (max-width:768px) {
.width-85percent-md {
width: 85%;
}
.width-95percent-md {
width: 95%;
}
}
@media (min-width:768px) {
.width-95percent-md {
width: 60%;
}
}
@media (min-width:992px) {
.width-70percent-lg {
width: 70%;
}
}
/* レイアウト（フレックス系） */
.d-flex {
display: flex
}
.flex-wrap {
flex-wrap: wrap
}
.flex-nowrap {
flex-wrap: nowrap
}
.flex-direction-column {
flex-direction: column
}
.justify-content-start {
justify-content: flex-start
}
.justify-content-center {
justify-content: center
}
.justify-content-end {
justify-content: flex-end
}
.justify-content-space-between {
justify-content: space-between
}
.align-items-start {
align-items: flex-start
}
.align-items-center {
align-items: center
}
.align-items-end {
align-items: flex-end
}
.align-items-stretch {
align-items: stretch
}
@media (min-width:576px) {
.align-items-center-sm {
align-items: center
}
}
@media (max-width:1120px) {
.flex-direction-column-1120{
flex-direction: column;
}
}
/* オーバーフロー処理 */
.overflow-x-visible {
overflow-x: visible
}
.overflow-x-hidden {
overflow-x: hidden
}
.overflow-x-scroll {
overflow-x: scroll
}
.overflow-y-scroll {
overflow-y: scroll
}
@media(max-width:768px) {
.flex-direction-column-sp {
flex-direction: column
}
}
/* 折り返し制御 */
.nl {
display: inline-block
}
/* display調整 */
.d-inline{
display: inline;
}
/* nl:new-line */
.pre-nl {
display: inline
}
/* レイアウト系(テキスト系) */
.text-center {
text-align: center
}
.text-left {
text-align: left
}
.text-right {
text-align: right
}
.line-height-1 {
line-height: 1.0
}
.line-height-12 {
line-height: 1.2
}
.line-height-15 {
line-height: 1.5
}
.vertical-align-middle {
vertical-align: middle;
}
.vertical-align-top {
vertical-align: top;
}
.vertical-align-bottom {
vertical-align: bottom;
}
/* テキスト(装飾) */
/*
.marker-brown-light{ background: linear-gradient(transparent 90%, #b69e84 0%) }
.marker-brown-red{ background: linear-gradient(transparent 90%, #990000 0%) }
.marker-brown-berry{ background: linear-gradient(transparent 90%, #7B4B46 0%) }
*/
/* 装飾系(全般) */
.text-decoration-none {
text-decoration: none
}
/* .ul に置き換えたら削除*/
.text-decoration-underline {
text-decoration: underline
}
.ul {
text-decoration: underline
}
.a-decoration-none:hover {
text-decoration: none
}
.border-top-brown-deep-1 {
border-top: 1px solid #3B0B06
}
.border-bottom-brown-deep-1 {
border-bottom: 1px solid #3B0B06
}
.border-top-brown-deep-16 {
border-top: 16px solid #3B0B06
}
.border-bottom-brown-deep-16 {
border-bottom: 16px solid #3B0B06
}
.border-top-gray-1 {
border-top: 1px solid #ddd
}
.border-bottom-gray-1 {
border-bottom: 1px solid #ddd
}
.border-bottom-light-1 {
border-bottom: 1px solid #fff
}
.border-right-light-1 {
border-right: 1px solid #fff
}
.border-pastelblue-8{
border: solid 8px #e1f6ff;
}
.border-top-image-1 {
border-style: solid;
border-image: url(/images/icon/icon-pattern1.png) 13 0 13 0 repeat;
border-width: 13px 0 13px 0;
}
.repeat-image-1 {
background-image: url(/images/icon/icon-pattern1.png);
background-repeat: repeat-x;
height: 13px;
}
.border-solid-1 {
border: 1px solid #000
}
.border-solid-gy-2 {
border: 1.5px solid #808080
}
.border-solid-brown-red {
border: 1px solid #990000;
}
.border-bottom-3-pl{
border-bottom:solid 3px #b87dc1
}
.border-collapse {
border-collapse: collapse
}
.arrow01 {
display: block;
width: 15px;
height: 15px;
border-top: solid 3px #697b91;
border-right: solid 3px #697b91;
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
.arrow01-color-light {
color: #F9FBFD
}
@media (max-width: 768px) {
.repeat-image-2 {
background-image: url(/images/icon/the_middle_ages_03.webp);
background-size: 380px;
background-repeat: repeat-x;
height: 20px;
}
}
@media (min-width: 768px) {
.repeat-image-2 {
background-image: url(/images/icon/the_middle_ages_03.webp);
background-size: 480px;
background-repeat: repeat-x;
height: 20px;
}
}
.transparent-panel-liberty-london-wrap {
padding: 1em;
background: url(/images/common/liberty_london01.jpg) center center;
background-size: cover;
max-width: 640px;
margin: 0 auto;
}
.transparent-panel {
padding: 1em;
background-color: rgba(255, 255, 255, 0.85);
}
pre {
margin: 1em 0;
border-radius: 5px;
background-color: #1d1f21;
font-size: 16px;
color: #eaeaea;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* お知らせ(NEWS)系 */
dl {
background: #fcfaf9;
margin: 0
}
dt {
margin: 0;
float: left;
position: relative;
width: 100%;
-ms-flex: 0 0 23.606797%;
flex: 0 0 23.606797%;
max-width: 23.606797%
}
dd {
margin-left: 23.606797vw;
width: 100%;
max-width: 76.393203vw
}
@media (min-width: 576px) {
dt {
-ms-flex: 0 0 14.589803%;
flex: 0 0 14.589803%;
max-width: 14.589803%
}
dd {
margin-left: 14.589803vw
}
}
@media (min-width: 768px) {
dt {
-ms-flex: 0 0 11.803399%;
flex: 0 0 11.803399%;
max-width: 11.803399%
}
dd {
margin-left: 11.803399vw
}
}
/* カード系 */
.card {
position: relative;
width: 100%;
word-wrap: break-word;
background-clip: border-box;
background-color: #fff;
border: 0 solid #f1f4f8;
border-radius: .375rem;
display: flex;
flex-direction: column;
min-width: 0;
}
.card-body {
min-height: 1px;
position: relative;
display: block;
flex-grow: 0;
flex: 1 1 auto;
padding: 2rem;
}
/* テーブル系 */
table {
border-collapse: collapse;
caption-side: bottom;
}
tbody, td, tfoot, th, thead, tr {
border: 0 solid;
border-color: inherit;
}
th {
text-align: center;
/* text-align: inherit; */
/* text-align: -webkit-match-parent; */
}
.table-responsive {
overflow-x: auto;
}
.table {
--bs-table-bg: #fff;
--bs-table-accent-bg: #fff;
--bs-table-striped-color: #161c2d;
--bs-table-striped-bg: #f9fbfd;
--bs-table-active-color: #161c2d;
--bs-table-active-bg: #f9fbfd;
--bs-table-hover-color: #161c2d;
--bs-table-hover-bg: #f9fbfd;
border-color: #f1f4f8;
color: #161c2d;
margin-bottom: 1rem;
vertical-align: top;
width: 100%;
}
.table > thead {
vertical-align: bottom;
}
.table > tbody {
vertical-align: inherit;
}
.table > :not(:last-child) > :last-child > * {
border-bottom-color: currentColor;
}
.table > :not(caption) > * > * {
background-color: var(--bs-table-bg);
border-bottom-width: 1px;
box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);
padding: 1.5rem 2rem;
}
.table-striped > tbody > tr:nth-of-type(odd) {
--bs-table-accent-bg: var(--bs-table-striped-bg);
color: var(--bs-table-striped-color);
}
/* スクロールバーを上にする */
.scroll-x-bar-top-wrapper {
overflow-x: scroll;
transform: rotateX(180deg);
}
.scroll-x-bar-top-content {
transform: rotateX(180deg);
}
/* フォーム系 */
fieldset {
border-style: none;
}
.input-group-text {
/* padding: .375rem .75rem; */
/* margin-bottom: 0; */
/* font-size: 1rem; */
/* font-weight: 400; */
/* line-height: 1.5; */
/* color: #b69e84; */
/* text-align: center; */
height: calc(2.25rem + 2px);
/* white-space: nowrap; */
/* background-color: #e9ecef; */
border: 1px solid #ced4da;
border-radius: .25rem;
}
.form-control {
display: block;
width: 100%;
height: calc(5rem + 2px);
padding: .375rem .75rem;
font-size: 1rem;
line-height: 1.5;
color: #495057;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: .25rem;
transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.form-control-sp {
display: block;
width: 100%;
height: calc(2.25rem + 2px);
padding: .375rem .75rem;
font-size: 1rem;
line-height: 1.5;
color: #495057;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: .25rem;
transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.input-group-text-prepend {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
margin-right: -1px;
}
.input-group-text-apend {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.custom-select {
display: inline-block;
width: 100%;
height: calc(5rem + 2px);
/* padding: .75rem 1.25rem; */
padding: .375rem 1.75rem .375rem .75rem;
/* padding: 9px 28px 9px 12px; */
color: #495057;
vertical-align: middle;
background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right .75rem center;
background-size: 8px 10px;
border: 1px solid #ced4da;
border-radius: .25rem;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
/* リスト系 */
ol {
list-style-position: inside;
margin: 20px;
padding: 20px;
}
.list-group {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
padding: 0;
margin: 0;
}
.list-group-item:first-child {
border-top-left-radius: .25rem;
border-top-right-radius: .25rem;
}
.list-group-item:last-child {
border-bottom-left-radius: .25rem;
border-bottom-right-radius: .25rem;
}
.list-group-item {
position: relative;
display: block;
padding: .75rem 1.25rem;
margin-bottom: -1px;
border: 1px solid rgba(0, 0, 0, .125);
}
/* モーダル系 */
.modal-wrapper {
z-index: 1020;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 10px 10px;
text-align: center
}
.modal-wrapper:not(:target) {
opacity: 0;
visibility: hidden;
transition: opacity .3s, visibility .3s;
}
.modal-wrapper:target {
opacity: 1;
visibility: visible;
transition: opacity .4s, visibility .4s;
}
.modal-wrapper::after {
display: inline-block;
height: 100%;
margin-left: -.05em;
vertical-align: middle;
content: ""
}
.modal-wrapper .modal-window {
box-sizing: border-box;
display: inline-block;
z-index: 1020;
position: relative;
width: 85%;
padding: 30px 15px 30px;
border-radius: 10px;
background: #fff;
box-shadow: 0 0 30px rgba(0, 0, 0, .6);
vertical-align: middle
}
.modal-wrapper .modal-window .modal-content {
/* max-height: 80vh; */
height: 75vh;
overflow-y: auto;
}
.modal-wrapper {
color: #2b2e38
}
.modal-close {
z-index: 1010;
position: absolute;
width: 35px;
color: #000;
font-size: 30px;
border: 1 solid #000;
line-height: 40px;
text-decoration: none;
}
.modal-close-top-right {
top: 0;
right: 0;
}
.modal-close-bottom-right {
bottom: 0;
right: 0;
width: 35px;
color: #000;
}
.modal-overlay {
z-index: 1000;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, .8)
}
/* 「ページのTOPへ」ボタン用のCSS */
#page-top-button {
position: fixed;
padding-bottom: 0px;
bottom: 100px;
left: 20px;
visibility: hidden;
z-index: 900;
}
.anim-target {
position: absolute;
/*
どのくらいスクロールすると「ページのTOPへ」ボタンを表示するかを
コントロールすることになるプロパティと値です。
html の方に
と書き、anim-target が表示されるタイミングで、id="hideButton" スクリプトと id="showButton" スクリプトをスタートさせます。
*/
top: 600px;
}
/* border-radius */
.border-radius-10 {
border-radius: 10px;
}
.border-radius-20 {
border-radius: 20px;
}
.border-radius-35 {
border-radius: 35px;
}
/* 黄金比レイアウト */
/* フィボナッチ数列による比率
┏━━━━━━━━━━━━━━━━┳━━━━┳━━━━━━┓
┃ ┃ ┃ ┃
┃ ┃ 233 ┃ 377 ┃
┃ ┣━━━━┫ ┃
┃ ┃144┃144┃ ┃
┃ ┣━━━━┻━━━━━━┫
┃ 987 ┃ ┃
┃ ┃ ┃
┃ ┃ 610 ┃
┃ ┃ ┃
┃ ┃ ┃
┃ ┃ ┃
┗━━━━━━━━━━━━━━━━┻━━━━━━━━━━━┛
| 1597 |
|←------------------------------------------------------→|
viewport375 375 : 1597 : 横幅と仮定する
parent 61.803398vw 231.7627442 : 987 : 1597/1.618
child 38.196601vw 143.2372522 : 610 : 987/1.618
grandchild 23.606797vw 88.52548972 : 377 : 610/1.618
gg-child 14.589803vw 54.71176113 : 233 : 377/1.618
ggg-child 9.016994vw 33.81372773 : 144 : 233/1.618
143.234x231.750
429.702x695.250
*/
.row-gold-greatgrand {
height: 161.637931vw;
overflow-y: hidden
}
.row-gold-parent {
height: 61.803398vw;
overflow-y: hidden
}
.row-gold-grandchild {
height: 23.606797vw;
overflow-y: hidden
}
.row-gold-ggchild {
height: 14.589803vw;
overflow-y: hidden
}
.row-gold-gggchild {
height: 9.016994vw;
overflow-y: hidden
}
.row-gold-child {
height: 38.196601vw;
overflow-y: hidden
}
.col-gold-square {
position: relative;
width: 100%;
-ms-flex: 0 0 61.803398%;
flex: 0 0 61.803398%;
max-width: 61.803398%
}
.col-gold-rectangle {
position: relative;
width: 100%;
-ms-flex: 0 0 38.196601%;
flex: 0 0 38.196601%;
max-width: 38.196601%
}
.col-gold-grandchild {
position: relative;
width: 100%;
-ms-flex: 0 0 23.606797%;
flex: 0 0 23.606797%;
max-width: 23.606797%
}
@media (min-width: 576px) {
.row-gold-grandchild-sm {
height: 11.803399vw;
overflow-y: hidden
}
}
@media (min-width: 768px) {
.row-gold-parent-md {
height: 30.901699vw;
overflow-y: hidden
}
.row-gold-grandchild-md {
height: 11.803399vw;
overflow-y: hidden
}
.row-gold-ggchild-md {
height: 7.294901vw;
overflow-y: hidden
}
.row-gold-gggchild-md {
height: 4.508497vw;
overflow-y: hidden
}
.row-gold-child-md {
height: 19.098300vw;
overflow-y: hidden
}
}
/* Bootstrap グリッドレイアウトシステム系 */
.col-1 {
flex: 0 0 auto;
width: 8.3333333333%;
}
.col-2 {
flex: 0 0 auto;
width: 16.6666666667%;
}
.col-3 {
flex: 0 0 auto;
width: 25%;
}
.col-4 {
flex: 0 0 auto;
width: 33.3333333333%;
}
.col-5 {
flex: 0 0 auto;
width: 41.6666666667%;
}
.col-6 {
flex: 0 0 auto;
width: 50%;
}
.col-7 {
flex: 0 0 auto;
width: 58.3333333333%;
}
.col-8 {
flex: 0 0 auto;
width: 66.6666666667%;
}
.col-9 {
flex: 0 0 auto;
width: 75%;
}
.col-10 {
flex: 0 0 auto;
width: 83.3333333333%;
}
.col-11 {
flex: 0 0 auto;
width: 91.6666666667%;
}
.col-12 {
flex: 0 0 auto;
width: 100%;
}
.offset-1 {
margin-left: 8.3333333333%;
}
.offset-2 {
margin-left: 16.6666666667%;
}
.offset-3 {
margin-left: 25%;
}
.offset-4 {
margin-left: 33.3333333333%;
}
@media (max-width:576px) {
.col-mobile-1 {
flex: 0 0 auto;
width: 8.3333333333%;
}
.col-mobile-2 {
flex: 0 0 auto;
width: 16.6666666667%;
}
.col-mobile-3 {
flex: 0 0 auto;
width: 25%;
}
.col-mobile-4 {
flex: 0 0 auto;
width: 33.3333333333%;
}
.col-mobile-5 {
flex: 0 0 auto;
width: 41.6666666667%;
}
.col-mobile-6 {
flex: 0 0 auto;
width: 50%;
}
.col-mobile-7 {
flex: 0 0 auto;
width: 58.3333333333%;
}
.col-mobile-8 {
flex: 0 0 auto;
width: 66.6666666667%;
}
.col-mobile-9 {
flex: 0 0 auto;
width: 75%;
}
.col-mobile-10 {
flex: 0 0 auto;
width: 83.3333333333%;
}
.col-mobile-11 {
flex: 0 0 auto;
width: 91.6666666667%;
}
.col-mobile-12 {
flex: 0 0 auto;
width: 100%;
}
.offset-mobile-1 {
margin-left: 8.3333333333%;
}
.offset-mobile-2 {
margin-left: 16.6666666667%;
}
.offset-mobile-3 {
margin-left: 25%;
}
.offset-mobile-4 {
margin-left: 33.3333333333%;
}
}
@media (min-width: 576px) {
.col-sm-1 {
flex: 0 0 auto;
width: 8.3333333333%;
}
.col-sm-2 {
flex: 0 0 auto;
width: 16.6666666667%;
}
.col-sm-3 {
flex: 0 0 auto;
width: 25%;
}
.col-sm-4 {
flex: 0 0 auto;
width: 33.3333333333%;
}
.col-sm-5 {
flex: 0 0 auto;
width: 41.6666666667%;
}
.col-sm-6 {
flex: 0 0 auto;
width: 50%;
}
.col-sm-7 {
flex: 0 0 auto;
width: 58.3333333333%;
}
.col-sm-8 {
flex: 0 0 auto;
width: 66.6666666667%;
}
.col-sm-9 {
flex: 0 0 auto;
width: 75%;
}
.col-sm-10 {
flex: 0 0 auto;
width: 83.3333333333%;
}
.col-sm-11 {
flex: 0 0 auto;
width: 91.6666666667%;
}
.col-sm-12 {
flex: 0 0 auto;
width: 100%;
}
.offset-sm-0 {
margin-left: 0;
}
.offset-sm-1 {
margin-left: 8.3333333333%;
}
.offset-sm-2 {
margin-left: 16.6666666667%;
}
.offset-sm-3 {
margin-left: 25%;
}
.offset-sm-4 {
margin-left: 33.3333333333%;
}
}
@media (min-width: 768px) {
.col-md-1 {
flex: 0 0 auto;
width: 8.3333333333%;
}
.col-md-2 {
flex: 0 0 auto;
width: 16.6666666667%;
}
.col-md-3 {
flex: 0 0 auto;
width: 25%;
}
.col-md-4 {
flex: 0 0 auto;
width: 33.3333333333%;
}
.col-md-5 {
flex: 0 0 auto;
width: 41.6666666667%;
}
.col-md-6 {
flex: 0 0 auto;
width: 50%;
}
.col-md-7 {
flex: 0 0 auto;
width: 58.3333333333%;
}
.col-md-8 {
flex: 0 0 auto;
width: 66.6666666667%;
}
.col-md-9 {
flex: 0 0 auto;
width: 75%;
}
.col-md-10 {
flex: 0 0 auto;
width: 83.3333333333%;
}
.col-md-11 {
flex: 0 0 auto;
width: 91.6666666667%;
}
.col-md-12 {
flex: 0 0 auto;
width: 100%;
}
.offset-md-0 {
margin-left: 0;
}
.offset-md-1 {
margin-left: 8.3333333333%;
}
.offset-md-2 {
margin-left: 16.6666666667%;
}
.offset-md-3 {
margin-left: 25%;
}
.offset-md-4 {
margin-left: 33.3333333333%;
}
}
@media (min-width: 992px) {
.col-lg-1 {
flex: 0 0 auto;
width: 8.3333333333%;
}
.col-lg-2 {
flex: 0 0 auto;
width: 16.6666666667%;
}
.col-lg-3 {
flex: 0 0 auto;
width: 25%;
}
.col-lg-4 {
flex: 0 0 auto;
width: 33.3333333333%;
}
.col-lg-5 {
flex: 0 0 auto;
width: 41.6666666667%;
}
.col-lg-6 {
flex: 0 0 auto;
width: 50%;
}
.col-lg-7 {
flex: 0 0 auto;
width: 58.3333333333%;
}
.col-lg-8 {
flex: 0 0 auto;
width: 66.6666666667%;
}
.col-lg-9 {
flex: 0 0 auto;
width: 75%;
}
.col-lg-10 {
flex: 0 0 auto;
width: 83.3333333333%;
}
.col-lg-11 {
flex: 0 0 auto;
width: 91.6666666667%;
}
.col-lg-12 {
flex: 0 0 auto;
width: 100%;
}
.offset-lg-0 {
margin-left: 0;
}
.offset-lg-1 {
margin-left: 8.3333333333%;
}
.offset-lg-2 {
margin-left: 16.6666666667%;
}
.offset-lg-3 {
margin-left: 25%;
}
.offset-lg-4 {
margin-left: 33.3333333333%;
}
.position-lg-sticky {
/* position: -webkit-sticky!important;
position: sticky!important; */
position: -webkit-sticky;
position: sticky;
top: 0;
height: 100vh;
}
}
@media (min-width: 1400px) {
.col-xxl-1 {
flex: 0 0 auto;
width: 8.3333333333%;
}
.col-xxl-2 {
flex: 0 0 auto;
width: 16.6666666667%;
}
.col-xxl-3 {
flex: 0 0 auto;
width: 25%;
}
.col-xxl-4 {
flex: 0 0 auto;
width: 33.3333333333%;
}
.col-xxl-5 {
flex: 0 0 auto;
width: 41.6666666667%;
}
.col-xxl-6 {
flex: 0 0 auto;
width: 50%;
}
.col-xxl-7 {
flex: 0 0 auto;
width: 58.3333333333%;
}
.col-xxl-8 {
flex: 0 0 auto;
width: 66.6666666667%;
}
.col-xxl-9 {
flex: 0 0 auto;
width: 75%;
}
.col-xxl-10 {
flex: 0 0 auto;
width: 83.3333333333%;
}
.col-xxl-11 {
flex: 0 0 auto;
width: 91.6666666667%;
}
.col-xxl-12 {
flex: 0 0 auto;
width: 100%;
}
.offset-xxl-0 {
margin-left: 0;
}
.offset-xxl-1 {
margin-left: 8.3333333333%;
}
.offset-xxl-2 {
margin-left: 16.6666666667%;
}
.offset-xxl-3 {
margin-left: 25%;
}
.offset-xxl-4 {
margin-left: 33.3333333333%;
}
}
/* ボタン */
.button {
display: inline-block;
font-weight: 600;
text-align: center;
vertical-align: middle;
cursor: pointer;
border-radius: 10px;
-webkit-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.button-border-none {
border:none;
background: transparent;
}
.button-navy {
/* width: 400px; */
letter-spacing: 3px;
color: #fff;
background-color: #1b2c68;
padding: 12px 30px;
border-width: 1px;
border-style: solid;
border-color: #1b2c68;
border-image: initial;
transition: all 0.4s cubic-bezier(0.78, 0.18, 0.34, 0.98) 0s;
text-decoration: none;
}
.button-shine {
color: #FFF;
display: inline-block;
font-size: 16px;
font-weight: bold;
position: relative;
text-decoration: none;
border: 1px solid transparent;
outline: 1px solid;
outline-color: rgba(255, 255, 255, 0.5);
outline-offset: 0px;
text-shadow: none;
transition: all 1.2s cubic-bezier(0.2, 1, 0.2, 1);
}
.button-shine:hover {
border-color: #FFF;
box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.5), 0 0 20px rgba(255, 255, 255, 0.2);
outline-color: transparent;
outline-offset: 12px;
text-shadow: 2px 2px 3px #000
}
.button-shine.white-wood {
color: #202124;
outline-color: rgba(0, 0, 0, 0.5);
box-shadow: 2px 2px #a0522d
/* box-shadow: 2px 2px #d2691e */
}
.button-shine.white-wood:hover {
border-color: #3b0b06;
box-shadow: inset 0 0 20px rgba(182, 158, 132, 0.5), 0 0 20px rgba(255, 255, 255, 0.2);
/* text-shadowを背景色に変更する*/
text-shadow: 2px 2px 3px #b69e84;
}
.button-shine.pink {
color: #202124;
outline-color: rgba(0, 0, 0, 0.5);
box-shadow: 2px 2px #a0522d;
background-color: #e00364;
}
.button-shine.pink:hover {
/* text-shadowを背景色に変更する*/
text-shadow: 2px 2px 3px #e00364;
}
/* ボタン（別ページへのリンク） */
/* .button-to-link-a {
width: 90%;
text-align: center;
letter-spacing: 3px;
display: inline-block;
color: #fff;
background-color: #202f55;
border-width: 1px;
border-style: solid;
border-color: #202f55;
border-image: initial;
padding: 12px 30px;
transition: all 0.4s cubic-bezier(0.78, 0.18, 0.34, 0.98) 0s;
text-decoration: none;
} */
.button-to-link-a {
display: inline-block;
padding: 0.5em 1em;
text-decoration: none;
border-radius: 4px;
color: #ffffff;
background-image: linear-gradient(45deg, #FFC107 0%, #ff8b5f 100%);
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
border-bottom: solid 3px #c58668;
font-weight: bold;
z-index: 300;
}
.button-to-link-a:active {
-webkit-transform: translateY(4px);
transform: translateY(4px);
box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);
border-bottom: none;
}
/* ボタン（購入する） */
.button-to-buy {
color: #FFF;
background: #FF8A00;
text-decoration: none;
box-shadow: 1px 2px 2px 0 rgba(0, 0, 0, .5),
1px 3px 1px -2px rgba(0, 0, 0, .5),
1px 2px 5px 0 rgba(0, 0, 0, .7);
border: none;
border-radius: 5px;
font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
section.buy-button {
max-width: 300px;
margin: 0 auto;
}
a.buy-button {
display: block;
color: #ffffff;
font-size: 20px;
font-weight: bold;
line-height: 1.2;
text-decoration: none;
text-align: center;
padding: 1.3em .5em;
background: rgba(0, 0, 0, 0.2);
border: 1px solid transparent;
border-radius: 6px;
box-sizing: border-box;
max-width: 360px;
margin: 0 auto;
position: relative;
}
a.buy-button span {
position: relative;
display: block;
transform: translate(-3px, -3px);
transition: 0.3s;
z-index: +1;
}
a.buy-button:after {
content: "";
position: absolute;
top: 0;
left: 0;
margin: auto;
width: 100%;
height: 100%;
background: orange;
border-radius: 6px;
box-sizing: border-box;
transform: translate(-3px, -3px);
transition: 0.3s;
}
a.buy-button:hover span {
transform: translate(0, 0);
}
a.buy-button:hover:after {
transform: translate(0, 0);
}
/* カードレイアウト */
.cell {
height: 231.76px
}
/* カード装飾(ボタン系) */
.button-detail {
padding: 4px 2px 4px 2px;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14),
0 3px 1px -2px rgba(0, 0, 0, .2),
0 1px 5px 0 rgba(0, 0, 0, .12);
border: none;
border-radius: 2px;
width: 100%;
display: inline-block;
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
font-size: 16px;
font-weight: 500;
text-align: center;
vertical-align: middle;
cursor: pointer;
}
.button-sandybrown {
background: sandybrown;
color: #fff;
}
.button-lightcoral {
background: lightcoral;
color: #fff;
}
.cat {
display: inline-block;
border-bottom: none;
font-size: 0.875em;
word-break: break-all;
border-radius: 3px
}
.cat-border {
display: inline-block;
border: 1px solid #000;
font-size: 0.875em;
word-break: break-all;
border-radius: 3px
}
.cat001 {
background: #999;
}
.cat002 {
background: #ddb112;
}
.cat003 {
background: #b2d45c;
}
.cat004 {
background: #d87e77;
}
.cat005 {
background: #44b5e4;
}
/* 全て bg-new に入れ替えたら削除 */
@media (min-width: 320px) {
.maru10-button {
font-size: 14px
}
}
@media (min-width: 375px) {
.maru10-button {
font-size: 16px
}
}
/* カード装飾(ステータスのラベルの色や形状) */
.label-condition {
display: inline-block;
padding: 1.4px 7px;
border-bottom: none;
color: #fff;
font-size: 14px;
word-break: break-all;
border-radius: 3px
}
/* マージン・パディング系 */
.m-0 {
margin: 0
}
.mt-0, .my-0 {
margin-top: 0
}
.mr-0, .mx-0 {
margin-right: 0
}
.mb-0, .my-0 {
margin-bottom: 0
}
.ml-0, .mx-0 {
margin-left: 0
}
.m-1 {
margin: 0.25rem
}
.mt-1, .my-1 {
margin-top: 0.25rem
}
.mr-1, .mx-1 {
margin-right: 0.25rem
}
.mb-1, .my-1 {
margin-bottom: 0.25rem
}
.ml-1, .mx-1 {
margin-left: 0.25rem
}
.m-2 {
margin: 0.5rem
}
.mt-2, .my-2 {
margin-top: 0.5rem
}
.mr-2, .mx-2 {
margin-right: 0.5rem
}
.mb-2, .my-2 {
margin-bottom: 0.5rem
}
.ml-2, .mx-2 {
margin-left: 0.5rem
}
.m-3 {
margin: 1rem
}
.mt-3, .my-3 {
margin-top: 1rem
}
.mr-3, .mx-3 {
margin-right: 1rem
}
.mb-3, .my-3 {
margin-bottom: 1rem
}
.ml-3, .mx-3 {
margin-left: 1rem
}
.m-4 {
margin: 1.5rem
}
.mt-4, .my-4 {
margin-top: 1.5rem
}
.mr-4, .mx-4 {
margin-right: 1.5rem
}
.mb-4, .my-4 {
margin-bottom: 1.5rem
}
.ml-4, .mx-4 {
margin-left: 1.5rem
}
.m-5 {
margin: 3rem
}
.mt-5, .my-5 {
margin-top: 3rem
}
.mr-5, .mx-5 {
margin-right: 3rem
}
.mb-5, .my-5 {
margin-bottom: 3rem
}
.ml-5, .mx-5 {
margin-left: 3rem
}
.m-6 {
margin: 2rem
}
.mt-6, .my-6 {
margin-top: 2rem
}
.mr-6, .mx-6 {
margin-right: 2rem
}
.mb-6, .my-6 {
margin-bottom: 2rem
}
.ml-6, .mx-6 {
margin-left: 2rem
}
.m-7 {
margin: 2.5rem
}
.mt-7, .my-7 {
margin-top: 2.5rem
}
.mr-7, .mx-7 {
margin-right: 2.5rem
}
.mb-7, .my-7 {
margin-bottom: 2.5rem
}
.ml-7, .mx-7 {
margin-left: 2.5rem
}
.m-8 {
margin: 3rem
}
.mt-8, .my-8 {
margin-top: 3rem
}
.mr-8, .mx-8 {
margin-right: 3rem
}
.mb-8, .my-8 {
margin-bottom: 3rem
}
.ml-8, .mx-8 {
margin-left: 3rem
}
.m-9 {
margin: 4rem
}
.mt-9, .my-9 {
margin-top: 4rem
}
.mr-9, .mx-9 {
margin-right: 4rem
}
.mb-9, .my-9 {
margin-bottom: 4rem
}
.ml-9, .mx-9 {
margin-left: 4rem
}
.m-10 {
margin: 5rem
}
.mt-10, .my-10 {
margin-top: 5rem
}
.mr-10, .mx-10 {
margin-right: 5rem
}
.mb-10, .my-10 {
margin-bottom: 5rem
}
.ml-10, .mx-10 {
margin-left: 5rem
}
.m-11 {
margin: 6rem
}
.mt-11, .my-11 {
margin-top: 6rem
}
.mr-11, .mx-11 {
margin-right: 6rem
}
.mb-11, .my-11 {
margin-bottom: 6rem
}
.ml-11, .mx-11 {
margin-left: 6rem
}
.m-12 {
margin: 8rem
}
.mt-12, .my-12 {
margin-top: 8rem
}
.mr-12, .mx-12 {
margin-right: 8rem
}
.mb-12, .my-12 {
margin-bottom: 8rem
}
.ml-12, .mx-12 {
margin-left: 8rem
}
.m-13 {
margin: 10rem
}
.mt-13, .my-13 {
margin-top: 10rem
}
.mr-13, .mx-13 {
margin-right: 10rem
}
.mb-13, .my-13 {
margin-bottom: 10rem
}
.ml-13, .mx-13 {
margin-left: 10rem
}
.m-14 {
margin: 12rem
}
.mt-14, .my-14 {
margin-top: 12rem
}
.mr-14, .mx-14 {
margin-right: 12rem
}
.mb-14, .my-14 {
margin-bottom: 12rem
}
.ml-14, .mx-14 {
margin-left: 12rem
}
.m-15 {
margin: 16rem
}
.mt-15, .my-15 {
margin-top: 16rem
}
.mr-15, .mx-15 {
margin-right: 16rem
}
.mb-15, .my-15 {
margin-bottom: 16rem
}
.ml-15, .mx-15 {
margin-left: 16rem
}
.m-16 {
margin: 25rem
}
.mt-16, .my-16 {
margin-top: 25rem
}
.mr-16, .mx-16 {
margin-right: 25rem
}
.mb-16, .my-16 {
margin-bottom: 25rem
}
.ml-16, .mx-16 {
margin-left: 25rem
}
.margin-0-auto {
margin: 0 auto;
}
.p-0 {
padding: 0
}
.pt-0, .py-0 {
padding-top: 0
}
.pr-0, .px-0 {
padding-right: 0
}
.pb-0, .py-0 {
padding-bottom: 0
}
.pl-0, .px-0 {
padding-left: 0
}
.p-1 {
padding: 0.25rem
}
.pt-1, .py-1 {
padding-top: 0.25rem
}
.pr-1, .px-1 {
padding-right: 0.25rem
}
.pb-1, .py-1 {
padding-bottom: 0.25rem
}
.pl-1, .px-1 {
padding-left: 0.25rem
}
.p-2 {
padding: 0.5rem
}
.pt-2, .py-2 {
padding-top: 0.5rem
}
.pr-2, .px-2 {
padding-right: 0.5rem
}
.pb-2, .py-2 {
padding-bottom: 0.5rem
}
.pl-2, .px-2 {
padding-left: 0.5rem
}
.p-3 {
padding: 1rem
}
.pt-3, .py-3 {
padding-top: 1rem
}
.pr-3, .px-3 {
padding-right: 1rem
}
.pb-3, .py-3 {
padding-bottom: 1rem
}
.pl-3, .px-3 {
padding-left: 1rem
}
.p-4 {
padding: 1.5rem
}
.pt-4, .py-4 {
padding-top: 1.5rem
}
.pr-4, .px-4 {
padding-right: 1.5rem
}
.pb-4, .py-4 {
padding-bottom: 1.5rem
}
.pl-4, .px-4 {
padding-left: 1.5rem
}
.p-5 {
padding: 3rem
}
.pt-5, .py-5 {
padding-top: 3rem
}
.pr-5, .px-5 {
padding-right: 3rem
}
.pb-5, .py-5 {
padding-bottom: 3rem
}
.pl-5, .px-5 {
padding-left: 3rem
}
.p-6 {
padding: 2rem
}
.pt-6, .py-6 {
padding-top: 2rem
}
.pr-6, .px-6 {
padding-right: 2rem
}
.pb-6, .py-6 {
padding-bottom: 2rem
}
.pl-6, .px-6 {
padding-left: 2rem
}
.p-7 {
padding: 2.5rem
}
.pt-7, .py-7 {
padding-top: 2.5rem
}
.pr-7, .px-7 {
padding-right: 2.5rem
}
.pb-7, .py-7 {
padding-bottom: 2.5rem
}
.pl-7, .px-7 {
padding-left: 2.5rem
}
.p-8 {
padding: 3rem
}
.pt-8, .py-8 {
padding-top: 3rem
}
.pr-8, .px-8 {
padding-right: 3rem
}
.pb-8, .py-8 {
padding-bottom: 3rem
}
.pl-8, .px-8 {
padding-left: 3rem
}
.p-9 {
padding: 4rem
}
.pt-9, .py-9 {
padding-top: 4rem
}
.pr-9, .px-9 {
padding-right: 4rem
}
.pb-9, .py-9 {
padding-bottom: 4rem
}
.pl-9, .px-9 {
padding-left: 4rem
}
.p-10 {
padding: 5rem
}
.pt-10, .py-10 {
padding-top: 5rem
}
.pr-10, .px-10 {
padding-right: 5rem
}
.pb-10, .py-10 {
padding-bottom: 5rem
}
.pl-10, .px-10 {
padding-left: 5rem
}
.p-11 {
padding: 6rem
}
.pt-11, .py-11 {
padding-top: 6rem
}
.pr-11, .px-11 {
padding-right: 6rem
}
.pb-11, .py-11 {
padding-bottom: 6rem
}
.pl-11, .px-11 {
padding-left: 6rem
}
.p-12 {
padding: 8rem
}
.pt-12, .py-12 {
padding-top: 8rem
}
.pr-12, .px-12 {
padding-right: 8rem
}
.pb-12, .py-12 {
padding-bottom: 8rem
}
.pl-12, .px-12 {
padding-left: 8rem
}
.p-13 {
padding: 10rem
}
.pt-13, .py-13 {
padding-top: 10rem
}
.pr-13, .px-13 {
padding-right: 10rem
}
.pb-13, .py-13 {
padding-bottom: 10rem
}
.pl-13, .px-13 {
padding-left: 10rem
}
.p-14 {
padding: 12rem
}
.pt-14, .py-14 {
padding-top: 12rem
}
.pr-14, .px-14 {
padding-right: 12rem
}
.pb-14, .py-14 {
padding-bottom: 12rem
}
.pl-14, .px-14 {
padding-left: 12rem
}
.p-15 {
padding: 16rem
}
.pt-15, .py-15 {
padding-top: 16rem
}
.pr-15, .px-15 {
padding-right: 16rem
}
.pb-15, .py-15 {
padding-bottom: 16rem
}
.pl-15, .px-15 {
padding-left: 16rem
}
.p-16 {
padding: 25rem
}
.pt-16, .py-16 {
padding-top: 25rem
}
.pr-16, .px-16 {
padding-right: 25rem
}
.pb-16, .py-16 {
padding-bottom: 25rem
}
.pl-16, .px-16 {
padding-left: 25rem
}
@media (max-width: 320px) {
.px-1 {
padding-right: 0.1rem;
padding-left: 0.1rem
}
.px-2 {
padding-right: 0.15rem;
padding-left: 0.15rem
}
.px-3 {
padding-right: 0.2rem;
padding-left: 0.2rem
}
.py-1 {
padding-top: 0.1rem;
padding-bottom: 0.1rem
}
.py-2 {
padding-top: 0.15rem;
padding-bottom: 0.15rem
}
.mx-2 {
margin-right: 0.15rem;
margin-bottom: 0.15rem
}
}
@media (min-width: 768px) {
.pr-1-md, .px-1-md {
padding-right: 0.25rem
}
.pl-1-md, .px-1-md {
padding-left: 0.25rem
}
.pr-2-md, .px-2-md {
padding-right: 0.5rem
}
.pl-2-md, .px-2-md {
padding-left: 0.5rem
}
.pt-2-md, .py-2-md {
padding-top: 0.5rem
}
.pb-2-md, .py-2-md {
padding-bottom: 0.5rem
}
.pr-3-md, .px-3-md {
padding-right: 1rem
}
.pl-3-md, .px-3-md {
padding-left: 1rem
}
.pt-3-md, .py-3-md {
padding-top: 1rem
}
.pt-4-md, .py-4-md {
padding-top: 1.5rem
}
.pr-4-md, .px-4-md {
padding-right: 1.5rem
}
.pl-4-md, .px-4-md {
padding-left: 1.5rem
}
.pt-5-md, .py-5-md {
padding-top: 2rem
}
.pt-6-md, .py-6-md {
padding-top: 2rem
}
.pt-8-md, .py-8-md {
padding-top: 3.5rem
}
.ml-3-md, .mx-3-md {
margin-left: 1rem
}
.mb-4-md, .my-4-md {
margin-bottom: 1.5rem
}
.mr-4-md, .mx-4-md {
margin-right: 1.5rem
}
.ml-4-md, .mx-4-md {
margin-left: 1.5rem
}
}
@media (max-width: 576px) {
.ml-0-sm, .mx-0-sm {
margin-left: 0
}
.mb-1-sm, .my-1-sm {
margin-bottom: 0.25rem
}
.mb-2-sm, .my-2-sm {
margin-bottom: 0.5rem
}
.mb-3-sm, .my-3-sm {
margin-bottom: 0.75rem
}
.mb-6-sm, .my-6-sm {
margin-bottom: 2rem
}
.mt-3-sm, .my-3-sm {
margin-top: 1rem
}
.mt-4-sm, .my-4-sm {
margin-top: 1.5rem
}
.mt-6-sm, .my-6-sm {
margin-top: 2rem
}
.mt-8-sm, .my-8-sm {
margin-top: 3rem
}
.pt-3-sm, .py-3-sm {
padding-top: 1rem
}
.pb-3-sm, .py-3-sm {
padding-bottom: 1rem
}
.pb-1-sm, .py-1-sm {
padding-bottom: 0.25rem
}
}
/* ヘッダ用ネガティブマージン */
.point {
margin-top: -12rem;
padding-top: 12rem;
}
/* 表示順変更用に追加しました */
@media screen and (max-width: 576px) {
.order1 {
order: 1;
}
.order2 {
order: 2;
}
.order3 {
order: 3;
}
.order4 {
order: 4;
}
}
@media (max-width: 768px) {
.order1-md {
order: 1;
}
.order2-md {
order: 2;
}
.order3-md {
order: 3;
}
.order4-md {
order: 4;
}
}
/* テーブルレイアウト用に追加しました */
@media (max-width: 767px) {
.display-block-max-md {
display: block;
}
}
@media (min-width: 768px) {
.width-70 {
width: 70%
}
.width-30 {
width: 30%
}
}
.max-width-1000 {
max-width: 1000px;
}
@media (min-width: 1400px) {
.max-width-356px-xxl {
max-width: 356px;
}
}
@media (max-width: 767px) {
.max-height-50-max-width-767px {
max-height: 50px;
}
.max-width-50-max-width-767px {
max-width: 50%;
}
}
@media (max-width: 577px) {
.max-width-50-max-width-577px {
max-width: 70%;
}
}
@media (max-width: 376px) {
.max-width-50-max-width-376px {
max-width: 70%;
}
}
@media (max-width: 320px) {
.max-height-37-max-width-320px {
max-height: 37px;
}
}
.max-height-100 {
max-height: 100px;
}
/* ここから zumicustom */
/* 見出し横線テスト */
.head-border {
display: flex;
align-items: center;
}
.head-border:before,
.head-border:after {
content: "";
height: 2px;
flex-grow: 1;
background-color: #3B0B06;
}
.head-border:before {
margin-right: 1rem;
}
.head-border:after {
margin-left: 1rem;
}
/* 見出し破線 */
.head-border-dashed {
display: flex;
align-items: center;
}
.head-border-dashed::before,
.head-border-dashed::after {
content: "";
flex-grow: 1;
border-top: dashed 2px #3B0B06;
}
.head-border-dashed::before {
margin-right: 1rem;
}
.head-border-dashed::after {
margin-left: 1rem;
}
.list-none {
list-style: none;
}
.border-bottom-brown-deep-double-1 {
border-bottom: 3px double #3B0B06
}
.button-brownwood-radius {
background-color: #3B0B06;
color: #fafafa;
border: 1px solid transparent;
border-radius: 35px;
transition: all .5s;
}
.button-white-radius {
background-color: #fff;
color: #3b0b06;
border: 1px solid #3b0b06;
border-radius: 35px;
transition: all .5s;
z-index: 300;
}
.button-navy-radius {
background-color: #202f55;
color: #fafafa;
border: 1px solid transparent;
border-radius: 35px;
transition: all .5s;
z-index: 300;
}
.button-navy-radius:hover {
background-color: #fafafa;
color: #202f55;
border: 1px solid #202f55;
border-radius: 35px;
}
.bg-pink {
background-color: #e7cdbd;
}
@media (min-width: 768px) {
.bg-pink-min-md {
background: linear-gradient(to bottom, #fff 0%, #fff 20%, #e7cdbd 20%, #e7cdbd 85%, #fff 85%, #fff 100%)
}
}
@media (max-width: 767px) {
.bg-pink-max-md {
background-color: #e7cdbd;
}
}
.position-relative {
position: relative;
}
@media (man-width:768px){
.position-relative-md {
position: relative;
}
.position-center-y-md {
position: absolute;
top: 50%;
width: 100%;
text-align: center;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
}
.position-absolute-t50-r0 {
position: absolute;
top: 50%;
right: 0;
-ms-transform: translate(0, -50%);
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
margin: 0;
padding: 0
}
.position-absolute-center {
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
margin: 0;
padding: 0;
}
@media (min-width: 1200px) {
.position-absolute-top-10 {
position: absolute;
top: -10%;
right: 0;
-ms-transform: translate(0, -10%);
-webkit-transform: translate(0, -10%);
transform: translate(0, -10%);
margin: 0;
padding: 0
}
}
@media (min-width: 1500px) {
.position-absolute-top-10 {
position: absolute;
top: -10%;
right: 20%;
-ms-transform: translate(20%, -10%);
-webkit-transform: translate(20%, -10%);
transform: translate(20%, -10%);
margin: 0;
padding: 0
}
}
@media (min-width: 768px) {
.offset-md-6 {
margin-left: 50%;
}
}
@media (min-width: 1200px) {
.pc-my-12 {
margin-top: 8rem;
margin-bottom: 8rem
}
}
@media (max-width:768px) {
.text-center-sp {
text-align: center
}
.nl-sp {
display: inline-block
}
.justify-content-center-sp {
justify-content: center;
}
}
/* とはページ */
.font-size-12px {
font-size: 12px
}
.font-size-14px {
font-size: 14px
}
.list-type-square {
list-style-type: square;
}
.line-height-7 {
line-height: 2.5rem
}
.hr-brown-wood-deep-3 {
border-style: none;
border-top: 3px solid #3B0B06;
}
.border-left-brown-wood-deep-3 {
border-left: 3px solid #3B0B06;
}
/* タナローン生地一覧ページ */
.cursor-zoomin {
cursor: zoom-in;
}
.cursor-pointer {
cursor: pointer;
}
.button-bg-navy {
background: #1b2c68;
color: #fff;
border-width: 1px;
border-style: solid;
border-color: #1b2c68;
border-image: initial;
}
.button-bg-navy:hover {
color: #1b2c68;
background-color: #fff;
}
.button-bg-yellow {
background: #bea42e;
color: #fff;
border-width: 1px;
border-style: solid;
border-color: #bea42e;
border-image: initial;
}
.button-bg-yellow:hover {
color: #bea42e;
background-color: #fff;
}
/* marujuTOPページ */
.border-brown-deep-radius-2 {
border: 2px solid #fff;
border-radius: 10px;
}
.border-bottom-brown-deep-double-3 {
border-bottom: 3px double #3B0B06
}
.border-bottom-brown-light-double {
border-bottom: 3px double #b69e84
}
.border-brown-deep-double-3 {
border: 3px double #3b0b06
}
.border-brown-light-double-3 {
border: 3px double #b69e84
}
.border-light-double-3 {
border: 3px double #fff
}
.bg-brown-light {
background-color: #b69e84
}
.hover-brown-light:hover {
background-color: #b69e84;
border: 3px double #fff;
color: #fff;
transition: all .5s;
}
.hover-light {
background-color: #b69e84;
border: 3px double #fff;
}
.hover-light:hover {
background-color: #fff;
border: 3px double #b69e84;
transition: all .5s
}
.border-solid-gray-1 {
border: 1px solid #ddd
}
.border-solid-gray-2 {
border: 2px solid #626262
}
.position-absolute-top {
position: absolute;
top: 3%;
left: 0%;
right: 0%;
z-index: 1;
}
.font-size-7vw {
font-size: 7vw;
position: absolute;
top: 92%;
left: 0;
right: 0;
margin: 0 auto;
}
.border-dashed-frame {
border: 1px dashed #6c3524;
border-radius: 100vh;
}
.position-fixed {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 10000;
}
.shadow {
bottom: 10;
box-shadow: 0px 0px 50px rgb(0 0 0 / 30%);
-webkit-box-shadow: 0px 0px 50px rgb(0 0 0 / 30%);
}
.bg-offwhite {
background-color: #f7f6f4;
}
.border-dashed {
border: 2px dashed #3B0B06;
border-radius: 100vw
}
.border-top-gray-1 {
border-top: 1px solid #ddd;
}
.hover-navy {
background-color: #f7f6f4;
color: #000;
transition: all .5s ease;
}
.hover-navy:hover {
background-color: #1b2c68;
color: #f7f6f4;
}
.hover-brown-light2 {
background-color: #fff;
transition: all .3s ease;
}
.hover-brown-light2:hover {
background-color: #b69e84;
color: #fff;
border: solid 1px #ddd;
}
.hover-bg-brown-light {
background-color: #fff;
transition: all .3s ease;
}
.hover-bg-brown-light:hover {
background-color: #b69e84;
color: #fff;
}
.hover-bg-brown-wood {
background-color: #fff;
transition: all .3s ease;
}
.hover-bg-brown-wood:hover {
background-color: #3b0b06;
color: #fff;
}
@media(max-width:960px) {
#header-nav-pc {
display: none;
}
}
@media(min-width:961px) {
#header-nav-sp {
display: none;
position: absolute;
top: 0;
left: 0;
right: 0;
}
}
.position-center-top {
position: absolute;
top: 1%;
width: 100%;
text-align: center;
}
.position-left-top {
position: absolute;
top: -85%;
left: -15%;
}
@media (min-width: 992px) {
.position-t30-center {
position: absolute;
top: 30%;
width: 100%;
text-align: center;
}
.bg-white-shadow {
background-color: #fff;
opacity: 96%;
box-shadow: -3px -3px 20px #000;
}
}
.position-center {
position: absolute;
top: 40%;
width: 100%;
text-align: center;
}
.googlemap-bw {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
}
.amp-carousel-button {
width: 50px;
height: 100%;
margin: 0;
opacity: 85%
}
.note {
overflow: hidden;
}
.note:before {
content: "";
position: absolute;
top: 0;
right: 0;
border-width: 0 16px 16px 0;
/* This trick side-steps a webkit bug */
border-style: solid;
border-color: #e7cdbd #e7cdbd #990000 #990000;
/* A bit more verbose to work with .rounded too */
background: #990000;
/* For Opera when also applying a border-radius */
display: block;
width: 0;
/* Only for Firefox 3.0 damage limitation */
/* Optional: shadow */
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), -1px 1px 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), -1px 1px 1px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), -1px 1px 1px rgba(0, 0, 0, 0.2);
}
.border-frame-radius-5 {
border: 1px solid #000;
border-radius: 5px;
}
.balloon1-left {
position: relative;
display: inline-block;
margin: 1.5em 0 1.5em 15px;
padding: 15px 15px;
min-width: 120px;
max-width: 100%;
color: #555;
background: #e7cdbd;
border-radius: 5px;
}
.balloon1-left:before {
content: "";
position: absolute;
top: 50%;
left: -30px;
margin-top: -15px;
border: 15px solid transparent;
border-right: 15px solid #e7cdbd;
}
/* サブメニュー */
.submenu {
position: absolute;
top: 23px;
left: 0;
display: none;
}
.open-submenu:hover .submenu {
display: block;
}
/*—— 文字の右にライン ——*/
.title-border-right {
display: flex;
align-items: center;
}
.title-border-right:after {
border-top: 2px solid #990000;
content: "";
flex-grow: 1;
}
.title-border-right:after {
margin-left: 1rem;
}
.shadow-bottom {
box-shadow: 0px 5px 10px -3px rgba(0, 0, 0, 30%);
-webkit-box-shadow: 0px 10px 10px -3px rgba(0, 0, 0, 30%);
}
@media (min-width: 786px) {
.font-size-category-title {
font-size: 3vw;
}
}
@media (max-width: 786px) {
.font-size-category-title {
font-size: 6vw;
}
}
@media (min-width: 786px) {
.font-size-alphabet-title {
font-size: 2vw;
}
}
@media (max-width: 786px) {
.font-size-alphabet-title {
font-size: 6vw;
}
}
@media (min-width: 786px) {
.font-size-2vw-4vw {
font-size: 2vw;
}
}
@media (max-width: 786px) {
.font-size-2vw-4vw {
font-size: 4vw;
}
}
@media (min-width: 786px) {
.font-size-2vw-3vw {
font-size: 2vw;
}
}
@media (max-width: 786px) {
.font-size-2vw-3vw {
font-size: 3vw;
}
}
@media (min-width: 786px) {
.font-size-design-title {
font-size: 4vw;
}
}
@media (max-width: 786px) {
.font-size-design-title {
font-size: 9vw;
}
}
.border-left-gray-1 {
border-left: 1px solid #ddd;
}
.border-bottom-1 {
border-bottom: 1px solid #000
}
.border-left-1 {
border-left: 1px solid #000
}
.negative-ml-1 {
margin-left: -1px
}
.balloon2 {
position: relative;
display: inline-block;
margin: 1.5em 0;
padding: 7px 10px;
min-width: 120px;
max-width: 100%;
background: #FFF;
border: solid 1px #ffd700;
border-radius: 5px;
box-sizing: border-box;
}
.balloon2:before {
content: "";
position: absolute;
bottom: -28px;
left: 50%;
margin-left: -17px;
border: 13px solid transparent;
border-top: 16px solid #FFF;
z-index: 2;
}
.balloon2:after {
content: "";
position: absolute;
bottom: -30px;
left: 50%;
margin-left: -17px;
border: 13px solid transparent;
border-top: 16px solid #ffd700;
z-index: 1;
}
.balloon-yellow {
position: relative;
display: inline-block;
padding: 10px;
min-width: 120px;
max-width: 100%;
background: #feeeb7;
border: solid 1px #feeeb7;
border-radius: 5px;
box-sizing: border-box;
}
.balloon-yellow:before {
content: "";
position: absolute;
bottom: -28px;
left: 50%;
margin-left: -17px;
border: 13px solid transparent;
border-top: 16px solid #feeeb7;
z-index: 2;
}
.balloon-yellow:after {
content: "";
position: absolute;
bottom: -30px;
left: 50%;
margin-left: -17px;
border: 13px solid transparent;
border-top: 16px solid #feeeb7;
z-index: 1;
}
@media (min-width:576px){
.balloon2-left-gray-frame-md {
position: relative;
display: inline-block;
margin: 1.5em 0 1.5em 15px;
padding: .5rem 1rem;
min-width: 120px;
max-width: 100%;
color: #555;
background: #FFF;
border: solid 1px #555;
border-radius: 10px;
box-sizing: border-box;
}
.balloon2-left-gray-frame-md:before {
content: "";
position: absolute;
top: 60%;
left: -44px;
margin-top: -15px;
border: 15px solid transparent;
border-right: 33px solid #fff;
z-index: 2;
}
.balloon2-left-gray-frame-md:after {
content: "";
position: absolute;
top: 60%;
left: -45px;
margin-top: -14px;
border: 14px solid transparent;
border-right: 30px solid #555;
z-index: 1;
}
.balloon-right-gray-frame-md {
position: relative;
display: inline-block;
margin: 1.5em 15px 1.5em 0;
padding: 7px 10px;
min-width: 120px;
max-width: 100%;
color: #555;
background: #FFF;
border: solid 1px #555;
border-radius: 10px;
box-sizing: border-box;
}
.balloon-right-gray-frame-md:before {
content: "";
position: absolute;
top: 60%;
right: -44px;
margin-top: -15px;
border: 15px solid transparent;
border-left: 33px solid #fff;
z-index: 2;
}
.balloon-right-gray-frame-md:after {
content: "";
position: absolute;
top: 60%;
right: -45px;
margin-top: -14px;
border: 14px solid transparent;
border-left: 30px solid #555;
z-index: 1;
}
}
@media (max-width:575px){
.balloon2-bottom-gray-frame {
position: relative;
margin: 1.5em 0;
padding: 5px 10px;
min-width: 120px;
max-width: 100%;
color: #555;
background: #FFF;
border: solid 1px #555;
border-radius: 10px;
box-sizing: border-box;
}
.balloon2-bottom-gray-frame:before {
content: "";
position: absolute;
bottom: -27px;
left: 50%;
margin-left: -17px;
border: 14px solid transparent;
border-top: 15px solid #fff;
z-index: 2;
}
.balloon2-bottom-gray-frame:after {
content: "";
position: absolute;
bottom: -28px;
left: 50%;
margin-left: -17px;
border: 14px solid transparent;
border-top: 14px solid #555;
z-index: 1;
}
}
/* 上向き吹き出しの背景パステルグリーン */
.balloon-top-pastel-green {
position: relative;
display: inline-block;
margin: 1.5em 0;
padding: 7px 10px;
width: 98%;
background: #e7fbe3;
border: solid 1px #555;
box-sizing: border-box;
border-radius: 10px;
}
.balloon-top-pastel-green:before {
content: "";
position: absolute;
top: -39px;
left: 50%;
margin-left: -20px;
border: 17px solid transparent;
border-bottom: 30px solid #e7fbe3;
z-index: 2;
}
.balloon-top-pastel-green:after {
content: "";
position: absolute;
top: -39px;
left: 50%;
margin-left: -17px;
border: 14px solid transparent;
border-bottom: 25px solid #555;
z-index: 1;
}
/* 上向き吹き出しの背景パステルオレンジ */
.balloon-top-pastel-orange {
position: relative;
display: inline-block;
margin: 1.5em 0;
padding: 7px 10px;
width: 98%;
background: #ffe6d7;
border: solid 1px #555;
box-sizing: border-box;
border-radius: 10px;
}
.balloon-top-pastel-orange:before {
content: "";
position: absolute;
top: -39px;
left: 50%;
margin-left: -20px;
border: 17px solid transparent;
border-bottom: 30px solid #ffe6d7;
z-index: 2;
}
.balloon-top-pastel-orange:after {
content: "";
position: absolute;
top: -39px;
left: 50%;
margin-left: -17px;
border: 14px solid transparent;
border-bottom: 25px solid #555;
z-index: 1;
}
/* 上向き吹き出しの背景ベージュ 768px以下の時 */
@media(max-width:767px) {
.balloon-top-beige-sp {
position: relative;
display: inline-block;
margin: 1.5em 0;
padding: 7px 10px;
width: 70%;
background: #fff3eb;
border: solid 1px #d4d4d4;
box-sizing: border-box;
border-radius: 10px;
}
.balloon-top-beige-sp:before {
content: "";
position: absolute;
top: -39px;
left: 50%;
margin-left: -20px;
border: 17px solid transparent;
border-bottom: 30px solid #fff3eb;
z-index: 2;
}
.balloon-top-beige-sp:after {
content: "";
position: absolute;
top: -39px;
left: 50%;
margin-left: -17px;
border: 14px solid transparent;
border-bottom: 25px solid #d4d4d4;
z-index: 1;
}
.balloon-right-pastel-orange {
background-color: #ffe6d7;
border-radius: 10px;
}
}
@media(min-width:768px) {
/* 右向き吹き出しパステルオレンジ 768px以上のとき */
.balloon-right-pastel-orange {
position: relative;
display: inline-block;
margin: 1.5em 15px 1.5em 0;
padding: 4px 5px;
min-width: 120px;
max-width: 100%;
border-radius: 10px;
background: #ffe6d7;
}
.balloon-right-pastel-orange:before {
content: "";
position: absolute;
top: 50%;
left: 100%;
margin-top: -15px;
border: 15px solid transparent;
border-left: 15px solid #ffe6d7;
}
/* 左向き吹き出し 768px以上のとき */
.balloon-left-beige-md {
position: relative;
display: inline-block;
margin: 1.5em 0 1.5em 15px;
padding: 7px 10px;
background: #fff3eb;
border: solid 1px #d4d4d4;
box-sizing: border-box;
border-radius: 10px;
width: 50%;
}
.balloon-left-beige-md:before {
content: "";
position: absolute;
top: 50%;
left: -48px;
margin-top: -12px;
border: 12px solid transparent;
border-right: 43px solid #fff3eb;
z-index: 2;
}
.balloon-left-beige-md:after {
content: "";
position: absolute;
top: 50%;
left: -49px;
margin-top: -11px;
border: 11px solid transparent;
border-right: 38px solid #d4d4d4;
z-index: 1;
}
}
.box-radius-5px-gold {
border: solid 1px #ffd700;
border-radius: 5px;
}
.border-bottom-double-red {
border-bottom: double 3px #990000;
}
.border-double-red {
border: double 3px #990000;
}
@media (max-width: 575px) {
.max-width-575-display-none {
display: none;
}
}
@media (max-width: 992px) {
aside {
display: none;
}
.max-width-992-display-none {
display: none;
}
}
@media(min-width: 993px) {
.min-width-993-display-none {
display: none;
}
}
@media (max-width: 768px) {
.max-width-768-display-none {
display: none;
}
}
@media (min-width:1400px) {
.icon-star-none-xxl {
display:none;
}
}
@media (max-width:1399px) {
.icon-star-none-xl {
display: none;
}
}
.bg-white-opacity {
background-color: #fff;
opacity: 95%;
z-index: 100;
}
.bg-white-opacity-7 {
background-color: rgba(255, 255, 255, 0.7);
}
@media (min-width: 768px) {
.negative-ml-5 {
margin-left: -5%;
}
.negative-ml-10 {
margin-left: -10%;
}
.negative-mr-5 {
margin-right: -5%;
}
.negative-mr-10 {
margin-right: -10%;
}
.circle {
width: 10px;
height: 10px;
background-color: #3B0B06;
border-radius: 50%;
z-index: 150;
}
}
.position-bottom {
position: absolute;
bottom: 0;
width: 100%;
-ms-transform: translate(0, 0);
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
@media(min-width:768px) {
.position-bottom-7 {
position: absolute;
bottom: 7%;
left: 50%;
-ms-transform: translate(-50%,-7%);
-webkit-transform: translate(-50%,-7%);
transform: translate(-50%,-7%);
}
}
.position-bottom-right {
position: absolute;
right: 2%;
bottom: -15%;
-ms-transform: translate(-2%, 15%);
-webkit-transform: translate(-2%, 15%);
transform: translate(-2%, 15%);
}
.position-right-bottom {
position: absolute;
right: -3%;
bottom: -10%;
-ms-transform: translate(3%, 10%);
-webkit-transform: translate(3%, 10%);
transform: translate(3%, 10%);
}
.position-bottom-left {
position: absolute;
left: 3%;
bottom: -15%;
-ms-transform: translate(-3%, 15%);
-webkit-transform: translate(-3%, 15%);
transform: translate(-3%, 15%);
}
.morelink-border-brownwood {
height: 1px;
background-color: #3B0B06;
border: none;
flex-grow: 1;
z-index: 150;
}
.img-hover-zoom {
transition: .8s all;
}
.img-hover-zoom:hover {
transform: scale(1.05, 1.05);
transition: .8s all;
}
.img-wrapper {
cursor: pointer;
max-width: 600px;
/* max-height: 300px; */
overflow: hidden;
position: relative;
width: 100%;
}
.img-wrapper img {
transition: transform .6s ease;
}
.img-wrapper:hover img {
transform: scale(1.05);
}
.img-on-text {
bottom: 0;
left: 0;
margin: auto;
position: absolute;
right: 0;
width: 100%;
z-index: 2;
background-color: #fff;
color: #000;
opacity: 85%;
}
.button-brown-wood {
background: #1b2c68;
border: solid 1px #1b2c68;
color: #fff;
transition: all .3s ease;
}
.button-brown-wood:hover {
background-color: #fff;
color: #1b2c68;
border: solid 1px #1b2c68;
}
.button-white {
background: #3B0B06;
border: solid 1px #3B0B06;
color: #fff;
transition: all .3s ease;
}
.button-white:hover {
background-color: #fff;
color: #3B0B06;
border: solid 1px #3B0B06;
}
.bg-black {
background-color: #000;
}
.bg-purple {
background-color: #47266e;
}
.text-navy {
color: #1b2c68;
}
.button-navy-frame {
background-color: #202f55;
color: #fff;
border: solid 1px #202f55;
transition: all .5s;
}
.button-navy-frame:hover {
background-color: #fff;
color: #202f55;
}
.click-botton {
position: absolute;
right: 2%;
top: 6%;
background-color: #202f55;
color: #fafafa;
border: 1px solid transparent;
border-radius: 35px;
box-shadow: 1px 1px 4px 6px #fafafa;
z-index: 3;
}
.button-indigo {
background: #202f55;
color: #fff;
border: solid 1px #202f55;
}
.button-indigo:hover {
opacity: .8;
}
.button-red {
background: #cc0000;
color: #fff;
border: solid 1px #cc0000;
}
.button-red:hover {
opacity: .8;
}
.button-purple {
background: #47266e;
color: #fff;
border: solid 1px #47266e;
}
.button-purple:hover {
opacity: .8;
}
.list-group-item-circle {
min-width: 38px;
height: 38px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
text-align: center;
display: inline-block;
border: 1px solid rgba(0, 0, 0, .125);
}
/* オーダーメイドページ用 */
.position-left {
position: absolute;
top: 50%;
left: 5%;
-ms-transform: translate(-3%, -50%);
-webkit-transform: translate(-3%, -50%);
transform: translate(-3%, -50%);
}
.position-top30-right {
position: absolute;
top: 30%;
right: 10%;
-ms-transform: translate(-10%, -30%);
-webkit-transform: translate(-10%, -30%);
transform: translate(-10%, -30%);
}
.position-top20-right {
position: absolute;
top: 20%;
right: 10%;
-ms-transform: translate(-10%, -20%);
-webkit-transform: translate(-10%, -20%);
transform: translate(-10%, -20%);
}
.position-top-right {
position: absolute;
top: 3%;
right: 1%;
-ms-transform: translate(-1%, -3%);
-webkit-transform: translate(-1%, -3%);
transform: translate(-1%, -3%);
}
.bg-white-radius {
background-color: #fff;
border: 2px solid #ddd;
border-radius: 100vh;
}
.border-bottom-gray-6 {
border-bottom: 6px solid #ddd;
}
@media (min-width: 768px) {
.position-right3-bottom3 {
position: absolute;
right: 3%;
bottom: 3%;
-ms-transform: translate(-3%, -3%);
-webkit-transform: translate(-3%, -3%);
transform: translate(-3%, -3%);
}
}
.position-right-bottom2 {
position: absolute;
right: 0;
bottom: 2%;
-ms-transform: translate(0, -3%);
-webkit-transform: translate(0, -3%);
transform: translate(0, -3%);
z-index: 2;
}
.position-left-bottom2 {
position: absolute;
left: 0;
bottom: 2%;
-ms-transform: translate(0, -3%);
-webkit-transform: translate(0, -3%);
transform: translate(0, -3%);
z-index: 2;
}
@media(min-width:768px) {
.position-left-bottom2-md {
position: absolute;
left: 0;
bottom: 2%;
-ms-transform: translate(0, -3%);
-webkit-transform: translate(0, -3%);
transform: translate(0, -3%);
z-index: 2;
}
.position-right-bottom2-md {
position: absolute;
right: 0;
bottom: 2%;
-ms-transform: translate(0, -3%);
-webkit-transform: translate(0, -3%);
transform: translate(0, -3%);
z-index: 2;
}
}
.position-left-bottom4 {
position: absolute;
left: 0;
bottom: 4%;
-ms-transform: translate(0, -4%);
-webkit-transform: translate(0, -4%);
transform: translate(0, -4%);
z-index: 2;
}
.position-left-bottom-6 {
position: absolute;
left: 0;
bottom: 6%;
-ms-transform: translate(0, -6%);
-webkit-transform: translate(0, -6%);
transform: translate(0, -6%);
z-index: 2;
}
.text-mazennda {
color: #da2663;
}
.text-gray {
color: #626262;
}
.text-blue {
color: #4c70cd;
}
.text-clearblue {
color: #107cec;
}
.text-seagreen {
color: #2e8b57
}
.bg-gray-opacity {
background-color: rgba(0, 0, 0, 0.4);
color: #fff;
}
.bg-dimgray {
background-color: #696969
}
.border-bottom-dashed {
border-bottom: 1px dashed #000;
}
.border-dashed-1 {
border: 1px dashed #000;
}
.border-dashed-gray-1 {
border: 1px dashed #ddd;
}
.border-dashed-green-1 {
border: 1px dashed #dcf9d9;
}
.border-dashed-skyblue-2 {
border: 2px dashed #81c3f6;
}
.list-checkbox {
list-style-position: inside;
padding-left: 3em;
background-image: url(/images/order-made/check-box.png);
background-repeat: no-repeat;
background-size: 3em;
background-position: left center;
}
.font-style-italic {
font-style: italic;
}
.text-vertical-rl {
writing-mode: vertical-rl;
}
.bg-beige {
background-color: #fff2ea;
}
.bg-babypink {
background-color: #f5efec;
}
.bg-pastelpink {
background-color: #ffebed;
}
.bg-green {
background-color: #dcf9d9;
}
.gray-frame {
border: 10px solid #ddd;
}
.bg-pastelyellow {
background-color: #fffdda;
}
.bg-egg-yellow {
background-color: #ebd063;
}
.pink-frame-2 {
border: solid 2px #fd8098;
}
.bg-orange {
background-color: #ff8432;
}
.bg-pastelorange{
background-color: #fda36a;
}
.bg-pastelblue {
background-color: #e1f6ff;
}
.bg-lightblue {
background-color: #abd7f9;
}
.bg-skyblue {
background-color: #81c3f6;
}
.bg-blue{
background-color: #102497;
}
.bg-smoky-blue{
background-color: #8cacca;
}
.bg-bright-blue {
background-color: #2c9bf0;
}
.bg-curious-blue {
background-color: #377cd0;
}
.bg-pale-pink {
background-color: #fff9fa;
}
.bg-rosepink{
background-color: #fd8098;
}
.bg-sakurapink{
background-color: #fec4d0;
}
.bg-greentea{
background-color: #10a689;
}
.bg-dusty-green {
background-color: #95bb8a;
}
.bg-mintgreen {
background-color: #94beaf;
}
.bg-blue-purple {
background-color: #404cb2;
}
.bg-night-shadz {
background-color: #9b374a;
}
.bg-light-gray {
background-color: #f2f2f2;
}
.bg-babypink-bottom-white {
background: linear-gradient(to bottom, #f5efec 0%, #f5efec 50%, #f7f6f4 50%, #f7f6f4 100%);
}
.bg-gradation-bottom-pastelyellow {
background: linear-gradient(to bottom, #fffdda 0%, #ffffff 20%, #ffffff 80%, #fffdda 100%);
padding: 80px 0 80px;
}
.bg-gradation-bottom-gray {
background: linear-gradient(to bottom, #f5f5f5 0%, #ffffff 20%, #ffffff 80%, #f5f5f5 100%);
padding: 80px 0 80px;
}
.bg-gradation-x-pastelpink {
background: linear-gradient(to right, #fff 0%, #f5efec 20%, #f5efec 80%, #fff 100%);
padding: 80px 0 80px;
}
@media (min-width: 768px) {
.position-top-15 {
position: absolute;
top: 10%;
width: 100%;
text-align: center;
}
}
@media (max-width: 768px) {
.position-top-15 {
position: absolute;
top: 0;
width: 100%;
text-align: center;
}
}
.balloon1-top {
position: relative;
display: inline-block;
margin: 1.5em 0;
padding: 10px 15px;
min-width: 120px;
max-width: 100%;
background: #ffebed;
}
.balloon1-top:before {
content: "";
position: absolute;
top: -30px;
left: 50%;
margin-left: -15px;
border: 15px solid transparent;
border-bottom: 15px solid #ffebed;
}
.balloon1-left-green {
position: relative;
display: inline-block;
margin: 1.5em 0 1.5em 15px;
padding: 7px 10px;
min-width: 120px;
max-width: 100%;
background: #dcf9d9;
}
.balloon1-left-green:before {
content: "";
position: absolute;
top: 50%;
left: -30px;
margin-top: -15px;
border: 15px solid transparent;
border-right: 15px solid #dcf9d9;
}
.balloon1-right-pastelblue {
position: relative;
display: inline-block;
margin: 1.5em 15px 1.5em 0;
padding: 7px 10px;
min-width: 120px;
max-width: 100%;
background: #e1f6ff;
}
.balloon1-right-pastelblue:before {
content: "";
position: absolute;
top: 50%;
left: 100%;
margin-top: -15px;
border: 15px solid transparent;
border-left: 15px solid #e1f6ff;
}
.balloon2-right {
position: relative;
display: inline-block;
margin: 1.5em 15px 1.5em 0;
padding: 7px 10px;
min-width: 120px;
max-width: 100%;
color: #555;
background: #fff8f5;
border: solid 1px #555;
box-sizing: border-box;
}
.balloon2-right:before {
content: "";
position: absolute;
top: 50%;
right: -25px;
margin-top: -12px;
border: 13px solid transparent;
border-left: 13px solid #fff8f5;
z-index: 2;
}
.balloon2-right:after {
content: "";
position: absolute;
top: 50%;
right: -28px;
margin-top: -13px;
border: 14px solid transparent;
border-left: 14px solid #555;
z-index: 1;
}
.balloon2-left {
position: relative;
display: inline-block;
margin: 1.5em 0 1.5em 15px;
padding: 7px 10px;
min-width: 120px;
max-width: 100%;
color: #555;
background: #fff8f5;
border: solid 1px #555;
box-sizing: border-box;
}
.balloon2-left:before {
content: "";
position: absolute;
top: 50%;
left: -24px;
margin-top: -12px;
border: 12px solid transparent;
border-right: 12px solid #fff8f5;
z-index: 2;
}
.balloon2-left:after {
content: "";
position: absolute;
top: 50%;
left: -28px;
margin-top: -14px;
border: 14px solid transparent;
border-right: 14px solid #555;
z-index: 1;
}
.balloon2-bottom {
position: relative;
display: inline-block;
margin: 1.5em 0;
padding: 20px 40px;
min-width: 120px;
max-width: 100%;
color: #555;
background: #FFF;
border: solid 1px #555;
box-sizing: border-box;
}
.balloon2-bottom:before {
content: "";
position: absolute;
bottom: -24px;
left: 50%;
margin-left: -15px;
border: 12px solid transparent;
border-top: 12px solid #FFF;
z-index: 2;
}
.balloon2-bottom:after {
content: "";
position: absolute;
bottom: -28px;
left: 50%;
margin-left: -17px;
border: 14px solid transparent;
border-top: 14px solid #555;
z-index: 1;
}
/* ▼左下向きの吹き出しグレー背景▼ */
.balloon-bottom-gray {
position: relative;
display: inline-block;
margin: 1.5em 0;
padding: 10px;
min-width: 120px;
max-width: 365px;
background: #e6e6e6;
box-sizing: border-box;
border-radius: 15px;
}
.balloon-bottom-gray:before {
content: "";
position: absolute;
bottom: -40px;
left: 30%;
margin-left: -50px;
border: 30px solid transparent;
border-top: 20px solid #e6e6e6;
z-index: 2;
border-left: 40px solid #e6e6e6;
}
/* ▲左下向きの吹き出しグレー背景▲ */
.marker-pink {
background: linear-gradient(transparent 60%, #ffd6de 60%);
}
.marker-pink-50-85 {
background: linear-gradient(transparent 50%,#ffd6de 50%,#ffd6de 85%,transparent 85%);
}
.marker-pink-60-80 {
background: linear-gradient(transparent 60%,#ffd6de 60%, #ffd6de 80%,transparent 80%);
padding-bottom: 2px;
}
.marker-pink-15 {
background: linear-gradient(transparent 70%,#ffd6de 70%,#ffd6de 85%,transparent 85%);
padding-bottom: 2px;
}
.marker-pink-20 {
background: linear-gradient(transparent 70%, #ffd6de 70%);
padding-bottom: 2px;
}
.marker-yellow-20 {
background: linear-gradient(transparent 70%, #fff49d 70%);
padding-bottom: 2px;
}
.marker-pastelyellow {
background: linear-gradient(transparent 60%, #fffdda 60%);
}
.marker-gray {
background: linear-gradient(transparent 65%,#cacaca 65%,#cacaca 85%,transparent 85%);
padding-bottom: 2px;
}
.arrow-pink {
position: relative;
width: 20px;
height: 30px;
background: #ffd6de;
}
.arrow-pink:after {
position: absolute;
content: "";
right: -10px;
bottom: -40px;
border: 20px solid;
border-color: transparent;
border-top: 20px solid #ffd6de;
}
.arrow-pink-2 {
position: relative;
width: 40px;
height: 35px;
background: #ffd6de;
}
.arrow-pink-2:after {
position: absolute;
content: "";
right: -20px;
bottom: -60px;
border: 40px solid;
border-color: transparent;
border-top: 20px solid #ffd6de;
}
.balloon-bottom-left {
display: inline-block;
position: relative;
margin: 30px;
padding: 20px;
background: #fff;
border: 1px solid #666;
border-radius: 40px;
}
.balloon-bottom-left::before {
content: "";
position: absolute;
bottom: -30px;
left: 40px;
width: 0;
height: 0;
border-top: 30px solid #666;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
transform-origin: left top;
transform: skewX(-40deg);
}
.balloon-bottom-left::after {
content: "";
position: absolute;
bottom: -26px;
left: 43px;
width: 0;
height: 0;
border-top: 30px solid #fff;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
transform-origin: left top;
transform: skewX(-40deg);
}
.balloon-top-right {
display: inline-block;
position: relative;
margin: 30px;
padding: 20px;
background: #fff;
border: 1px solid #666;
border-radius: 40px;
}
.balloon-top-right::before {
content: "";
position: absolute;
top: -30px;
right: 40px;
width: 0;
height: 0;
border-bottom: 30px solid #666;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
transform-origin: left top;
transform: skewX(-40deg);
}
.balloon-top-right::after {
content: "";
position: absolute;
top: -26px;
right: 43px;
width: 0;
height: 0;
border-bottom: 30px solid #fff;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
transform-origin: left top;
transform: skewX(-40deg);
}
.bg-arrow {
position: relative;
width: 90px;
height: 600px;
background: #eafbe8;
}
.bg-arrow:after {
position: absolute;
content: "";
right: -30px;
top: 600px;
border: 70px solid;
border-color: transparent;
border-top: 160px solid #eafbe8;
margin-left: 3px;
margin-right: 3px;
}
.stickarrow {
width: 98%;
height: 10px;
border-bottom: 2px solid #990000;
border-right: 2px solid #990000;
transform: skew(45deg);
}
.negative-mt-8 {
margin-top: -8px;
}
.border-frame-red-3 {
border: solid 3px #b35751;
border-radius: 30px;
}
.border-frame-blue-3 {
border: solid 3px #3f608e;
border-radius: 30px;
}
.border-frame-green-3 {
border: solid 3px #536030;
border-radius: 30px;
}
.img-on-white {
background-color: rgba(255, 255, 255, 0.5);
}
.text-writing-mode-rl {
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
}
.text-orientation-upright {
text-orientation: upright;
}
.kakko01 {
position: relative;
text-align: center;
}
.kakko01::before, .kakko01::after {
content: '';
width: 25px;
height: 25px;
position: absolute;
}
.kakko01::before {
border-left: solid 2px #b69e84;
border-top: solid 2px #b69e84;
top: 0;
left: 0;
}
.kakko01::after {
border-right: solid 2px #b69e84;
border-bottom: solid 2px #b69e84;
bottom: 0;
right: 0;
}
.ticket-card {
position: relative;
width: 80%;
height: auto;
background-image: linear-gradient(to right, #e6c0c0 0% 15%, #f7f6f5 15% 100%);
overflow: hidden;
margin-bottom: 4px;
}
.ticket-card::before {
content: "";
z-index: 99;
position: absolute;
top: -10px;
left: 32px;
display: block;
width: 16px;
height: 16px;
border-radius: 16px;
background-color: #fff;
}
.ticket-card::after {
content: "";
z-index: 99;
position: absolute;
bottom: -10px;
left: 32px;
display: block;
width: 16px;
height: 16px;
border-radius: 16px;
background-color: #fff;
}
.list-group-item-circle:hover {
background: rgba(182, 158, 132);
transition: all .2s;
}
/* タブデザイン */
.tab-wrap {
display: flex;
text-align: center;
flex-wrap: wrap;
overflow: hidden;
}
.tab-label {
background-color: rgba(105, 105, 105, .2);
border: solid 1px #fff;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
cursor: pointer;
flex: 1;
font-weight: bold;
order: -1;
padding: 12px 24px;
position: relative;
transition: cubic-bezier(0.4, 0, 0.2, 1) .2s;
user-select: none;
white-space: nowrap;
-webkit-tap-highlight-color: transparent;
max-width: 200px;
}
.tab-label:hover {
background: rgba(153, 0, 0, .1);
}
.tab-switch:checked + .tab-label {
color: #990000;
background-color: #fff;
border: solid 1px #ddd;
height: 80px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.tab-label::after {
background: #990000;
bottom: 0;
content: '';
display: block;
height: 6px;
left: 0;
opacity: 0;
pointer-events: none;
position: absolute;
transform: translateX(100%);
transition: cubic-bezier(0.4, 0, 0.2, 1) .2s 80ms;
width: 100%;
z-index: 1;
}
.tab-switch:checked ~ .tab-label::after {
transform: translateX(-100%);
}
.tab-switch:checked + .tab-label::after {
opacity: 1;
transform: translateX(0);
}
.tab-content {
height: 0;
opacity: 0;
padding: 0 20px;
pointer-events: none;
transform: translateX(-30%);
transition: transform .3s 80ms, opacity .3s 80ms;
width: 100%;
border: solid 1px #ddd;
border-radius: 10px;
box-shadow: 0 0 5px rgba(0, 0, 0, .1);
}
.tab-switch:checked ~ .tab-content {
transform: translateX(30%);
}
.tab-switch:checked + .tab-label + .tab-content {
height: auto;
opacity: 1;
order: 1;
pointer-events: auto;
transform: translateX(0);
}
.tab-wrap::after {
order: -1;
width: 100%;
}
.tab-switch {
display: none;
}
.border-radius-top {
border-top-left-radius: 200px;
border-top-right-radius: 200px;
}
.tab-contents {
margin: 30px auto;
}
.btn-navy {
border: solid 1px #1b2c68;
border-radius: 20px;
padding: 10px 20px;
background-color: #fff;
color: #1b2c68;
box-shadow: 3px 3px #1b2c68;
}
.circle-in-text{
text-align: center;
background-color: #fff;
width: 100px;
height: 100px;
border-radius: 50%;
}
.text-border-20deg {
text-align: left;
position: relative;
line-height: 1;
overflow: hidden;
padding: 40px;
}
.text-border-20deg::before {
content: "";
display: inline-block;
width: 4px;
height: 120%;
background: #ffb6c1;
transform: rotate(20deg);
position: absolute;
top: -20px;
left: 35px;
z-index: -1;
}
.border-bottom-title {
line-height: 1;
margin-bottom: 20px;
}
.border-bottom-title::after {
content: '';
display: block;
width: 85px;
height: 5px;
background: #ffb6c1;
margin-top: 20px;
}
.hover-click-btn{
display: inline-block;
padding: 0.6em 1em;
background-color: #e3364a; /* 背景色 */
box-shadow: 0 5px 0 #ca1c30; /* 影の太さ・色 */
border-radius: 60px;
color: #fff;
cursor: pointer;
text-decoration: none; /* 文字の下線を消す */
}
/* ホバー時 */
.hover-click-btn:hover {
box-shadow: none;
transform: translateY(5px);
}
@media(min-width:768px){
.box-pastelblue-right {
position: absolute;
right: 0;
background-color: #fff;
border: solid 8px #e1f6ff;
height: 100%;
}
}
@media(max-width:768px){
.box-pastelblue-right {
border: solid 8px #e1f6ff;
}
}
@media(min-width:768px){
.box-pastelblue-left {
position: absolute;
left: 0;
background-color: #fff;
border: solid 8px #e1f6ff;
height: 100%;
}
.position-right{
position: absolute;
right: 0;
height: 100%;
}
}
@media(min-width:768px){
.box-gray-right {
position: absolute;
right: 0;
background-color: #fff;
border: solid 8px #d9d9d9;
height: 100%;
display: flex;
}
}
@media(max-width:768px){
.box-gray-right {
border: solid 8px #d9d9d9;
}
}
@media(max-width:768px){
.box-pastelblue-left {
border: solid 8px #e1f6ff;
}
}
.border-solid-sky-8{
border: solid 8px #e1f6ff;
height: 100%;
}
.border-solid-pastelpink-8{
border: solid 8px #ffebed;
height: 100%;
}
.border-solid-gray-8{
border: solid 8px #d9d9d9;
height: 100%;
}
.border-solid-skyblue-8 {
border: solid 8px #e1f6ff;
}
.border-solid-brightblue {
border: solid 2px #2c9bf0;
}
.hover-opacity-90:hover{
img{
opacity: 90%;
}
}
.circle-50px {
position: relative;
display: inline-block;
width: 50px;
height: 50px;
border-radius: 50%;
}
.sky-circle {
position: relative;
display: inline-block;
width: 100px;
height: 100px;
border-radius: 50%;
}
.sky-circle p {
position: absolute;
display: inline-block;
left: 0;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
width :100px;
text-align:center;
}
.circle-position-right {
position: absolute;
top: 3%;
right: -12%;
-ms-transform: translate(12%, -3%);
-webkit-transform: translate(12%, -3%);
transform: translate(12%, -3%);
z-index: 100;
}
.circle-position-right-2 {
position: absolute;
top: 3%;
right: -15%;
-ms-transform: translate(15%, -3%);
-webkit-transform: translate(15%, -3%);
transform: translate(15%, -3%);
z-index: 100;
}
@media (min-width:576px) {
.circle-position-right-md {
position: absolute;
top: 3%;
right: -10%;
-ms-transform: translate(10%, -3%);
-webkit-transform: translate(10%, -3%);
transform: translate(10%, -3%);
z-index: 100;
}
}
@media (max-width:576px) {
.circle-position-right-md,
.circle-position-left-15 {
position: absolute;
bottom: -20%;
left: -13%;
-ms-transform: translate(13%, 20%);
-webkit-transform: translate(13%, 20%);
transform: translate(13%, 20%);
z-index: 100;
}
}
@media (min-width:576px) {
.circle-position-left-md {
position: absolute;
top: 3%;
left: -25%;
-ms-transform: translate(25%, -3%);
-webkit-transform: translate(25%, -3%);
transform: translate(25%, -3%);
z-index: 100;
}
.circle-position-left-15 {
position: absolute;
top: 3%;
left: -15%;
-ms-transform: translate(15%, -3%);
-webkit-transform: translate(15%, -3%);
transform: translate(15%, -3%);
z-index: 100;
}
}
@media (max-width:576px) {
.circle-position-left-md {
position: absolute;
bottom: -20%;
right: -70%;
-ms-transform: translate(70%, 20%);
-webkit-transform: translate(70%, 20%);
transform: translate(70%, 20%);
z-index: 100;
}
}
.circle-position-left {
position: absolute;
top: 3%;
left: -25%;
-ms-transform: translate(25%, -3%);
-webkit-transform: translate(25%, -3%);
transform: translate(25%, -3%);
z-index: 100;
}
.circle-position-left-18 {
position: absolute;
top: 3%;
left: -18%;
-ms-transform: translate(18%, -3%);
-webkit-transform: translate(18%, -3%);
transform: translate(18%, -3%);
z-index: 100;
}
@media(max-width:576px) {
.circle-position-left-18 {
position: absolute;
top: 3%;
left: -10%;
-ms-transform: translate(10%, -3%);
-webkit-transform: translate(10%, -3%);
transform: translate(10%, -3%);
z-index: 100;
}
}
@media (min-width:1200px) {
.circle-position-left-18 {
position: absolute;
top: 3%;
left: -10%;
-ms-transform: translate(10%, -3%);
-webkit-transform: translate(10%, -3%);
transform: translate(10%, -3%);
z-index: 100;
}
}
.container {
display: flex;
align-items: stretch; /* 画像とセクションの高さを揃える */
}
.image-container, .section {
flex: 1;
padding: 20px;
border: 1px solid #000;
box-sizing: border-box;
}
.image-container amp-img {
max-width: 100%;
height: auto;
}
@media (min-width:768px) {
.triangle-left {
position: absolute;
left: 27%;
height: 0;
border-top: 80px solid transparent;
border-right: 40px solid #cecece;
border-bottom: 80px solid transparent;
}
}
.text-box {
width: 100%;
margin: 0 auto;
}
.point-box {
position: relative;
border: 2px solid #828282; /* 枠の太さ・種類・色 */
margin: 1.8em 1em 0 1em; /* 枠外の余白 */
padding: 5px;
}
.point-title {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: -22px; /* タイトルの位置を調整 */
background-color: #fff;
}
.heading-text-box {
position: relative;
border: 1px solid #828282;
margin: 1.2em 0 0.2em;
padding: 5px;
}
.heading-text {
position: absolute;
left: 5%;
transform: translateX(-5%);
top: -15px;
}
/* ドロップダウンメニュー */
.menu {
position: relative;
width: 100%;
height: 50px;
max-width: 1000px;
margin: 0 auto;
}
.menu > li {
display: flex;
height: 50px;
}
.menu__second-level > li a {
display: block;
background-color: #fff;
color: #3b0b06;
}
.title-text:hover {
color: #999;
}
ul.menu__second-level {
visibility: hidden;
opacity: 0;
z-index: 1;
}
.menu__second-level li {
border-top: 1px solid #111;
}
.menu__second-level li a:hover {
background: #b69e84;
}
/* floatクリア */
.menu:before,
.menu:after {
content: " ";
display: table;
}
.menu:after {
clear: both;
}
.menu {
zoom: 1;
}
li.menu__mega ul.menu__second-level {
position: absolute;
top: 85px;
left: 0;
box-sizing: border-box;
border-radius: 20px;
width: 100%;
padding: 20px 2%;
background: #fff;
-webkit-transition: all .2s ease;
transition: all .2s ease;
}
li.menu__mega:hover ul.menu__second-level {
top: 80px;
visibility: visible;
opacity: 1;
}
li.menu__mega ul.menu__second-level > li {
float: left;
width: 32%;
border: none;
}
li.menu__mega ul.menu__second-level > li:nth-child(3n+2) {
margin: 0 1%;
}
.transform-skew-15deg {
transform: skew(15deg, -15deg);
}
/* ▼ インスタグラデーションボタン ▼ */
.btn-social-long-insta {
color: #FFF;/*文字・アイコン色*/
border-radius: 7px;/*角丸に*/
position: relative;
display: inline-block;
height: 50px;/*高さ*/
width: 180px;/*幅*/
text-align: center;/*中身を中央寄せ*/
font-size: 18px;/*文字のサイズ*/
line-height: 50px;/*高さと合わせる*/
background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;/*グラデーション①*/
overflow: hidden;/*はみ出た部分を隠す*/
text-decoration:none;/*下線は消す*/
}
.btn-social-long-insta:before {
/*グラデーション②*/
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;/*全体を覆う*/
height: 100%;/*全体を覆う*/
background: linear-gradient(15deg, #ffdb2c, rgb(249, 118, 76) 25%, rgba(255, 77, 64, 0) 50%) no-repeat;
}
.btn-social-long-insta span {
/*テキスト*/
display:inline-block;
position: relative;
transition: .5s
}
.btn-social-long-insta:hover span {
/*ホバーで一周回転*/
-webkit-transform: rotateX(360deg);
transform: rotateX(360deg);
}
/* ▲ インスタグラデーションボタン ▲ */
/* ▼ 動画サイト用 ▼ */
.chapter-button {
color: #4c70cd;
cursor: pointer;
text-decoration: underline;
}
.video-wrap {
padding-bottom: 56.07%;
position: relative;
height: 0;
}
.video-wrap video{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* ▲ 動画サイト用 ▲ */
/* ポートフォリオ用 */
.main-visual{
max-width: 900px;
}
.main-visual,
.codefile {
margin: 0 auto;
}
.main-visual img,
.codefile img {
width: 100%;
}
/* @media (min-width: 721px) {
#portforio_contents .bg {
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #ffc0cb;
overflow: hidden;
z-index: -1;
pointer-events: none;
}
} */
.press-start-2p-regular {
font-family: "Press Start 2P", system-ui;
font-weight: 400;
font-style: normal;
}
.skill-section {
margin-bottom: 6rem;
}
.skill-section h2 {
margin-left: 3rem;
}
.skill-main-img {
margin-bottom: 3rem;
}
.slider img {
width: 600px;
height: 300px;
-o-object-fit: cover;
object-fit: cover;
}
.product {
margin-bottom: 6rem;
text-align: center;
}
.product-text {
display: inline-block;
text-align: left;
}
.header-icon-img {
width: 118px;
}
.header-icon-img img{
width: 100%;
margin-top: 3rem;
}
.contents img {
width: 100%;
}