@charset "utf-8";
body {
-webkit-text-size-adjust: 100%;
position: relative;
}
img {
width: 100%;
max-width: 100%;
height: auto;
vertical-align: bottom;
}
a {
color: #0e4675;
text-decoration: none;
outline: none;
}
.switch {
visibility: hidden;
}
/*==================================
メインコンテンツ
==================================*/
#maincantents {
width: 100%;
margin: 0 auto;
}
#maincantents .inner {
width: 96%;
margin: 0 auto;
}
#maincantents .contents {
margin: 0;
}
/*==================================
TOPICS：ネット注文用バナー CSS
==================================*/
.bnr_r {
margin-bottom: 20px;
}
.sp_only_bnr_r {
display: block;
}
.pc_only_bnr_r {
display: none;
}
/*==================================
MV
==================================*/
.mv {
display: none;
}
.mv li {
width: 100%;
margin: 0 auto;
}
.mv li img {
width: 100%;
margin: 0 auto;
}
.bxslider li {
display: none;
}
.bx-viewport .bxslider li {
display: block !important;
}
/*==================================
ヘッダー
==================================*/
header {
}
header h1 {
width: 151px;
height: 45px;
margin: 15px auto 0;
background-image: url(../images/sitelogo.png);
background-repeat: no-repeat;
background-size: contain;
background-position: left top;
text-indent: -9999px;
float: left;
}
header h1 a {
display: block;
height: 70px;
}
.head_top {
height: 70px;
}
.head_top .option {
display: none;
}
.head_bottom {
display: none;
}
.option_search {
width: 100%;
margin: 0 auto;
padding: 0 5px;
}
#srchBox2 img {
width: auto;
}
#srchBox2 {
width:100%;
_width:100%;
margin-bottom:10px;
background-color:#ffffff;
border-style:solid;
border-width:0px;
border-color:#ffffff;
color:#000000;
text-align:left;
position: relative;
}
#srchBox2 *{
margin:0;
padding:0;
font-size:100%;
line-height: 1.3em;
*font-size:small;
*font:x-small;
}
#srchBox2 a img {
border:none;
}
#srchBox2 #srch2 {
/*padding:10px 10px 0 10px;*/
}
#srchBox2 #srch2 #srchForm2 {
white-space:nowrap;
}
#srchBox2 #srchInput2 {
width:100%;
margin-right:6px;
vertical-align:bottom;
}
#srchBox2 #srchBtn2 {
width:40px;
height: 48px;
position: absolute;
top:1px;
right: 11px;
background: url(../images/icon_search.png) center center no-repeat;
background-size: 18px 18px;
border-top: none;
border-bottom: none;
border-right: none;
border-left: none;
text-indent: -9999px;
}
*html #srchBox2 #srchBtn2 {
padding-top:2px;
}
*:first-child+html #srchBox2 #srchBtn2 {
padding-top:2px;
}
#srchBox2 ul {
margin-top:6px;
text-align:left;
}
#srchBox2 li {
list-style-type:none;
display:inline;
zoom:1;
padding-right:10px;
}
#srchBox2 li input {
zoom:1;
margin-right:2px;
_margin:-4px 0 -4px -4px;
vertical-align:middle;
border:0;
}
*:+html #srchBox2 li input {
margin:-4px 0 -4px -4px;
}
#srchBox2 #srchLogo2 {
margin:6px 6px 6px 0;
text-align:right;
}
#srchBox2 #srchLogo2 a {
color:#666666;
text-decoration:none;
font-size:100%;
}
#srchBox2 #srchLogo a:hover {
text-decoration:underline;
}
#srchBox2.watermark {
padding-bottom: 6px;
}
#srchBox2.watermark #srchInput2 {
padding:14px 10px 15px 10px;
border-top: 1px solid #F0F4F6;
border-bottom: 1px solid #F0F4F6;
border-left: 1px solid #F0F4F6;
border-right: 1px solid #F0F4F6;
background: url(https://s.yimg.jp/images/search/customsearch/yjlogo/yjlogo_type4.gif) center left 10px no-repeat #FFFFFF;
font-size: 100%;
min-height: 40px;
}
#srchBox2.watermark #srchInput2.nomark {
background: #fff;
}
#srchBox2.watermark #srchLogo2 {
display: none;
}
/*==================================
どすこいおにぎり左右のロゴ
==================================*/
.dosukoi-img{
width: 45px;
height: 45px;
}
.dosukoi-img2{
width: 129px;
height: 129px;
}
/*==================================
ナビゲーション
==================================*/
input[type="button"],input[type="text"],input[type="submit"] {
-webkit-appearance: none;
border-radius: 0;
}
nav#gmenu_pc {
display: none;
}
nav#gmenu_sp {
background-color: #fff;
z-index: 100;
}
nav#gmenu_sp ul {
clear: both;
overflow: hidden;
}
nav#gmenu_sp ul li {
width: 100%;
border-bottom: 2px solid #17bef5;
font-size: 14px;
font-size: 1.4rem;
}
nav#gmenu_sp ul li a {
padding: 20px 5px 20px 10px;
display: block;
color: #17bef5;
}
nav#gmenu_sp ul li span {
font-size: 12px;
font-size: 1.2rem;
}
nav#gmenu_sp .sub_nav {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 100%;
margin: 30px auto 30px;
}
nav#gmenu_sp .contact_btn {
width: calc((100% - 15px) / 2);
text-align: center;
padding: 0 5px;
}
nav#gmenu_sp .contact_btn:last-child {
margin-right: 0;
}
nav#gmenu_sp .contact_btn a {
color: #fff;
text-align: center;
display: inline-block;
background-color: #17bef5;
padding: 18px 0;
width: 100%;
border-radius: 5px;
margin-bottom: 15px;
font-feature-settings: 'palt';
letter-spacing: 0;
}
nav#gmenu_sp .contact_btn.narrow a{
letter-spacing: -1.5px;
}
.drawer-nav-inner {
overflow: scroll;
}
.search {
width: 90%;
margin: 0 auto 5%;
}
nav#gmenu_sp ul li .arrow_l::before {
border-top: solid 2px #17bef5;
border-right: solid 2px #17bef5;
}
/*==================================
shop_title
==================================*/
.shop_title {
background: #14A2D0;
height: auto;
position: relative;
}
.shop_title h1 {
font-family: "segoe UI","Lucida Grande", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Meiryo, Verdana, Arial, sans-serif;
color: #ffffff;
font-size: 24px;
padding: 14px 0 13px!important;
line-height: 28px;
font-weight: bold;
letter-spacing: 4px;
margin: 0;
}
h2 {
font-size: 18px;
font-weight: bold;
color: #607D8B;
}
.back_shop {
position: absolute;
top: 0px;
left: 0px;
}
.next_shop {
position: absolute;
top: 0px;
right: 0px;
}
.next_shop a,
.back_shop a{
color: #ffffff;
width: 50px;
height: 55px;
display: block;
}
.back_shop ul li {
display: inline-block;
/*margin-left: 15px;*/
position: relative;
/*padding-left: 20px;*/
text-indent: -9999px;
}
.back_shop ul li a::before {
content: '';
width: 12px;
height: 12px;
border: 0px;
border-bottom: solid 3px #ffffff;
border-left: solid 3px #ffffff;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
top: 50%;
left: 15px;
margin-top: -6px;
}
.next_shop ul li {
display: inline-block;
/*margin-right: 15px;*/
position: relative;
/*padding-right: 20px;*/
text-indent: -9999px;
}
.next_shop ul li a::after {
content: '';
width: 12px;
height: 12px;
border: 0px;
border-top: solid 3px #ffffff;
border-right: solid 3px #ffffff;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
top: 50%;
right: 15px;
margin-top: -6px;
}
/*==================================
NEWS
==================================*/
.newscate {
margin-top: 50px;
padding-bottom: 40px;
background-color: #f0f4f6;
position: relative;
}
.newscate .btn {
width: 250px;
position: absolute;
left: 50%;
bottom: -30px;
margin-left: -125px;
}
.newscate .btn a {
color: #fff;
text-align: center;
display: block;
line-height: 60px;
background-color: #17bef5;
}
.newscate .btn a:hover {
text-decoration: none;
}
.newscate .btn :hover {
opacity: 0.7;
transition: all 0.5s ease 0s;
}
.arrow_l {
position: relative;
display: inline-block;
padding-left: 15px;
}
.arrow_l::before {
content: '';
width: 6px;
height: 6px;
border: 0px;
border-top: solid 2px #fff;
border-right: solid 2px #fff;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
top: 50%;
left: 0;
margin-top: -9px;
}
.tab {
overflow: hidden;
margin-bottom: 30px;
}
.tab li {
width: 50%;
background: #fff;
padding: 15px 0;
float: left;
text-align: center;
font-weight: bold;
}
.tab li.select {
background: #f0f4f6;
border-top: solid 5px #17bef5;
padding-top: 10px;
}
.content li {
background: #f0f4f6;
}
.content li dl {
border-bottom: solid 1px #fff;
margin-bottom: 20px;
padding-bottom: 20px;
}
.content li dt {
font-weight: bold;
}
.hide {
display: none;
}
/*==================================
CONTACT
==================================*/
.contactcate {
margin-top: 70px;
}
.contactcate .inner {
padding: 5%;
border: solid 3px #e1eaea;
border-radius: 10px;
}
.contactcate ul li {
margin-bottom: 5%;
}
.contactcate ul li:last-child {
margin-right: 0;
}
.contactcate .ttl {
font-size: 22px;
font-size: 2.2rem;
font-weight: bold;
text-align: center;
margin-bottom: 20px;
}
.contactcate ul li.btn {
margin-bottom: 5%;
padding: 0;
border: none;
}
.contactcate ul li.btn:last-child {
margin-bottom: 0;
}
.contactcate ul li.btn a {
color: #fff;
text-align: center;
display: block;
line-height: 60px;
background-color: #6c99c9;
border-radius: 10px;
padding: 27px 0;
}
.contactcate ul li.btn a:hover {
text-decoration: none;
}
.contactcate ul li.btn :hover {
opacity: 0.7;
transition: all 0.5s ease 0s;
}
.contactcate ul li.btn img {
width: 60px;
}
.contactcate ul li.btn p {
font-size: 14px;
font-size: 1.4rem;
font-weight: bold;
line-height: 1.5;
margin-top: 15px;
}
/*==================================
BNR
==================================*/
.bnrcate .col4 {
clear: both;
overflow: hidden;
}
.bnrcate .col4 li {
float: left;
width: 48%;
margin: 4% 4% 0 0;
}
.bnrcate .col4 li:nth-child(2n) {
margin-right: 0;
}
/*==================================
TOPICS
==================================*/
.topicscate {
margin-top: 30px;
}
.box_line {
clear: both;
overflow: hidden;
display: flex;
flex-wrap:wrap;
}
.box_line li {
border: solid 2px #e1eaea;
}
.box_line li a {
color: #333;
}
.box_line li a:hover {
text-decoration: none;
}
.box_line li.size03 {
float: left;
width: 50%;
}
.box_line li .ttl {
font-size: 12px;
font-size: 1.2rem;
line-height: 1.2;
font-weight: bold;
text-align: center;
padding: 10px 10px 10px 0;
background-image: url(../../images/arrow.png);
background-repeat: no-repeat;
background-position: right 6px top 14px;
background-size: 4px 6px;
letter-spacing: 0;
}
.box_line li .text {
margin:8px auto 5%;
font-size: 12px;
line-height: 1.6;
display: none;
}
.box_line li .ttl.shop {
padding: 12px 0;
}
.box_line li.size02 figure, .box_line li.size03 figure {
margin: 0;
padding: 0;
}
.box_line figcaption {
padding: 0 5% 0;
font-size: 13px;
font-size: 1.3rem;
line-height: 1.3;
}
.favarite .tickercate {
background-color: #ffffff;
padding: 0px 0;
}
/*==================================
フッター
==================================*/
#footer {
width: 100%;
margin-top: 50px;
padding: 30px 0;
background-color: #17bef5;
font-size: 14px;
font-size: 1.4rem;
color: #fff;
text-align: center;
border-top: solid 5px #f0f4f6;
}
#footer .sns_link ul li {
display: inline-block;
margin: 0 5px;
}
#footer .sns_link ul li img {
width: 40px;
}
#footer .site_link {
font-weight: bold;
background-image: url(../images/foot_sen.png);
background-repeat: repeat-x;
background-position: left bottom;
margin: 30px 0 20px;
padding: 0 0 20px;
}
#footer .site_sublink {
font-size: 12px;
font-size: 1.2rem;
}
#footer .site_link ul, #footer .site_sublink ul {
clear: both;
overflow: hidden;
}
#footer .site_link ul li, #footer .site_sublink ul li {
float: left;
width: 50%;
line-height: 40px;
}
#footer .site_link ul li a, #footer .site_sublink ul li a {
color: #fff;
}
#footer .sitelogo {
margin-top: 30px;
}
#footer .sitelogo img {
width: 170px;
}
#footer .copyright {
font-size: 10px;
font-size: 1.0rem;
margin: 20px 0 0;
}
/* 230208追記 */
#footer .Pmark {
display: none;
}
/*==================================
ページトップへ
==================================*/
#totop {
width: 40px;
height: 40px;
display: none;
position: fixed;
bottom: 15px;
right: 15px;
}
#totop a {
background-image: url(../images/totop.png);
background-size: 40px 40px;
background-position: 0 top;
background-repeat: no-repeat;
display: block;
text-indent: -9999px;
width: 40px;
height: 40px;
}
.bloglistcate .blog_main_title {
font-size: 18px;
font-weight: bold;
margin: 30px 0 10px;
text-align: center;
color: #CD0303;
}
.bloglistcate ul {
margin-top: 15px;
}
.bloglistcate ul li {
border-bottom: 2px solid #f0f4f6;
margin-bottom: 15px;
padding-bottom: 15px;
overflow: auto;
}
.bloglistcate ul li a {
color: #333333;
}
.bloglistcate ul li .blogimg {
width: 100px;
aspect-ratio:1.4/1;
/* height: 75px;*/
overflow: hidden;
position: relative;
float: left;
margin: 0 10px 0px 10px;
}
/*
.bloglistcate ul li .blogimg2 {
height: 79px;
}
*/
.bloglistcate ul li img {
width: 100%;
aspect-ratio:1.4/1;
object-fit: cover;
position: absolute;
top: 0;
right: 0;
left:0;
bottom: 0;
margin: auto;
/*transform: scale(1.2,1.2);*/
}
.bloglistcate ul li .text_area {
overflow: hidden;
}
.bloglistcate ul li p.day {
font-size: 10px;
font-size: 1.0rem;
padding: 0px;
}
.bloglistcate ul li a p.title {
color: #14A2D0;
font-weight: bold;
font-size: 14px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.bloglistcate ul li p.text {
line-height: 1.3;
padding: 0 10px 0px 0;
font-size: 12px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.bloglistcate .btn {
width: 250px;
margin:40px auto 0;
}
.bloglistcate .btn a {
color: #fff;
text-align: center;
display: block;
line-height: 60px;
background-color: #17bef5;
}
.bloglistcate .btn :hover {
opacity: 0.7;
transition: all 0.5s ease 0s;
text-decoration: none;
}
.bloglistcate ul li .category {
width: 6em;
font-size: 1.0rem;
font-weight: bold;
color: #fff;
text-align: center;
padding: 2px 5px;
margin-left: 120px;
}
.bloglistcate .category.shop {
background-color: #6494c9;
}
.campaignlistcate ul {
margin-top: 15px;
}
.campaignlistcate ul li {
border-bottom: 2px solid #f0f4f6;
margin-bottom: 15px;
padding-bottom: 15px;
overflow: auto;
}
.campaignlistcate ul li a {
color: #333333;
}
.campaignlistcate ul li .blogimg {
width: 100px;
aspect-ratio: 1/1;
overflow: hidden;
position: relative;
float: left;
margin: 0 10px 0px 10px;
}
.campaignlistcate ul li img {
width: 100%;
aspect-ratio: 1/1;
object-fit: cover;
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
margin: auto;
}
.campaignlistcate ul li .text_area {
overflow: hidden;
}
.campaignlistcate ul li p.day {
font-size: 10px;
font-size: 1.0rem;
padding: 0px;
}
.campaignlistcate ul li a p.title {
color: #14A2D0;
font-weight: bold;
font-size: 14px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.campaignlistcate ul li p.text {
line-height: 1.3;
padding: 0 10px 0px 0;
font-size: 12px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.campaignlistcate .btn {
width: 250px;
margin: 40px auto 0;
}
.campaignlistcate .btn a {
color: #fff;
text-align: center;
display: block;
line-height: 60px;
background-color: #17bef5;
}
.campaignlistcate .btn :hover {
opacity: 0.7;
transition: all 0.5s ease 0s;
text-decoration: none;
}
.campaignlistcate ul li .category {
width: 6em;
font-size: 1.0rem;
font-weight: bold;
color: #fff;
text-align: center;
padding: 2px 5px;
margin-left: 120px;
}
.campaignlistcate .category.shop {
background-color: #6494c9;
}
/*==================================
イベント・キャンペーン＆お知らせ詳細
==================================*/
/* font */
.customcate li { display: list-item }
.customcate head { display: none }
.customcate table { display: table }
.customcate tr { display: table-row }
.customcate thead { display: table-header-group }
.customcate tbody { display: table-row-group }
.customcate tfoot { display: table-footer-group }
.customcate col { display: table-column }
.customcate colgroup { display: table-column-group }
.customcate td, .customcate th { display: table-cell }
.customcate caption { display: table-caption }
.customcate th { font-weight: bolder; text-align: center }
.customcate caption { text-align: center }
.customcate h1 { font-size: 2em; margin: .67em 0 }
.customcate h2 { font-size: 1.5em; margin: .75em 0 }
.customcate h3 { font-size: 1.17em; margin: .83em 0 }
.customcate h4, .customcate p,
.customcate blockquote, .customcate ul,
.customcate fieldset, .customcate form,
.customcate ol, .customcate dl, .customcate dir,
.customcate menu { margin: 1.12em 0 }
.customcate h5 { font-size: .83em; margin: 1.5em 0 }
.customcate h6 { font-size: .75em; margin: 1.67em 0 }
.customcate h1, .customcate h2, .customcate h3, .customcate h4,
.customcate h5, .customcate h6, .customcate b,
.customcate strong { font-weight: bolder; }
.customcate blockquote { margin-left: 40px; margin-right: 40px }
.customcate i, .customcate cite, .customcate em,
.customcate var, .customcate address { font-style: italic }
.customcate pre, .customcate tt, .customcate code,
.customcate kbd, .customcate samp { font-family: monospace }
.customcate pre { white-space: pre }
.customcate button, .customcate textarea,
.customcate input, .customcate select { display: inline-block }
.customcate big { font-size: 1.17em }
.customcate small, .customcate sub, .customcate sup { font-size: .83em }
.customcate sub { vertical-align: sub }
.customcate sup { vertical-align: super }
.customcate table { border-spacing: 2px; }
.customcate thead, .customcate tbody,
.customcate tfoot { vertical-align: middle }
.customcate td, .customcate th, .customcate tr { vertical-align: inherit }
.customcate s, .customcate strike, .customcate del { text-decoration: line-through }
.customcate hr { border: 1px inset }
.customcate ol li { list-style-type: decimal; }
.customcate ul li { list-style-type: disc; }
.customcate ol, .customcate ul, .customcate dir,
.customcate menu, .customcate dd { margin-left: 40px }
.customcate ol { list-style-type: decimal }
.customcate ol ul, .customcate ul ol,
.customcate ul ul, .customcate ol ol { margin-top: 0; margin-bottom: 0 }
.customcate u, .customcate ins { text-decoration: underline }
.customcate br:before { content: "\A"; white-space: pre-line }
.customcate center { text-align: center }
.customcate :link, .customcate :visited { text-decoration: underline }
.customcate :focus { outline: thin dotted invert }
/* editor */
.customcate p {
display: block;
margin: 1em 0;
}
.customcate strong { font-weight: bold; }
.customcate em { font-style: italic; }
.customcate blockquote {
display: block;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 40px;
-webkit-margin-end: 40px;
}
/* img */
.customcate .aligncenter {
display: block;
margin: 0 auto;
}
.customcate .alignright { float: right; }
.customcate .alignleft { float: left; }
.customcate img[class*="wp-image-"],
.customcate img[class*="attachment-"] {
height: auto;
max-width: 100%;
}
/* clearfix */
.customcate .clearfix {
overflow: hidden;
zoom: 1;
}
.customcate .clearfix:after {
content: "";
display: block;
clear: both;
}
.blogtitlecate {
padding: 20px 0 60px;
}
.blogtitlecate .blogmaintitle {
border-left: 5px solid #17bef5;
font-size: 113.333%;
line-height: 1.4;
padding: 5px 5px 4px 10px;
width: 100%;
clear: both;
}
.blogtitlecate .blogdate {
font-size: 12px;
margin-top: 20px;
}
.blogfootercate .btn {
width: 250px;
margin:30px auto;
}
.blogfootercate .btn a {
color: #fff;
text-align: center;
display: block;
line-height: 60px;
background-color: #17bef5;
}
.blogfootercate .btn :hover {
opacity: 0.7;
transition: all 0.5s ease 0s;
text-decoration: none;
}
/*==================================
CMギャラリー
==================================*/
.cm_block {
width: 100%;
margin: 40px auto 10px;
}
.cm_block video {
width: 100%;
}
.cm_text h3 {
font-size: 18px;
}
/*==================================
CMギャラリー:
ユーチューブに変更した際のcss
==================================*/
.video_youtube{
width:100%; /*横幅いっぱいにwidthを指定*/
padding-bottom: 56.25%; /*高さをpaddingで指定(16:9)*/
height:0px; /*高さはpaddingで指定するためheightは0に*/
position: relative;
}
.video_youtube iframe{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/*==================================
チラシ
==================================*/
.chirashi_area {
display: table;
width: 100%;
}
.chirashi_thumb {
display: table-cell;
vertical-align: middle;
text-align: center;
min-width: 100px;
padding: 0 10px;
}
.thumb {
width: auto;
height: 50px;
}
.chirashi_name {
display: table-cell;
vertical-align: middle;
line-height: 1.6;
text-align: left;
}
/* sns link */
.sns-box-sp {
width:100%;
margin:20px 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.sns-box-sp > div {
width:30px;
margin:0 8px;
align-items: center;
}
.sns-box-sp > .ico-yt-head-sp {
width:34px;
}
.sns-box-sp > div > a > img {
width:100%;
vertical-align: middle;
}
.sns-box-footer {
width:100%;
margin-bottom:20px;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.sns-box-footer > li {
width:20px;
margin:0 8px;
display:flex;
}
.sns-box-footer > .ico-yt-footer {
width: 23px;
}
.sns-box-footer > li > a > img {
width:100%;
vertical-align: middle;
}
/* ------------------------
plant pay キャンペーン
期間限定：2021.7.10～8.3掲載
------------------------ */
.pay500-box {
margin-bottom:20px;
}
.pay500-bnr {
width:100%;
}
.pay500-bnr img {
max-width:100%;
vertical-align: bottom;
}
.pay500-youtube {
width:100%;
display: flex;
align-items: center;
background:#005d93;
padding:15px 0;
}
.pay500-youtube > div {
position: relative;
padding-top: 56.25%;
width:100%;
}
.pay500-youtube > div > iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* jj burger */
.sp {display: block;
}
.pc {display: none;
}
.jj_burger{
width: 95%;
margin: 30px auto 0px;
}
.jj_burger img{
width: 100%;
}
/*2023/9/11 ブログページネーション*/
.pagination {
display: flex;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
}
.pagination.pc{display: none;}
.pagination strong {
padding: 8px 14px 8px 13.8px;
margin: 0 7.5px;
background-color: #17BEF5;
color: #fff;
border-radius: 5px;
font-size: 20px;
line-height: 1.2;
}
.pagination a {
display: none;
}
.pagination .last a,.pagination .first a,
.pagination .next a,.pagination .prev a {
display: block;
position: relative;
background-color: #fff;
border: solid #17BEF5 1px;
padding: 19px;
margin: 0 7.5px;
border-radius: 5px;
}
.pagination .last a,.pagination .first a{
padding: 19px 15px 19px 14px;
}
.pagination .next a:hover,.pagination .prev a:hover,
.pagination .first a:hover,.pagination .last a:hover{
background-color: #17BEF5;
transition: .5s;
}
.pagination .last a::after,.pagination .first a::after,
.pagination .next a::after,.pagination .prev a::after {
position: absolute;
color: #17BEF5;
font-family: FontAwesome;
top: 50%;
right: 50%;
transform: translate(50%, -50%);
}
.pagination .next a::after{
font-size: 12px;
content: '\f054';
}
.pagination .prev a::after {
font-size: 12px;
content: '\f053';
}
.pagination .last a::after{
font-size: 20px;
content: '\f101';
}
.pagination .first a::after{
font-size: 20px;
content: '\f100';
}
.pagination .next a:hover::after ,.pagination .prev a:hover::after ,
.pagination .first a:hover::after ,.pagination .last a:hover::after
{
color: #fff;
}
.titlecate.blogtitle.mt00 {
background-color: #ECF5FA;
padding: 15px 0;
}
/*2023/9/11 ブログページネーション*/