@charset "UTF-8"; /* ---------------------------------------------------------- 飾り部品 ---------------------------------------------------------- */ /* ボタンの画像をマウスオーバーで光らせる /* このコードはInternet Explorerが9以前のバージョンの場合は正しく動作しません ------------------------------------------------------------*/ a:hover img { -webkit-opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50); /* IE lt 8 */ -ms-filter:"alpha(opacity=50)"; /* IE 8 */ opacity:0.5; } a img { -webkit-transition:opacity 0.3s ease-out; -moz-transition:opacity 0.3s ease-out; -ms-transition:opacity 0.3s ease-out; transition:opacity 0.3s ease-out; } /* ---------------------------------------------------------- いいねボタン ------------------------------------------------------------*/ .LikeSide { /*親div*/ position:relative; overflow:hidden; margin-top: 20px; } .LikeSide p { display:inline-block; vertical-align:top; /*縦方向の揃え位置を指定*/ } .LikeSide img { width: 32px; } /* ---------------------------------------------------------- ボタンレイアウト（共通） ------------------------------------------------------------*/ .button { position: relative; display: inline-block; padding: 0.2em 0.4em; text-decoration: none; color: #FFF; background: #fd9535;/*色*/ border-radius: 4px;/*角の丸み*/ box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.05); /* font-weight: bold; */ border: solid 2px #d27d00;/*線色*/ font-size: 12px; font-size: 1.2rem; } /*押したとき*/ .button:active { box-shadow: 0 0 2px rgba(0, 0, 0, 0.30); } .button:hover { cursor:pointer; } /* ---------------------------------------------------------- セレクトＢＯＸ ------------------------------------------------------------*/ /*
*/ .cp_ipselect { /* display: inline-block; */ position: relative; width: 100px; margin: 0; text-align: center; } .cp_sl06 { position: relative; font-family: inherit; /* background-color: transparent; */ width: 100px; padding: 5px 5px 5px 0; font-size: 14px; border-radius: 0; /* border: none; */ border-bottom: 1px solid rgba(0,0,0, 0.3); } .cp_sl06:focus { outline: none; border-bottom: 1px solid rgba(0,0,0, 0); } .cp_ipselect .cp_sl06 { appearance: none; -webkit-appearance:none } .cp_ipselect select::-ms-expand { display: none; } .cp_ipselect:after { position: absolute; top: 14px; right: 10px; width: 0; height: 0; padding: 0; content: ''; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid rgba(0, 0, 0, 0.3); pointer-events: none; } .cp_sl06_selectlabel { color: rgba(0,0,0, 0.5); font-size: 14px; font-weight: normal; position: absolute; pointer-events: none; left: 0; top: 5px; transition: 0.2s ease all; } .cp_sl06:focus ~ .cp_sl06_selectlabel, .cp_sl06:valid ~ .cp_sl06_selectlabel { color: #da3c41; top: -20px; transition: 0.2s ease all; font-size: 10px; } .cp_sl06_selectbar { position: relative; display: block; width: 100px; } .cp_sl06_selectbar:before, .cp_sl06_selectbar:after { content: ''; height: 2px; width: 0; bottom: 1px; position: absolute; background: #da3c41; transition: 0.2s ease all; } .cp_sl06_selectbar:before { left: 50%; } .cp_sl06_selectbar:after { right: 50%; } .cp_sl06:focus ~ .cp_sl06_selectbar:before, .cp_sl06:focus ~ .cp_sl06_selectbar:after { width: 50%; } .cp_sl06_highlight { position: absolute; top: 25%; left: 0; pointer-events: none; opacity: 0.5; } /* ---------------------------------------------------------- ラジオボタン ------------------------------------------------------------*/ .radioArea input[type="radio"] { width : 12pt; /* 大きさ：横 */ height : 12pt; /* 大きさ：縦 */ vertical-align: top; /* 並び位置 */ } /* --- チェックボックス直後のlabel --- */ .radioArea input[type="radio"] + label { padding : 0 4px; /* labelの余白 */ font-size : 10pt; /* labelの文字サイズ */ font-weight : bold; /* 文字太さ */ border : 1px solid #67ab23; /* labelの枠線 */ border-radius : 5px; /* labelの角丸 */ background : #ffffff; /* lebelの背景 */ cursor : pointer; /* カーソル設定 */ transition : .2s; /* なめらか変化 */ } /* --- 選択されたチェックボックス直後のlabel --- */ .radioArea input[type="radio"]:checked + label { background : #67ab23; /* lebelの背景 */ } /* --- 選択されていないチェックボックス直後のlabelにマウスが乗った --- */ .radioArea input[type="radio"]:not(:checked) + label:hover { background : rgba(103, 171, 35, 0.40); /* lebelの背景 */ } /* --- 検索全体のBOX --- */ .searchArea{ width : 290px; /* BOXの幅 */ height : 23px; /* BOXの高さ */ margin : auto; /* サンプルを中心に寄せ */ letter-spacing : 0.1em; /* 文字間隔 */ font-weight : bold; /* 太字 */ line-height : 0; /* 標準の行高さ */ } /* --- テキスト入力欄のSTYLE設定 --- */ .searchArea .searchText { display : block; /* ブロック化 */ float : left; /* 横並び */ box-sizing : border-box; /* 枠線,余白を含んだ長さ */ height : 23px; /* 入力の高さ */ width : 170px; /* 入力の幅 */ margin : 0; /* 外余白 */ padding : 0 11px; /* 内余白 */ border : 2px solid #007fff; /* 枠線　幅,実践,色 */ border-radius : 11px 0 0 11px; /* 左上下の角丸 */ color : #333; /* 文字色 */ outline : 0; /* 入力の薄い枠を非表示 */ font-size : 11px; /* フォントサイズ */ } /* --- 検索ボタン欄のSTYLE設定 --- */ .searchArea .searchButton { float : left; /* 横並び */ box-sizing : border-box; /* 枠線,余白を含んだ長さ */ height : 23px; /* 入力の高さ */ margin : 0; /* 外余白 */ padding : 6px 10px; /* 内余白 */ border : none; /* 枠線　幅,実践,色 */ border-radius : 0 11px 11px 0; /* 右上下の角丸 */ background : #007fff; /* ボタンの色 */ color : #fff; /* 文字色 */ cursor : pointer; /* カーソル設定 */ line-height : 11px; /* 1行の高さ */ font-size : 11px; /* フォントサイズ */ } fieldset { margin: 5px 0; padding: 2px 10px 10px 10px; border: 1px solid #777; } /* --- 検索ボタン欄にフォーカスか来たとき --- */ .searchArea .searchText:focus { background : #cfe7ff; /* フォーカス時の背景色 */ } /* --- 検索ボタン内のアイコンSTYLE設定 --- */ .searchArea .searchImg { display : inline-block; /* インラインブロック化 */ width : auto; /* 幅は高さに合わせる */ height : 11px; /* 画像の高さ */ margin : 0 3px 0 0; /* 余白 */ vertical-align : middle; /* 横の文字位置 */ } /* --- IEの入力エリア右側×消し -------------------------*/ .searchArea .searchText::-ms-clear { display : none; /* ×を消す */ } /* ---------------------------------------------------------- 目次風レイアウト ------------------------------------------------------------*/ .index dl, .index dt, .index dd { margin: 0; padding: 0; } .index dl { width: 90%; margin-left: 20px; } .index dt { float: left; } .index dt a { text-decoration: none; padding-right: 6px; background-color: #fff; } .index dd { margin-bottom: 5px; text-align: right; background: url("../images/"); background-repeat: repeat-x; background-position: left center; } .index dd a { text-decoration: none; padding-left: 6px; background-color: #fff; } /* ---------------------------------------------------------- レター風レイアウト ------------------------------------------------------------*/ .letter { padding: 1em; border: 1px solid #eee; border-right: 2px solid #eee; border-bottom: 2px solid #eee; } .letter p { font-size: 1.1em; line-height: 3.3em; padding-bottom: 0.25em; display: inline; border-bottom: 1px dotted #999; /* color: #000; /* 黒色　*/ } /* ---------------------------------------------------------- 縦書きレイアウト ------------------------------------------------------------*/ div.tate-area{ position:relative; display: block; width: 100%; height: 350px; margin: 0 auto; /*上下　左右*/ padding: 10px 50px 0 0; background-image: url("../images/wa-01_s.jpg"); /* 画像ファイルの指定 */ background-position: top right; background-size: cover; font-size:14pt; font-size:1.4em; border: 1px solid #dcdcdc; } div.tate-line{ float:right; width:1.05em; line-height:1.05em; margin-right:0.6em; margin-left:0.6em; padding-bottom:0.2em; font-family:'ヒラギノ角ゴ ProN','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ Pro','Hiragino Kaku Gothic Pro','メイリオ','Meiryo','ＭＳ ゴシック','MS Gothic','SimHei','HiraKakuProN-W3','STHeitiJ-Medium','TakaoExゴシック','TakaoExGothic','MotoyaLCedar','Droid Sans Japanese','Droid Sans Fallback',monospace; word-wrap:break-word; direction:ltr; } #main .mainInner .tate-line h2 { font-size: 22px; font-size: 2.2rem; text-align: center; margin: 30px auto; color: #000; /* 黒色　*/ padding: 15px 10px; } .tate-line span.tate-kuto{ display:block; width:0.4em; line-height:0.1em !Important; margin-bottom:0.9em; margin-left:0.6em !Important; } .tate-line span.tate-cho{ display:block; -moz-transform:matrix(0, 1, 1, 0, 0, 0); -webkit-transform:matrix(0, 1, 1, 0, 0, 0); -o-transform:matrix(0, 1, 1, 0, 0, 0); transform:matrix(0, 1, 1, 0, 0, 0); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1, mirror=1); } .tate-line span.tate-komoji{ display:block; line-height:0.75em !Important; margin-bottom:0.3em; margin-left:0.11em !Important; } .tate-line span.tate-kakko{ display:block; -moz-transform:rotate(90deg); -webkit-transform:rotate(90deg); -o-transform:rotate(90deg); transform:rotate(90deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); } div.tate-separator{ clear:both; height:2em; } /* フォントサイズ変更時のフォント位置アジャスト用 */ .tate-line .font08{ font-size:8pt; } .tate-line .font10{ font-size:10pt; } .tate-line .font12{ font-size:12pt; } .tate-line .font14{ font-size:14pt; } .tate-line .font18{ font-size:18pt; } .tate-line .font24{ font-size:24pt; } .tate-line h1{ font-size:24pt; font-weight:bold; } .tate-line h2{ font-size:18pt; font-weight:bold; } .tate-line h3{ font-size:14pt; font-weight:bold; } .tate-line h4{ font-size:12pt; font-weight:bold; } .tate-line .font08 , .tate-line .font10 , .tate-line .font12 , .tate-line .font14 , .tate-line .font18 , .tate-line .font24 , .tate-line h1 , .tate-line h2 , .tate-line h3 , .tate-line h4 , .tate-line font { display:block; position:relative; left:50%; width:1em; line-height:1.05em; margin-left:-0.5em; } /* ---------------------------------------------------------- LINE風吹き出し ------------------------------------------------------------*/ /*以下、①背景色など*/ .line-bc { padding: 20px 10px; /* max-width: 450px; */ max-width: 100%; margin: 15px auto; text-align: right; font-size: 14px; background: #7da4cd; border-radius:10px; -webkit-border-radius:10px; -moz-border-radius:10px; } /*以下、②左側のコメント*/ .balloon6 { width: 100%; margin: 10px 0; overflow: hidden; } .balloon6 .faceicon { float: left; margin-right: -50px; width: 40px; } .balloon6 .faceicon img{ width: 100%; height: auto; border-radius: 50%; } .balloon6 .chatting { width: 100%; text-align: left; } .says { display: inline-block; position: relative; margin: 0 0 0 50px; padding: 10px; max-width: 450px; border-radius: 12px; background: #edf1ee; } .says:after { content: ""; display: inline-block; position: absolute; top: 3px; left: -19px; border: 8px solid transparent; border-right: 18px solid #edf1ee; -ms-transform: rotate(35deg); -webkit-transform: rotate(35deg); transform: rotate(35deg); } .says p { margin: 0; padding: 0; } /*以下、③右側の緑コメント*/ .mycomment { margin: 10px 0; } .mycomment p{ display: inline-block; position: relative; margin: 0 50px 0 0; padding: 8px; max-width: 250px; border-radius: 12px; background: #30e852; font-size: 15px; text-align: left; } .mycomment p:after { content: ""; position: absolute; top: 3px; right: -19px; border: 8px solid transparent; border-left: 18px solid #30e852; -ms-transform: rotate(-35deg); -webkit-transform: rotate(-35deg); transform: rotate(-35deg); } /* ---------------------------------------------------------- 写真に文字入りの付箋をつける このコードはInternet Explorerが9以前のバージョンの場合は正しく動作しません ------------------------------------------------------------*/ .tag{ /*親div*/ position:relative; overflow:hidden; display:inline-block;} .tag:after{ position:sbsolute; background:#FF339A; text-align:center; color:#fff; width:150px; padding:5px 10px; box-shadow:0.1px 3px #333; top:15px; right:-50px; transform:rotate(40deg); content:"おすすめ！♪";} /* ---------------------------------------------------------- テキストを点滅させる ------------------------------------------------------------*/ .blinking{ -webkit-animation:blink 1.5s ease-in-out infinite alternate; -moz-animation:blink 1.5s ease-in-out infinite alternate; animation:blink 1.5s ease-in-out infinite alternate; font-size:20px; background-color: #ff0000; /*背景色：赤*/ } .blinking2{ -webkit-animation:blink 1.5s ease-in-out infinite alternate; -moz-animation:blink 1.5s ease-in-out infinite alternate; animation:blink 1.5s ease-in-out infinite alternate; font-size:20px; } @-webkit-keyframes blink{ 0% {opacity:0;} 100% {opacity:1;} } @-moz-keyframes blink{ 0% {opacity:0;} 100% {opacity:1;} } @keyframes blink{ 0% {opacity:0;} 100% {opacity:1;} } /* ---------------------------------------------------------- 画像に文字を配置する ------------------------------------------------------------*/ /*　文字を画像の相対配置　*/ .ImgOnChar { /*親div*/ position: relative;/*相対配置*/ } .ImgOnChar p { position: absolute;/*絶対配置*/ color: Blackwhite;/*文字は白に*/ font-weight: bold; /*太字に*/ font-size: 2em;/*サイズ2倍*/ font-family :Quicksand, sans-serif;/*Google Font*/ top: 0; left: 0; } .ImgOnChar img { width: 100%; } /* ---------------------------------------------------------- 文字を画像の中心に配置 ------------------------------------------------------------*/ .ImgOnChar2 { /*親div*/ position: absolute;/*文字を画像の中心*/ } .ImgOnChar2 p { position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); margin:0; /*上下左右*/ padding:0; } .ImgOnChar2 img { width: 100%; } /* ---------------------------------------------------------- 画像にアイコンを乗せる（アイコンは半透明） ------------------------------------------------------------*/ .ImgOnChar3 {/*親div*/ position: relative;/*文字を画像の中心*/ } .ImgOnChar3 .fa { position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); margin:0; /*上下左右*/ padding:0; color: rgba(255, 255, 255, 0.6); font-size: 80px; } .ImgOnChar3 img { width: 100%; } /* ---------------------------------------------------------- 付箋スタイル ------------------------------------------------------------- HTML
------------------------------------------------------------*/ .fusen{ width:300px; /*幅はお好きなサイズに*/ position:relative; z-index:0; } .fusen ul li { font-size: 0.9em; margin: 1.6em 0; padding: 1em; position: relative; /* グラデーションで折り目がついた感じに */ background: linear-gradient(to right, #ffffcc 0%, #f1f1c1 0.5%, #f1f1c1 13%, #ffffcc 16%); } .fusen ul li::after{ /* ドロップシャドウを少し斜めに配置して、立体感を出す */ content: ""; display: block; position: absolute; z-index: -1; bottom: 5px; right: 0; height: 15px; width: 99%; background: rgba(0,0,0,0.5); box-shadow: 0 5px 5px rgba(0,0,0,0.3); transform: rotate(2deg); } .fusen ul li:nth-child(odd) { /* 奇数番のli */ background: linear-gradient(to right, #ffffcc 0%, #f1f1c1 0.5%, #f1f1c1 13%, #ffffcc 16%); } .fusen ul li:nth-child(even) { /* 偶数番のli */ background: linear-gradient(to right, #FDF8E6 0%, #F5ECDA 0.5%, #F5ECDA 13%, #FDF8E6 16%); margin: 1.6em 0em !important; } .fusen h3 { width:250px; height:250px; background:#ffe5e5; font-size:12pt; color:#1f3134; text-align:center; -webkit-box-shadow:1px 1px 1px 1px rgba(0,0,0,0.1),20px 10px 0 -5px #ffe5e5,20px 10px 1px -4px rgba(0,0,0,0.2); -moz-box-shadow:1px 1px 1px 1px rgba(0,0,0,0.1),20px 10px 0 -5px #ffe5e5,20px 10px 1px -4px rgba(0,0,0,0.2); box-shadow:1px 1px 1px 1px rgba(0,0,0,0.1),20px 10px 0 -5px #ffe5e5,20px 10px 1px -4px rgba(0,0,0,0.2); padding:30px; } /* ---------------------------------------------------------- エラー用 ---------------------------------------------------------- */ div.alert { background-color:#FFEFEF; margin:0 0 1em 0; padding:10px; color:#C25338; border:1px solid #D4440D; line-height:1.5; clear:both; background-repeat:no-repeat; background-position:5px 5px; } div.alert span { width:48px; height:48px; position:relative; top:-5px; left:-5px; display:block; text-indent:-9999px; float:left; } html>body div.alert { background-image:url(../images/exclamation.png); } html>body div.alert span { visibility:hidden; } /* OK用 */ div.accepted { background-color:#e2ffaa; border-color:#76CC0B; color:#3A9805; } div.accepted span { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/content/img/css/accepted_48.png', sizingMethod='scale'); } html>body div.accepted { background-image:url(/content/img/css/accepted_48.png); } html>body div.accepted span { visibility:hidden; } /* 警告用 */ div.warning { background-color:#ffff80; border-color:#E5A500; color:#CC7600; } div.warning span { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/content/img/css/warning_48.png', sizingMethod='scale'); } html>body div.warning { background-image:url(/content/img/css/warning_48.png); } html>body div.warning span { visibility:hidden; } .tips-inline-block { text-align: center; } .tips-inline-block li { display: inline-block; width: 120px; height: 40px; margin: 0 3px; border: 1px solid #555; background-color: #c93; line-height: 40px; } .tips-inline-block li a { display: block; width: 100%; } /* ---------------------------------------------------------- パンくずリスト ---------------------------------------------------------- */ .breadcrumb { margin-left:0; padding-left:0; } .breadcrumb li { position: relative; display:inline-block;/*横に並ぶように*/ list-style: none; font-weight: bold;/*太字*/ margin-right: 6px; } .breadcrumb li:after { content: ""; position: absolute; top: 7px; right: -19px; border-style: solid; border-color: transparent; border-left-color: #e2e2e2; border-width: 7px 12px; width: 0; height: 0; } .breadcrumb li:last-child:after { content: none; } .breadcrumb li a { display: inline-block; padding: 0 7px; height: 28px; line-height: 28px; text-decoration: none; color: #9b9b9b; background: #e2e2e2; font-size: 13px; border-radius: 3px; transition: 0.3s; } .breadcrumb li a:hover { transform: translateY(-3px); } /* ---------------------------------------------------------- テキストリンク ---------------------------------------------------------- */ .cp_block { margin: 5em auto; text-align: center; } .cp_textlink05 { position: relative; display: inline-block; padding: 0.1em 0.3em; text-decoration: none; color: #FFFF00; } .cp_textlink05:after, .cp_textlink05::before { position: absolute; bottom: 0; content: ''; transition: all 0.3s ease; } .cp_textlink05:after { right: 50%; left: 50%; width: 0; height: 100%; border-radius: 3px; background-color: #FFFF00; } .cp_textlink05::before { left: 0; width: 100%; height: calc(100% - 2px); border-top: 1px solid #FFFF00; border-bottom: 1px solid #FFFF00; } .cp_textlink05:hover:after { bottom: 0; left: 0; width: 100%; height: 100%; opacity: 0.3; } .cp_textlink05:hover::before { right: 50%; left: 50%; width: 0%; } /* ---------------------------------------------------------- ＢＯＸの定義 実線で囲むだけ ------------------------------------------------------------- HTML

ここに文章

---------------------------------------------------------- */ .box1 { padding: 0.5em 1em; margin: 2em 0; font-weight: bold; border: solid 3px #000000; } .box1 p { margin: 0; padding: 0; } /* ---------------------------------------------------------- 角丸 ---------------------------------------------------------- */ .box2 { padding: 0.5em 1em; margin: 2em 0; font-weight: bold; color: #6091d3;/*文字色*/ background: #FFF; border: solid 3px #6091d3;/*線*/ border-radius: 10px;/*角の丸み*/ } .box2 p { margin: 0; padding: 0; } /* ---------------------------------------------------------- 背景塗りつぶし ---------------------------------------------------------- */ .box3 { padding: 0.5em 1em; margin: 2em 0; color: #2c2c2f; background: #cde4ff;/*背景色*/ } .box3 p { margin: 0; padding: 0; } /* ---------------------------------------------------------- 上下にだけ線 ---------------------------------------------------------- */ .box4{ padding: 8px 19px; margin: 2em 0; color: #2c2c2f; background: #cde4ff; border-top: solid 5px #5989cf; border-bottom: solid 5px #5989cf; } .box4 p { margin: 0; padding: 0; } /* ---------------------------------------------------------- 二重線の枠 ---------------------------------------------------------- */ .box5 { padding: 0.5em 1em; margin: 2em 0; border: double 5px #4ec4d3; } .box5 p { margin: 0; padding: 0; } /* ---------------------------------------------------------- 破線のボックス ---------------------------------------------------------- */ .box6 { padding: 0.5em 1em; margin: 2em 0; background: #f0f7ff; border: dashed 2px #5b8bd0;/*点線*/ } .box6 p { margin: 0; padding: 0; } /* ---------------------------------------------------------- 左右二重線 ---------------------------------------------------------- */ .box7{ padding: 0.5em 1em; margin: 2em 0; color: #474747; background: whitesmoke;/*背景色*/ border-left: double 7px #4ec4d3;/*左線*/ border-right: double 7px #4ec4d3;/*右線*/ } .box7 p { margin: 0; padding: 0; } /* ---------------------------------------------------------- 左にだけ太線 ---------------------------------------------------------- */ .box8 { padding: 0.5em 1em; margin: 2em 0; color: #232323; background: #fff8e8; border-left: solid 10px #ffc06e; } .box8 p { margin: 0; padding: 0; } /* ---------------------------------------------------------- 上にだけ太線 ---------------------------------------------------------- */ .box9 { padding: 0.5em 1em; margin: 2em 0; color: #ff7d6e; background: #ffebe9; border-top: solid 10px #ff7d6e; } .box9 p { margin: 0; padding: 0; } /* ---------------------------------------------------------- 影をつけた場合 ---------------------------------------------------------- */ .box10 { padding: 0.5em 1em; margin: 2em 0; color: #00BCD4; background: #e4fcff;/*背景色*/ border-top: solid 6px #1dc1d6; box-shadow: 0 3px 4px rgba(0, 0, 0, 0.32);/*影*/ } .box10 p { margin: 0; padding: 0; } /* ---------------------------------------------------------- スマートなデザインに ---------------------------------------------------------- */ .box11{ padding: 0.5em 1em; margin: 2em 0; color: #5d627b; background: white; border-top: solid 5px #5d627b; box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22); } .box11 p { margin: 0; padding: 0; } /* ---------------------------------------------------------- 分厚いボード風 ---------------------------------------------------------- */ .box12{ padding: 0.5em 1em; margin: 2em 0; color: #5989cf; background: #c6e4ff; border-bottom: solid 6px #aac5de; border-radius: 9px; } .box12 p { margin: 0; padding: 0; } /* ---------------------------------------------------------- 影をつけた場合 ---------------------------------------------------------- */ .box13 { padding: 0.5em 1em; margin: 2em 0; color: #FFF; background: #6eb7ff; border-bottom: solid 6px #3f87ce; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25); border-radius: 9px; } .box13 p { margin: 0; padding: 0; } /* ---------------------------------------------------------- 布風 ---------------------------------------------------------- */ .box14{ padding: 0.2em 0.5em; margin: 2em 0; background: #d6ebff; box-shadow: 0px 0px 0px 10px #d6ebff; border: dashed 2px white; } .box14 p { margin: 0; padding: 0; } /* ---------------------------------------------------------- ピンクver ---------------------------------------------------------- */ .box15 { padding: 0.2em 0.5em; margin: 2em 0; color: #565656; background: #ffeaea; box-shadow: 0px 0px 0px 10px #ffeaea; border: dashed 2px #ffc3c3; border-radius: 8px; } .box15 p { margin: 0; padding: 0; } /* ---------------------------------------------------------- ストライプ ---------------------------------------------------------- */ .box16{ padding: 0.5em 1em; margin: 2em 0; background: -webkit-repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px); background: repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px); } .box16 p { margin: 0; padding: 0; } /* ---------------------------------------------------------- 交差線 ---------------------------------------------------------- */ .box17{ margin:2em 0; position: relative; padding: 0.5em 1.5em; border-top: solid 2px black; border-bottom: solid 2px black; } .box17:before, .box17:after{ content: ''; position: absolute; top: -10px; width: 2px; height: -webkit-calc(100% + 20px); height: calc(100% + 20px); background-color: black; } .box17:before {left: 10px;} .box17:after {right: 10px;} .box17 p { margin: 0; padding: 0; } /* ---------------------------------------------------------- 角に円形 ---------------------------------------------------------- */ .box18{ margin:2em 0; position: relative; padding: 0.25em 1em; border: solid 2px #ffcb8a; border-radius: 3px 0 3px 0; } .box18:before,.box18:after { content: ''; position: absolute; width:10px; height: 10px; border: solid 2px #ffcb8a; border-radius: 50%; } .box18:after { top:-12px; left:-12px; } .box18:before { bottom:-12px; right:-12px; } .box18 p { margin: 0; padding: 0; } /* ---------------------------------------------------------- カギカッコ ---------------------------------------------------------- */ .box19 { position: relative; padding:0.25em 1em; } .box19:before,.box19:after{ content:''; width: 20px; height: 30px; position: absolute; display: inline-block; } .box19:before{ border-left: solid 1px #5767bf; border-top: solid 1px #5767bf; top:0; left: 0; } .box19:after{ border-right: solid 1px #5767bf; border-bottom: solid 1px #5767bf; bottom:0; right: 0; } .box19 p { margin: 0; padding: 0; } /* ---------------------------------------------------------- 点線の大括弧 ---------------------------------------------------------- */ .box20 { position: relative; padding: 0.25em 1em; margin: 2em 0; top: 0; background: #efefef; } .box20:before, .box20:after{ position: absolute; top: 0; content:''; width: 10px; height: 100%; display: inline-block; box-sizing: border-box; } .box20:before{ border-left: dotted 2px #15adc1; border-top: dotted 2px #15adc1; border-bottom: dotted 2px #15adc1; left: 0; } .box20:after{ border-top: dotted 2px #15adc1; border-right: dotted 2px #15adc1; border-bottom: dotted 2px #15adc1; right: 0; } .box20 p { margin: 0; padding: 0; } /* ---------------------------------------------------------- グラデーション ---------------------------------------------------------- */ .box21{ padding: 0.5em 1em; background: -moz-linear-gradient(#ffb03c, #ff708d); background: -webkit-linear-gradient(#ffb03c, #ff708d); background: linear-gradient(to right, #ffb03c, #ff708d); color: #FFF; } .box21 p { margin: 0; padding: 0; } /* ---------------------------------------------------------- 紙風 ---------------------------------------------------------- */ .box22{ padding: 0.5em 1em; margin: 1em 0; background: #f4f4f4; border-left: solid 6px #5bb7ae; box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.33); } .box22 p { margin: 0; padding: 0; } /* ---------------------------------------------------------- 考えごと風 ---------------------------------------------------------- */ .box23 { position: relative; margin: 2em 0 2em 40px; padding: 8px 15px; background: #fff0c6; border-radius: 30px; } .box23:before{font-family: FontAwesome; content: "\f111"; position: absolute; font-size: 15px; left: -40px; bottom: 0; color: #fff0c6; } .box23:after{ font-family: FontAwesome; content: "\f111"; position: absolute; font-size: 23px; left: -23px; bottom: 0; color: #fff0c6; } .box23 p { margin: 0; padding: 0; } /* ---------------------------------------------------------- 吹き出し ---------------------------------------------------------- */ .box24 { position: relative; padding: 0.5em 0.7em; margin: 2em 0; background: #e6f4ff; color: #5c98d4; font-weight: bold; } .box24:after { position: absolute; content: ''; top: 100%; left: 30px; border: 15px solid transparent; border-top: 15px solid #e6f4ff; width: 0; height: 0; } .box24 p { margin: 0; padding: 0; } /* ---------------------------------------------------------- めくれたテープ風 ---------------------------------------------------------- */ .box25{ position: relative; background: #fff0cd; box-shadow: 0px 0px 0px 5px #fff0cd; border: dashed 2px white; padding: 0.2em 0.5em; color: #454545; } .box25:after{ position: absolute; content: ''; right: -7px; top: -7px; border-width: 0 15px 15px 0; border-style: solid; border-color: #ffdb88 #fff #ffdb88; box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.15); } .box25 p { margin: 0; padding: 0; } /* ---------------------------------------------------------- 枠の途中にタイトル ---------------------------------------------------------- */ .box26 { position: relative; margin: 2em 0; padding: 0.5em 1em; border: solid 3px #95ccff; border-radius: 8px; } .box26 .box-title { position: absolute; display: inline-block; top: -13px; left: 10px; padding: 0 9px; line-height: 1; font-size: 19px; background: #FFF; color: #95ccff; font-weight: bold; } .box26 p { margin: 0; padding: 0; } /* ---------------------------------------------------------- ラベルをつけたようなデザイン ---------------------------------------------------------- */ .box27 { position: relative; margin: 2em 0; padding: 0.5em 1em; border: solid 3px #62c1ce; } .box27 .box-title { position: absolute; display: inline-block; top: -27px; left: -3px; padding: 0 9px; height: 25px; line-height: 25px; font-size: 17px; background: #62c1ce; color: #ffffff; font-weight: bold; border-radius: 5px 5px 0 0; } .box27 p { margin: 0; padding: 0; } /* ---------------------------------------------------------- ボックス内にラベル ---------------------------------------------------------- */ .box28 { position: relative; margin: 2em 0; padding: 25px 10px 7px; border: solid 2px #FFC107; } .box28 .box-title { position: absolute; display: inline-block; top: -2px; left: -2px; padding: 0 9px; height: 25px; line-height: 25px; font-size: 17px; background: #FFC107; color: #ffffff; font-weight: bold; } .box28 p { margin: 0; padding: 0; } /* ---------------------------------------------------------- タイトルを横いっぱいに広げた場合 ---------------------------------------------------------- */ .box29 { margin: 2em 0; background: #dcefff; } .box29 .box-title { font-size: 1.2em; background: #5fb3f5; padding: 4px; text-align: center; color: #FFF; font-weight: bold; letter-spacing: 0.05em; } .box29 p { padding: 15px 20px; margin: 0; } /* ---------------------------------------------------------- タイトルを横いっぱいに広げる、さらに影をつけた場合 ---------------------------------------------------------- */ .box30 { margin: 2em 0; background: #f1f1f1; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22); } .box30 .box-title { font-size: 1.2em; background: #5fc2f5; padding: 4px; text-align: center; color: #FFF; font-weight: bold; letter-spacing: 0.05em; } .box30 p { padding: 15px 20px; margin: 0; } /* --- ヘッダー画像 -------------------------------------------------*/ .box31 { position : relative; /* タイトル用に親要素定義 */ box-sizing : border-box; /* 罫線・余白も含む大きさ */ max-width : 100%; /* BOXの最大横幅 */ /* background : #fff; /* BOXの背景色 */ margin : 30px 0px 10px 0px; padding : 33px 10px 25px 10px; /* BOX内の余白 */ border : 3px solid #f8d9aa; /* BOXの枠線 */ border-radius: 10px;/*角の丸み*/ } .box31 .hedimg img { position : relative; /* タイトル用に親要素定義 */ display : block; width : 150px; height : auto; margin-left : auto; margin-right : auto; padding : 10px 15px 15px 10px; /* BOX内の余白 */ background :#f8d9aa; /* BOXの背景色 */ border-radius: 10px;/*角の丸み*/ } /* --- タイトル部分の定義 ----------------------------------------*/ .box31::before { position : absolute; /* 親からの相対位置の定義 */ display : inline-block; /* インラインボックス定義 */ box-sizing : border-box; /* 罫線・余白も含む大きさ */ line-height : 1; /* 1行の高さを初期化 */ background : #ee9612; /* タイトル背景色 */ color : #ffffff; /* タイトルの文字色 */ content : attr(title); /* タイトルに[title]を表示 */ font-weight : bold; /* タイトルは太字 */ padding : 8px 15px; /* タイトル内の余白 */ top : -17px; /* タイトル上位置はマイナス*/ left : 16px; /* タイトル右位置は1文字分 */ border-radius : 16px; /* タイトルの角丸 */ font-size : 14px; /* タイトルの文字サイズ */ } .box32{ /* background-color: #fff; /* 背景色 */ border: 1px solid #ccc; /* 線の太さ・種類・色 */ box-shadow:1px 1px 6px 0px #ccc; -moz-box-shadow:1px 1px 6px 0px #ccc; -webkit-box-shadow:1px 1px 6px 0px #ccc; -o-box-shadow:1px 1px 6px 0px #ccc; margin: 20px 5px; /* 外側の余白 上下・左右 */ padding: 20px 5px 10px 5px; /* 内側の余白 上・右・下・左 */ position: relative; border-radius: 10px;/*角の丸み*/ z-index: 0; } .box32:after{ background-color: #d9ccb3; /* マステ部分の色1 */ background-image: linear-gradient(45deg, #dfd4be 25%, transparent 25%, transparent 75%, #dfd4be 75%, #dfd4be), linear-gradient(45deg, #dfd4be 25%, transparent 25%, transparent 75%, #dfd4be 75%, #dfd4be); /* マステ部分の色2 */ background-position: 0 0, 12px 12px; background-size: 24px 24px; border-left: 2px dotted rgba(255,255,255,0.9); border-right: 2px dotted rgba(255,255,255,0.9); box-shadow: 0 0 5px rgba(255,255,255,0.5); content : attr(title); /* タイトルに[title]を表示 */ display: block; margin: 0 0 10px 0; /* 外側の余白 上・右・下・左 */ padding: 5px 20px; /* 内側の余白 上下・左右 */ color: #fff; /* マステ部分文字色 */ text-align: center; position: absolute; top: -20px; left: 20px; transform: rotate(-3deg); -moz-transform: rotate(-3deg); -webkit-transform: rotate(-3deg); -o-transform: rotate(-3deg); } .box32 p { padding: 15px 20px; margin: 0; } .flame09 { margin: 2em auto; padding: 1em; width: 100%; background-color: #ffefd5; box-shadow: 0 0 5px 1.5px #a9a9a9; } .flame16{ margin: 2em auto; padding: 1em; width: 100%; background-color: #ffceb2; color: #606060; box-shadow: 0 0 5px 1px #b2b2b2; border-radius: 10px; } /* ---------------------------------------------------------- タブ（ラジオボタン） ------------------------------------------------------------- html

サンプル

タブ1

---------------------------------------------------------- */ /* --- タブ（ラジオボタン）のエリア ------------------------ */ #tabArea{ line-height : 1; /* 1行の高さ */ letter-spacing : 0; /* 文字間 */ text-align : center; /* 文字位置は中央 */ } /* --- ラジオボタン ---------------------------------------- */ #tabArea input[type="radio"] { display : none; /* ラジオボタン非表示 */ } /* --- ラジオボタン直後のlabel ----------------------------- */ #tabArea input[type="radio"] + label { display : inline-block; position : relative; padding : 6px 10px; /* labelの余白 */ font-size : 12pt; /* タブの文字サイズ */ font-weight : bold; /* タブは太文字 */ border : 3px solid #999; /* 未選択タブのの枠線 */ border-bottom : none; /* 下罫線は消す */ border-radius : 5px 5px 0 0; /* タブの上左右角丸 */ margin : 0 1px; /* タブ間隔 */ background : #fff; /* 未選択タブの背景色 */ color : #666; /* 未選択タブの文字色 */ } /* --- 選択されたラジオボタン直後のlabel ------------------- */ #tabArea input[type="radio"]:checked + label { border-color : #4682B4; /* 選択タブの枠線 */ color : #4682B4; /* 選択タブの文字色 */ cursor : default; /* デフォルトカーソル */ z-index : 2; /* 重なりを最前面へ */ } /* --- 未選択ラジオボタン直後のlabelにマウスが乗った ------- */ #tabArea input[type="radio"]:not(:checked) + label:hover { background : #b4cee2; /* カーソルタブの背景 */ cursor : pointer; /* リンクカーソル */ } /* --- タブ下の本体エリア ---------------------------------- */ .tabBody{ position : relative; border : 3px solid #4682B4; /* 本体の枠線 */ background : #fff; /* 本体の背景色 */ margin-top : -3px; /* タブと罫線分重ねる */ z-index : 1; /* 未選択タブより全面 */ } /* --- ランキング表示エリア ---------------------------------- */ .rankDsp{ display : inline-block; position : absolute; width : 40px; } /* --- 星（★）の採点表示エリア ----------------------------------- html
-------------------------------------------------------------- */ .rateoya { height: 100px; /* 高さ */ } .rate { position : relative; /* 指定した分だけ相対的に移動 */ font-size: 100px; /* フォントサイズ */ letter-spacing : 0px; /* 文字間隔 */ } .rate:before{ position: absolute; /* 親要素を基準 */ display: inline-block; /* ブロック要素 */ color: #999999; /* ★の色 */ white-space:nowrap; /* 改行不可 */ top: 0; /* 上限より表示 */ left: 0; /* 左端より表示 */ line-height:1em; /* 高さを指定 */ content:"★★★★★★"; /* ★の指定 */ } .rate:after{ position: absolute; /* 親要素を基準 */ display: inline-block; /* ブロック要素 */ color: #ffff1a; /* ★の色 */ white-space:nowrap; /* 改行不可 */ top: 0; /* 上限より表示 */ left: 0; /* 左端より表示 */ line-height:1em; /* 高さを指定 */ overflow:hidden; /* オーバーフロー部分は非表示 */ width: 140px; /* 評価★の幅 */ content:"★★★★★★"; /* ★の指定 */ } /* --- マウスが要素に乗ったとき吹き出しを表示 ---------------------- html
マウスを乗せてください 吹き出しが表示される>
-------------------------------------------------------------- */ .balloonoya { position : relative; /* 指定した分だけ相対的に移動 */ } .balloonoya:hover .balloon { display: inline; /* インライン要素として表示 */ } .balloon { position : absolute; /* 親要素を基準 */ display: none; /* 要素を非表示 */ padding: 2px; /* テキストの前後の余白 */ background-color: rgba(233, 145, 45,1); /* 背景色（透明度） */ width:180px; /* 吹き出し全体の幅 */ left : 0; /* 表示位置 */ top : 100%; /* 表示位置 */ margin-top : 10px; /* 表示位置 */ font-size: 80%; /* 文字サイズ */ } .balloon:after{ border-bottom: 30px solid rgba(233, 145, 45,1); /* 吹き出し口の高さ・色 */ border-left: 10px solid transparent; /* 吹き出し口の幅１／２ */ border-right: 10px solid transparent; /* 吹き出し口の幅１／２ */ top: -30px; /* 吹き出し口の位置調整 */ left : 5%; /* 吹き出し口の横位置 */ content: ""; /* コンテンツの挿入 */ position: absolute; /* 親要素を基準 */ } /* ---------------------------------------------------------- HTMLのヘッダー＆フッター固定CSS（スクロール対応） ------------------------------------------------------------- ---------------------------------------------------------- */ /* === BODYのpaddingを調整する ============================== */ body{ padding-top : 90px; /* ヘッダーの高さに合わせる */ padding-bottom : 90px; /* フッターの高さに合わせる */ } /* === ヘッダー ============================================= */ .headerStyle{ position : fixed; top : 0; left : 0; right : 0; height : 90px; background : linear-gradient(#990000, #ff6c6c); z-index : 10; text-align : center; font-weight : bold; } .headerStyle a{ color : #fff; } /* === フッター ============================================= */ .footerStyle{ position : fixed; bottom : 0; left : 0; right : 0; height : 90px; background : linear-gradient(#55d955, #003300); z-index : 10; text-align : center; font-weight : bold; } .footerStyle .copy { top : 0; font-size : 12px; font-size : 1.2rem; color : #fff; } .footerStyle a{ color : #fff; } /* === 文字（大） =========================================== */ .hdStrBig{ font-size : 20px; line-height : 50px; color : #fff; } /* === 文字（小） =========================================== */ .hdStrSmall{ font-size : 14px; line-height : 30px; color : #fff; } /* === ヘッダー、フッターの移動ボタン ======================= */ .hdBtnStyle{ display : inline-block; position : absolute; right : 10px; cursor : pointer; font-size : 12px; line-height : 12px; border : 1px solid #ccc; padding : 3px; background : rgba(255, 255, 255, .5); border-radius: 3px; } #hdBtnArea{ bottom : 5px; /* ヘッダーはボタンを下寄せにする */ } #ftBtnArea{ top : 5px; /* フッターはボタンを上寄せにする */ } /* === ヘッダー、フッターの移動ボタンにフォーカスされた時 === */ .hdBtnStyle:hover{ background : #fff; } /* ---------------------------------------------------------- アナログ時計 ---------------------------------------------------------- */ #clocks { position : relative; top : 10px; left : 25px; width : 150px; height : 150px; } .clock { position: absolute; } /* 拡大画像の周囲にある白い枠線の太さをカスタマイズする場合 ---------------------------------------------------------- */ #lightbox .lb-container { padding: 3px; } /* 拡大画像と白い枠線の表示がずれる場合、以下の定義をしてください */ /*#lightbox .lb-container { padding: 0px; }*/ /*#lightbox .lb-outerContainer { padding: 6px; }*/ /* ---------------------------------------------------------- アニメーション ---------------------------------------------------------- */ /*
*/ .items{ margin:10px auto; color: #FF5252; font-size:3em; } /*鼓動*/ .Heart1{ animation: anime1 3s reverse infinite; } @keyframes anime1{ 0% { transform: scale(1); } 60% { transform: scale(1); } 70% { transform: scale(1.3); } 80% { transform: scale(1); } 90% { transform: scale(1.3); } 100% { transform: scale(1); } } /*膨らむ*/ .Heart2{ animation: anime2 1s alternate infinite; } @keyframes anime2{ 0% { transform: scale(0.2); } 100% { transform: scale(1); } } /*バウンド*/ .Heart3{ animation: anime3 0.2s alternate infinite; } @keyframes anime3{ 0% {transform: translateY(0px);} 100% {transform: translateY(-10px);} } /*回転*/ .Heart4{ animation: anime4 1.5s alternate infinite; } @keyframes anime4{ 0% {transform: rotateY(0deg);} 100% {transform: rotateY(360deg);} } /*色変化*/ .Heart5{ animation: anime5 1.5s alternate infinite; } @keyframes anime5{ 0% {color:#FF5252;} 100% {color:#40C4FF;} } /*色変化2*/ .Heart6{ animation: anime6 2s alternate infinite; } @keyframes anime6{ 0% {color:#FF5252;} 20% {color:#EEFF41;} 40% {color:#FF9E80;} 60% {color:#FF9100;} 80% {color:#00E676;} 100% {color:#40C4FF;} } /* ---------------------------------------------------------- マウスホバーで、キャプションを追加表示 ---------------------------------------------------------- */ /*
sample86
sample86
Read More
*/ @import url(https://fonts.googleapis.com/css?family=Raleway:500); .snip1397 { font-family: 'Raleway', Arial, sans-serif; position: relative; overflow: hidden; margin: 10px; /* min-width: 230px;*/ max-width: 320px; width: auto; background: #2980b9; text-align: left; color: #000000; box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); font-size: 16px; } .snip1397 * { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .snip1397 > img, .snip1397 .image img { -webkit-transform: scale(1.05); transform: scale(1.05); max-width: 100%; } .snip1397 > img { vertical-align: top; position: relative; -webkit-filter: blur(5px); filter: blur(5px); opacity: 0.7; } .snip1397 .image { position: absolute; top: 0; bottom: 0; right: 0; left: 0; overflow: hidden; -webkit-transition-delay: 0.2s; transition-delay: 0.2s; box-shadow: 0px -1px 5px rgba(0, 0, 0, 0.1), 0px -1px 0 rgba(255, 255, 255, 0.2); } .snip1397 .image img { position: absolute; width: 100%; bottom: 0; left: 0; } .snip1397 .read-more { display: block; opacity: 0; -webkit-transform: translateX(-20px); transform: translateX(-20px); line-height: 48px; text-transform: uppercase; letter-spacing: 1px; padding: 0 15px; color: #ffffff; right: 0; top: 0; font-weight: 500; position: absolute; -webkit-transition-delay: 0s; transition-delay: 0s; } .snip1397 a { left: 0; right: 0; top: 0; bottom: 0; position: absolute; z-index: 1; } .snip1397:hover .read-more, .snip1397.hover .read-more { opacity: 1; -webkit-transform: translateX(0px); transform: translateX(0px); -webkit-transition-delay: 0.2s; transition-delay: 0.2s; } .snip1397:hover .image, .snip1397.hover .image { top: 50px; -webkit-transition-delay: 0s; transition-delay: 0s; } /* ---------------------------------------------------------- イメージにラインを加え、マウスホバーで写真をズームアップ ---------------------------------------------------------- */ /*
sample77

Piff Jenkins

Weekends don't count unless you spend them doing something completely pointless.

Read More
*/ @import url(https://fonts.googleapis.com/css?family=Raleway:400,500,800); figure.snip1436 { font-family: 'Raleway', Arial, sans-serif; position: relative; overflow: hidden; margin: 0; min-width: 160px; height: auto; width: auto; color: #ffffff; text-align: center; background-color: #07090c; font-size: 12px; /* border-radius: 15px; */ } @media screen and (min-width: 641px) { figure.snip1436 { font-family: 'Raleway', Arial, sans-serif; position: relative; overflow: hidden; /* margin: 10px;*/ min-width: 180px; max-width: 320px; max-height: 230px; height: auto; width: auto; color: #ffffff; text-align: center; background-color: #07090c; font-size: 18px; /* border-radius: 15px;*/ } } figure.snip1436 * { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 0.35s ease; transition: all 0.35s ease; } figure.snip1436 img { max-width: 100%; -webkit-transition-delay: 0.2s; transition-delay: 0.2s; backface-visibility: hidden; } figure.snip1436 figcaption { position: absolute; top: 50%; left: 0; width: 100%; -webkit-transform: scale(0.5) translate(0%, -50%); transform: scale(0.5) translate(0%, -50%); -webkit-transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; transform-origin: 50% 0%; z-index: 1; opacity: 0; padding: 0 15px; } @media screen and (min-width: 641px) { figure.snip1436 figcaption { position: absolute; top: 50%; left: 0; width: 100%; -webkit-transform: scale(0.5) translate(0%, -50%); transform: scale(0.5) translate(0%, -50%); -webkit-transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; transform-origin: 50% 0%; z-index: 1; opacity: 0; padding: 0 30px; } } figure.snip1436 h3, figure.snip1436 p { line-height: 1.5em; } figure.snip1436 h3 { margin: 0; font-weight: 600; text-transform: uppercase; } figure.snip1436 p { font-size: 0.8em; font-weight: 300; margin: 0 0 15px 0; } @media screen and (min-width: 641px) { figure.snip1436 p { font-size: 0.8em; font-weight: 500; margin: 0 0 15px; } } figure.snip1436 .read-more { border: 2px solid #ffffff; padding: 0.5em 1em; font-size: 0.8em; text-decoration: none; color: #ffffff; display: inline-block; } figure.snip1436 .read-more:hover { background-color: #ffffff; color: #000000; } figure.snip1436:hover img, figure.snip1436.hover img { -webkit-animation: snip1436 0.45s linear forwards; animation: snip1436 0.45s linear forwards; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } figure.snip1436:hover figcaption, figure.snip1436.hover figcaption { -webkit-transform: scale(1) translate(0, -50%); transform: scale(1) translate(0, -50%); opacity: 1; -webkit-transition-delay: 0.35s; transition-delay: 0.35s; } @-webkit-keyframes snip1436 { 50% { -webkit-transform: scale(0.8) translateX(0%); transform: scale(0.8) translateX(0%); opacity: 0.5; } 100% { -webkit-transform: scale(0.8) translateX(-150%); transform: scale(0.8) translateX(-150%); opacity: 0.5; } } @keyframes snip1436 { 50% { -webkit-transform: scale(0.8) translateX(0%); transform: scale(0.8) translateX(0%); opacity: 0.5; } 100% { -webkit-transform: scale(0.8) translateX(-150%); transform: scale(0.8) translateX(-150%); opacity: 0.5; } } /* ---------------------------------------------------------- アコーディオン ---------------------------------------------------------- */ /*HTML

■クリックすると展開されます！

*/ /*jQuery $(function() { $('.accordion_kakunou').hide(); $('.accordion_switch').click(function() { $('.accordion_switch').toggleClass("open").next().slideToggle(400); }); }); */ .accordion { background-color: #E1F9E8; } .accordion_switch_color { position: relative; cursor: pointer; color: #FFF; background-color: #02A03A; font-size: 16px; font-weight: bold; letter-spacing: 0.1em; padding: 5px 0 5px 5px; } .accordion_switch_color:before { position: absolute; display: block; content: ""; -webkit-transform: rotate(45deg); transform: rotate(45deg); top: 50%; right: 15px; width: 10px; height: 10px; background-color: #FFF; margin-top: -8px; } .accordion_switch_color:after { position: absolute; display: block; content: ""; -webkit-transform: rotate(45deg); transform: rotate(45deg); top: 50%; right: 15px; width: 10px; height: 10px; background-color: #02A03A; margin-top: -13px; } .accordion_kakunou_color { font-size: 14px; background-color: #E1F9E8; margin: 5px 0 20px 27px; padding-bottom: 3px; } .accordion_switch_color.open:before { position: absolute; display: block; content: ""; -webkit-transform: rotate(45deg); transform: rotate(45deg); top: 50%; right: 15px; width: 10px; height: 10px; background-color: #FFF; margin-top: -4px; } .accordion_switch_color.open:after { position: absolute; display: block; content: ""; -webkit-transform: rotate(45deg); transform: rotate(45deg); top: 50%; right: 15px; width: 10px; height: 10px; background-color: #02A03A; margin-top: 1px; } /* ---------------------------------------------------------- もっと見るボタン ---------------------------------------------------------- */ .readMoreBtn_block { margin: 2em auto; text-align: center; } .readMoreBtn { position: relative; display: inline-block; padding: 0.1em 0.3em; text-decoration: none; color: #FFFF00; } .readMoreBtn:after, .readMoreBtn::before { position: absolute; bottom: 0; content: ''; transition: all 0.3s ease; } .readMoreBtn:after { right: 50%; left: 50%; width: 0; height: 100%; border-radius: 3px; background-color: #FFFF00; } .readMoreBtn::before { left: 0; width: 100%; height: calc(100% - 2px); border-top: 1px solid #FFFF00; border-bottom: 1px solid #FFFF00; } .readMoreBtn:hover:after { bottom: 0; left: 0; width: 100%; height: 100%; opacity: 0.3; } .readMoreBtn:hover::before { right: 50%; left: 50%; width: 0%; } /* ---------------------------------------------------------- タブメニュー ---------------------------------------------------------- */ /* ----- タブメニュー1 ----- */ /*HTML

タブメニュー ①

タブで表示するコンテンツを切り替えるメニューのサンプルです。

img

ナスとトマトのスパゲティ

ダミーの文章です。ダミーの文章です。ダミーの文章です。ダミーの文章です。ダミーの文章です。ダミーの文章です。

img

ナスとトマトのスパゲティ

￥0,000

20XX.00.00
ダミーの文章です。ダミーの文章です。ダミーの文章です。ダミーの文章です。
▲タブメニューに戻る
*/ .clearfix:after { content: ""; clear: both; display: block; } .news-wrap > dl > dd > span{ background:#E74C3C; color:#fff; } p.p-message { margin: 0 0 15px; padding: 6px; color: #808080; font-size: 0.9em; line-height: 1.4em; border: 1px dotted #56b329; } @media screen and (min-width: 641px) { p.p-message { margin: 0 0 20px; } } #tabmenu01 h2.h2-tab { margin: 10px 0 15px; padding: 2px 0 2px 12px; color: #808080; font-size: 1.1em; line-height: 1.2em; font-weight: normal; border-left: 4px solid #56b329; border-bottom: 2px solid #56b329; text-align: left; } @media screen and (min-width: 641px) { #tabmenu01 h2.h2-tab { font-size: 1.4em; } } #tabmenu01 p.p-tab { margin: 0; color: #808080; font-size: 1em; line-height: 1em; } @media screen and (min-width: 641px) { #tabmenu01 p.p-tab { font-size: 1.2em; } } .tabmenu1 { width: 100%; } .tabmenu1 input { display: none; } #tab-1-1:checked ~ .contents2, #tab-1-1:checked ~ .contents3, #tab-1-1:checked ~ .contents4, #tab-1-1:checked ~ .contents5, #tab-1-2:checked ~ .contents1, #tab-1-2:checked ~ .contents3, #tab-1-2:checked ~ .contents4, #tab-1-2:checked ~ .contents5, #tab-1-3:checked ~ .contents1, #tab-1-3:checked ~ .contents2, #tab-1-3:checked ~ .contents4, #tab-1-3:checked ~ .contents5, #tab-1-4:checked ~ .contents1, #tab-1-4:checked ~ .contents2, #tab-1-4:checked ~ .contents3, #tab-1-4:checked ~ .contents5, #tab-1-5:checked ~ .contents1, #tab-1-5:checked ~ .contents2, #tab-1-5:checked ~ .contents3, #tab-1-5:checked ~ .contents4 { display: none; } .tabmenu1 .tab-list ul { display: flex; } .tabmenu1 .tab-list ul li { margin: 0 5px 0 0; } .tabmenu1 .tab-list ul li:last-child { margin: 0; } .tabmenu1 .tab-list label { display: block; padding: 6px 10px; background-color: #a0d18d; border-radius: 8px 8px 0 0; color: #fff; cursor: pointer; } #tab-1-1:checked ~ .tab-list label.tab-list-1, #tab-1-2:checked ~ .tab-list label.tab-list-2, #tab-1-3:checked ~ .tab-list label.tab-list-3, #tab-1-4:checked ~ .tab-list label.tab-list-4, #tab-1-5:checked ~ .tab-list label.tab-list-5 { background-color: #56b329; } .tabmenu1 .contents1, .tabmenu1 .contents2, .tabmenu1 .contents3, .tabmenu1 .contents4 { display: flex; flex-wrap: wrap; padding: 15px 15px 0; border: 2px solid #56b329; text-align: center; } @media screen and (min-width: 641px) { .tabmenu1 .contents1, .tabmenu1 .contents2, .tabmenu1 .contents3, .tabmenu1 .contents4 { padding: 30px 30px 0; } } .tabmenu1 .pickup-box { width: 100%; padding-bottom: 15px; float: left; border-radius: 15px; /*角丸*/ } @media screen and (min-width: 641px) { .tabmenu1 .pickup-box { width: 31%; margin-right: 3.5%; padding-bottom: 30px; border-radius: 15px; /*角丸*/ } } @media screen and (min-width: 641px) { .tabmenu1 .pickup-box:nth-of-type(2n) { margin-right: 3.5%; } .tabmenu1 .pickup-box:nth-of-type(3n) { margin-right: 0; } } .tabmenu1 .pickup-box img { width: 100%; vertical-align: top; } #main .mainInner .tabmenu1 .pickup-box h2, #main .mainInner .tabmenu1 .menu-box h2 { color: #000; } .tabmenu1 .pickup-box p.menu { margin: 5px 0 0; font-size: 1em; font-weight: bold; color: #56b329; } @media screen and (min-width: 641px) { .tabmenu1 .pickup-box p.menu { margin: 10px 0 5px; font-size: 1em; } } .tabmenu1 .pickup-box p.txt { margin: 0; padding-top: 5px; font-size: 0.8em; line-height: 1.2em; text-align: justify; border-top: 2px dotted #c0aa8c; } @media screen and (min-width: 641px) { .tabmenu1 .pickup-box p.txt { padding-top: 10px; font-size: 0.8em; } } .tabmenu1 .menu-box { position: relative; width: 47%; margin-right: 6%; margin-bottom: 2%; padding-bottom: 15px; float: left; border: 1px solid #fff; border-radius: 15px; /*角丸*/ } @media screen and (min-width: 641px) { .tabmenu1 .menu-box { width: 22%; margin-right: 4%; padding-bottom: 30px; border: 1px solid #fff; } } .new { width: 50px; height: 50px; color: #ffffff; background-color: red; display: flex; justify-content: center; align-items: center; font-size: 1.5rem; border-radius: 50%; position: absolute; top: -10px; left: -10px; transform: rotate(-20deg); -moz-transform: rotate(-20deg); -webkit-transform: rotate(-20deg); } .tabmenu1 .menu-box:nth-of-type(2n) { margin-right: 0; } @media screen and (min-width: 641px) { .tabmenu1 .menu-box:nth-of-type(2n) { margin-right: 4%; } .tabmenu1 .menu-box:nth-of-type(4n) { margin-right: 0; } } .tabmenu1 .menu-box img, .tabmenu1 .menu-box video { width: 100%; border-radius: 15px 15px 0px 0px; vertical-align: top; } .tabmenu1 .menu-box p.date, .tabmenu1 .menu-box p.seq, .tabmenu1 .menu-box p.menu{ margin: 10px 0 0; padding-left: 4px; text-align: left; font-size: 0.8em; border-left: 3px solid #56b329; } .tabmenu1 .menu-box p.title{ margin: 10px 0 0; padding-left: 4px; text-align: center; font-size: 0.8em; border-left: 3px solid #56b329; border-bottom: solid 2px #b20000; /* ボーダー下部のスタイルを実線で指定する */ } .tabmenu1 .menu-box p.price { margin: 5px 0 0; padding-top: 5px; text-align: right; font-size: 0.8em; line-height: 1em; border-top: 1px dashed #56b329; } .tabmenu1 .menu-box p.remarks { margin: 10px 0 0; padding-left: 4px; height: 50px; overflow:hidden; text-align: left; font-size: 0.8em; border-left: 3px solid #56b329; } .tabmenu1 .menu-box p.menulist { margin: 10px 0 0; padding-left: 4px; height: 50px; overflow:hidden; text-align: left; font-size: 0.8em; border-left: 3px solid #56b329; } .tabmenu1 .contents5 { padding: 15px; border: 2px solid #56b329; } @media screen and (min-width: 641px) { .tabmenu1 .contents5 { padding: 30px; } } .tabmenu1 .contents5 dl { border-top: 1px dashed #ccc; font-size: 0.9em; } .tabmenu1 .contents5 dl dt { display: inline-block; margin: 10px 0 0; /* 上・左右・下 */ padding: 4px; color: #fff; background-color: #c0aa8c; font-size: 0.9em; } @media screen and (min-width: 641px) { .tabmenu1 .contents5 dl dt { display: block; float: left; margin: 0; /* 上下・左右 */ padding: 10px 10px; /* 上下・左右 */ color: #fff; font-size: 1em; } } .tabmenu1 .contents5 dl dd { padding: 5px 0 10px 0; border-bottom: 1px dashed #ccc; } @media screen and (min-width: 641px) { .tabmenu1 .contents5 dl dd { padding: 10px 0 10px 9em; } } .tabmenu1 .back { text-align: center; background-color: #56b329; } .tabmenu1 .back a { display: block; padding: 7px; font-size: 0.9em; color: #fff; text-decoration: none; } /* ----- タブメニュー2 ----- */ #tabmenu02 h2.h2-tab { margin: 10px 0 15px; padding: 2px 0 2px 12px; color: #808080; font-size: 1.1em; line-height: 1.2em; font-weight: normal; border-left: 4px solid #56b329; border-bottom: 2px solid #56b329; text-align: left; } @media screen and (min-width: 641px) { #tabmenu02 h2.h2-tab { font-size: 1.4em; } } #tabmenu02 p.p-tab { margin: 0; color: #808080; font-size: 1em; line-height: 1em; } @media screen and (min-width: 641px) { #tabmenu02 p.p-tab { font-size: 1.2em; } } .tabmenu2 { width: 100%; } .tabmenu2 input { display: none; } #tab-2-1:checked ~ .contents2, #tab-2-1:checked ~ .contents3, #tab-2-1:checked ~ .contents4, #tab-2-1:checked ~ .contents5, #tab-2-2:checked ~ .contents1, #tab-2-2:checked ~ .contents3, #tab-2-2:checked ~ .contents4, #tab-2-2:checked ~ .contents5, #tab-2-3:checked ~ .contents1, #tab-2-3:checked ~ .contents2, #tab-2-3:checked ~ .contents4, #tab-2-3:checked ~ .contents5, #tab-2-4:checked ~ .contents1, #tab-2-4:checked ~ .contents2, #tab-2-4:checked ~ .contents3, #tab-2-4:checked ~ .contents5, #tab-2-5:checked ~ .contents1, #tab-2-5:checked ~ .contents2, #tab-2-5:checked ~ .contents3, #tab-2-5:checked ~ .contents4 { display: none; } .tabmenu2 .tab-list ul { display: flex; } .tabmenu2 .tab-list ul li { margin: 0 5px 0 0; } .tabmenu2 .tab-list ul li:last-child { margin: 0; } .tabmenu2 .tab-list label { display: block; padding: 6px 10px; background-color: #a0d18d; border-radius: 8px 8px 0 0; color: #fff; cursor: pointer; } #tab-2-1:checked ~ .tab-list label.tab-list-1, #tab-2-2:checked ~ .tab-list label.tab-list-2, #tab-2-2:checked ~ .tab-list label.tab-list-3, #tab-2-2:checked ~ .tab-list label.tab-list-4, #tab-2-3:checked ~ .tab-list label.tab-list-5 { background-color: #56b329; } .tabmenu2 .contents1, .tabmenu2 .contents2, .tabmenu2 .contents3, .tabmenu2 .contents4 { display: flex; flex-wrap: wrap; padding: 15px 15px 0; border: 2px solid #56b329; text-align: center; } @media screen and (min-width: 641px) { .tabmenu2 .contents1, .tabmenu2 .contents2, .tabmenu2 .contents3, .tabmenu2 .contents4 { padding: 30px 30px 0; } } .tabmenu2 .pickup-box img { width: 100%; /* border-radius: 15px; /*角丸*/ border-radius: 15px 15px 0px 0px; vertical-align: top; } #main .mainInner .tabmenu2 .pickup-box h2, #main .mainInner .tabmenu2 .menu-box h2 { color: #000; } .tabmenu2 .pickup-box p.menu { margin: 5px 0 0; font-size: 1em; font-weight: bold; color: #56b329; } @media screen and (min-width: 641px) { .tabmenu2 .pickup-box p.menu { margin: 10px 0 5px; font-size: 1em; } } .tabmenu2 .pickup-box p.txt { margin: 0; padding-top: 5px; font-size: 0.8em; line-height: 1.4em; text-align: justify; border-top: 2px dotted #c0aa8c; } @media screen and (min-width: 641px) { .tabmenu2 .pickup-box p.txt { padding-top: 10px; font-size: 0.8em; } } .tabmenu2 .menu-box { width: 47%; margin-right: 6%; margin-bottom: 2%; padding-bottom: 15px; border-radius: 15px; border: 1px solid #fff; float: left; } @media screen and (min-width: 641px) { .tabmenu2 .menu-box { width: 22%; margin-right: 4%; padding-bottom: 30px; border: 1px solid #fff; border-radius: 15px; } } .tabmenu2 .menu-box:nth-of-type(2n) { margin-right: 0; } @media screen and (min-width: 641px) { .tabmenu2 .menu-box:nth-of-type(2n) { margin-right: 4%; } .tabmenu2 .menu-box:nth-of-type(4n) { margin-right: 0; } } .tabmenu2 .menu-box img, .tabmenu2 .menu-box video { width: 100%; /* border-radius: 15px; */ border-radius: 15px 15px 0px 0px; vertical-align: top; } .tabmenu1 .rankDsp img, .tabmenu1 .LikeSide img, .tabmenu2 .rankDsp img, .tabmenu2 .LikeSide img, .tabmenuB .LikeSide img { border-radius: 0; } .tabmenu2 .menu-box p.menu { margin: 10px 0 0; padding-left: 4px; text-align: left; font-size: 0.8em; border-left: 3px solid #56b329; } .tabmenu2 .menu-box p.price { margin: 5px 0 0; padding-top: 5px; text-align: right; font-size: 0.8em; line-height: 1em; border-top: 1px dashed #56b329; } .tabmenu2 .contents5 { padding: 15px; border: 2px solid #56b329; } @media screen and (min-width: 641px) { .tabmenu2 .contents5 { padding: 30px; } } .tabmenu2 .contents5 dl { border-top: 1px dashed #ccc; font-size: 0.9em; } .tabmenu2 .contents5 dl dt { display: inline-block; margin: 10px 0 0; /* 上・左右・下 */ padding: 4px; color: #fff; background-color: #c0aa8c; font-size: 0.9em; } @media screen and (min-width: 641px) { .tabmenu2 .contents5 dl dt { display: block; float: left; margin: 0; /* 上下・左右 */ padding: 10px 10px; /* 上下・左右 */ color: #fff; font-size: 1em; } } .tabmenu2 .contents5 dl dd { padding: 5px 0 10px 0; border-bottom: 1px dashed #ccc; } @media screen and (min-width: 641px) { .tabmenu2 .contents5 dl dd { padding: 10px 0 10px 9em; } } .tabmenu2 .back { text-align: center; background-color: #56b329; } .tabmenu2 .back a { display: block; padding: 7px; font-size: 0.9em; color: #fff; text-decoration: none; } /* ----- タブメニューＢ ----- */ /*html

タブメニュー ②

ボタンで表示するコンテンツを切り替えるメニューのサンプルです。

img

マグロ（中トロ）

img

握り盛り合わせ

img

マグロのお造り（中トロ）

*/ .tabmenuB { width: 100%; } .tabmenuB input { display: none; } #tabmenuB h2.h2-tabmenuB { margin: 10px 0 15px; padding: 2px 0 2px 12px; color: #808080; font-size: 1.1em; line-height: 1.2em; font-weight: normal; border-left: 4px solid #56b329; border-bottom: 2px solid #56b329; text-align: left; } @media screen and (min-width: 641px) { h2.h2-tabmenuB { font-size: 1.4em; } } #tabB-1-1:checked ~ .contents2, #tabB-1-1:checked ~ .contents3, #tabB-1-1:checked ~ .contents4, #tabB-1-1:checked ~ .contents5, #tabB-1-1:checked ~ .contents6, #tabB-1-1:checked ~ .contents7, #tabB-1-1:checked ~ .contents8, #tabB-1-1:checked ~ .contents9, #tabB-1-1:checked ~ .contents10, #tabB-1-1:checked ~ .contents11, #tabB-1-1:checked ~ .contents12, #tabB-1-1:checked ~ .contents13, #tabB-1-1:checked ~ .contents99, #tabB-1-2:checked ~ .contents1, #tabB-1-2:checked ~ .contents3, #tabB-1-2:checked ~ .contents4, #tabB-1-2:checked ~ .contents5, #tabB-1-2:checked ~ .contents6, #tabB-1-2:checked ~ .contents7, #tabB-1-2:checked ~ .contents8, #tabB-1-2:checked ~ .contents9, #tabB-1-2:checked ~ .contents10, #tabB-1-2:checked ~ .contents11, #tabB-1-2:checked ~ .contents12, #tabB-1-2:checked ~ .contents13, #tabB-1-2:checked ~ .contents99, #tabB-1-3:checked ~ .contents1, #tabB-1-3:checked ~ .contents2, #tabB-1-3:checked ~ .contents4, #tabB-1-3:checked ~ .contents5, #tabB-1-3:checked ~ .contents6, #tabB-1-3:checked ~ .contents7, #tabB-1-3:checked ~ .contents8, #tabB-1-3:checked ~ .contents9, #tabB-1-3:checked ~ .contents10, #tabB-1-3:checked ~ .contents11, #tabB-1-3:checked ~ .contents12, #tabB-1-3:checked ~ .contents13, #tabB-1-3:checked ~ .contents99, #tabB-1-4:checked ~ .contents1, #tabB-1-4:checked ~ .contents2, #tabB-1-4:checked ~ .contents3, #tabB-1-4:checked ~ .contents5, #tabB-1-4:checked ~ .contents6, #tabB-1-4:checked ~ .contents7, #tabB-1-4:checked ~ .contents8, #tabB-1-4:checked ~ .contents9, #tabB-1-4:checked ~ .contents10, #tabB-1-4:checked ~ .contents11, #tabB-1-4:checked ~ .contents12, #tabB-1-4:checked ~ .contents13, #tabB-1-4:checked ~ .contents99, #tabB-1-5:checked ~ .contents1, #tabB-1-5:checked ~ .contents2, #tabB-1-5:checked ~ .contents3, #tabB-1-5:checked ~ .contents4, #tabB-1-5:checked ~ .contents6, #tabB-1-5:checked ~ .contents7, #tabB-1-5:checked ~ .contents8, #tabB-1-5:checked ~ .contents9, #tabB-1-5:checked ~ .contents10, #tabB-1-5:checked ~ .contents11, #tabB-1-5:checked ~ .contents12, #tabB-1-5:checked ~ .contents13, #tabB-1-5:checked ~ .contents99, #tabB-1-6:checked ~ .contents1, #tabB-1-6:checked ~ .contents2, #tabB-1-6:checked ~ .contents3, #tabB-1-6:checked ~ .contents4, #tabB-1-6:checked ~ .contents5, #tabB-1-6:checked ~ .contents7, #tabB-1-6:checked ~ .contents8, #tabB-1-6:checked ~ .contents9, #tabB-1-6:checked ~ .contents10, #tabB-1-6:checked ~ .contents11, #tabB-1-6:checked ~ .contents12, #tabB-1-6:checked ~ .contents13, #tabB-1-6:checked ~ .contents99, #tabB-1-7:checked ~ .contents1, #tabB-1-7:checked ~ .contents2, #tabB-1-7:checked ~ .contents3, #tabB-1-7:checked ~ .contents4, #tabB-1-7:checked ~ .contents5, #tabB-1-7:checked ~ .contents6, #tabB-1-7:checked ~ .contents8, #tabB-1-7:checked ~ .contents9, #tabB-1-7:checked ~ .contents10, #tabB-1-7:checked ~ .contents11, #tabB-1-7:checked ~ .contents12, #tabB-1-7:checked ~ .contents13, #tabB-1-7:checked ~ .contents99, #tabB-1-8:checked ~ .contents1, #tabB-1-8:checked ~ .contents2, #tabB-1-8:checked ~ .contents3, #tabB-1-8:checked ~ .contents4, #tabB-1-8:checked ~ .contents5, #tabB-1-8:checked ~ .contents6, #tabB-1-8:checked ~ .contents7, #tabB-1-8:checked ~ .contents9, #tabB-1-8:checked ~ .contents10, #tabB-1-8:checked ~ .contents11, #tabB-1-8:checked ~ .contents12, #tabB-1-8:checked ~ .contents13, #tabB-1-8:checked ~ .contents99, #tabB-1-9:checked ~ .contents1, #tabB-1-9:checked ~ .contents2, #tabB-1-9:checked ~ .contents3, #tabB-1-9:checked ~ .contents4, #tabB-1-9:checked ~ .contents5, #tabB-1-9:checked ~ .contents6, #tabB-1-9:checked ~ .contents7, #tabB-1-9:checked ~ .contents8, #tabB-1-9:checked ~ .contents10, #tabB-1-9:checked ~ .contents11, #tabB-1-9:checked ~ .contents12, #tabB-1-9:checked ~ .contents13, #tabB-1-9:checked ~ .contents99, #tabB-1-10:checked ~ .contents1, #tabB-1-10:checked ~ .contents2, #tabB-1-10:checked ~ .contents3, #tabB-1-10:checked ~ .contents4, #tabB-1-10:checked ~ .contents5, #tabB-1-10:checked ~ .contents6, #tabB-1-10:checked ~ .contents7, #tabB-1-10:checked ~ .contents8, #tabB-1-10:checked ~ .contents9, #tabB-1-10:checked ~ .contents11, #tabB-1-10:checked ~ .contents12, #tabB-1-10:checked ~ .contents13, #tabB-1-10:checked ~ .contents99, #tabB-1-11:checked ~ .contents1, #tabB-1-11:checked ~ .contents2, #tabB-1-11:checked ~ .contents3, #tabB-1-11:checked ~ .contents4, #tabB-1-11:checked ~ .contents5, #tabB-1-11:checked ~ .contents6, #tabB-1-11:checked ~ .contents7, #tabB-1-11:checked ~ .contents8, #tabB-1-11:checked ~ .contents9, #tabB-1-11:checked ~ .contents10, #tabB-1-11:checked ~ .contents12, #tabB-1-11:checked ~ .contents13, #tabB-1-11:checked ~ .contents99, #tabB-1-12:checked ~ .contents1, #tabB-1-12:checked ~ .contents2, #tabB-1-12:checked ~ .contents3, #tabB-1-12:checked ~ .contents4, #tabB-1-12:checked ~ .contents5, #tabB-1-12:checked ~ .contents6, #tabB-1-12:checked ~ .contents7, #tabB-1-12:checked ~ .contents8, #tabB-1-12:checked ~ .contents9, #tabB-1-12:checked ~ .contents10, #tabB-1-12:checked ~ .contents11, #tabB-1-12:checked ~ .contents13, #tabB-1-12:checked ~ .contents99, #tabB-1-13:checked ~ .contents1, #tabB-1-13:checked ~ .contents2, #tabB-1-13:checked ~ .contents3, #tabB-1-13:checked ~ .contents4, #tabB-1-13:checked ~ .contents5, #tabB-1-13:checked ~ .contents6, #tabB-1-13:checked ~ .contents7, #tabB-1-13:checked ~ .contents8, #tabB-1-13:checked ~ .contents9, #tabB-1-13:checked ~ .contents10, #tabB-1-13:checked ~ .contents11, #tabB-1-13:checked ~ .contents12, #tabB-1-13:checked ~ .contents99, #tabB-1-99:checked ~ .contents1, #tabB-1-99:checked ~ .contents2, #tabB-1-99:checked ~ .contents3, #tabB-1-99:checked ~ .contents4, #tabB-1-99:checked ~ .contents5, #tabB-1-99:checked ~ .contents6, #tabB-1-99:checked ~ .contents7, #tabB-1-99:checked ~ .contents8, #tabB-1-99:checked ~ .contents9, #tabB-1-99:checked ~ .contents10, #tabB-1-99:checked ~ .contents11, #tabB-1-99:checked ~ .contents12, #tabB-1-99:checked ~ .contents13 { display: none; } .tabmenuB .tab-list ul { display : -webkit-box; /* old Android */ display : -webkit-flex; /* Safari etc. */ display : -ms-flexbox; /* IE10 */ display: flex; } .tabmenuB .tab-list ul li { margin: 0 5px 0 0; /*上・右・下・左*/ } @media screen and (min-width: 641px) { .tabmenuB .tab-list ul li { margin: 0 10px 0 0; /*上・右・下・左*/ } } .tabmenuB .tab-list label { display: block; padding: 3px 6px; background-color: #a9a9a9; border-radius: 8px; color: #fff; font-size: 0.6em; cursor: pointer; } @media screen and (min-width: 641px) { .tabmenuB .tab-list label { display: block; padding: 6px 12px; background-color: #a9a9a9; border-radius: 8px; color: #fff; font-size: 1em; cursor: pointer; } } #tabB-1-1:checked ~ .tab-list label.tabB-list-1, #tabB-1-2:checked ~ .tab-list label.tabB-list-2, #tabB-1-3:checked ~ .tab-list label.tabB-list-3, #tabB-1-4:checked ~ .tab-list label.tabB-list-4, #tabB-1-5:checked ~ .tab-list label.tabB-list-5, #tabB-1-6:checked ~ .tab-list label.tabB-list-6, #tabB-1-7:checked ~ .tab-list label.tabB-list-7, #tabB-1-8:checked ~ .tab-list label.tabB-list-8, #tabB-1-9:checked ~ .tab-list label.tabB-list-9, #tabB-1-10:checked ~ .tab-list label.tabB-list-10, #tabB-1-11:checked ~ .tab-list label.tabB-list-11, #tabB-1-12:checked ~ .tab-list label.tabB-list-12, #tabB-1-13:checked ~ .tab-list label.tabB-list-13, #tabB-1-99:checked ~ .tab-list label.tabB-list-99 { background-color: #000; color: #d8ca99; } .tabmenuB .box { width: 48%; margin-top: 2%; margin-right: 2%; padding: 0; float: left; border: 1px solid #fff; } @media screen and (min-width: 641px) { .tabmenuB .box { width: 32%; margin-top: 2%; margin-right: 2%; /* padding-top: 20px;*/ float: left; border: 1px solid #fff; } } .tabmenuB .box:nth-of-type(2n) { margin-right: 0; } @media screen and (min-width: 641px) { .tabmenuB .box:nth-of-type(2n) { margin-right: 2%; } .tabmenuB .box:nth-of-type(3n) { margin-right: 0; } } .tabmenuB .box img, .tabmenuB .box video { width: 100%; } .tabmenuB .box p.menu { margin: 5px 0 0; font-size: 1em; font-weight: bold; color: #56b329; text-align: center; } @media screen and (min-width: 641px) { .tabmenuB .box p.menu { margin: 10px 0 5px; font-size: 1em; } } .tabmenuB .box p.txt { margin: 0; padding-top: 5px; font-size: 0.8em; line-height: 1.4em; text-align: justify; border-top: 2px dotted #c0aa8c; } @media screen and (min-width: 641px) { .tabmenuB .box p.txt { padding-top: 10px; font-size: 0.8em; } }