@charset "UTF-8";
/*スタイルリセット*/
/*透過*/
/*ぼかし*/
/*clearfix*/
/*インラインブロック*/
@import "n_01.css";
@import "n_02.css";
@import "n_03.css";
@import "n_04.css";
@import "n_05.css";
.inline_block {
display: inline-block;
*display: inline;
*zoom: 1;
}
/*文字数超過の時に....をつける*/
/*アスペクト比を保って拡大縮小*/
/*
youtubeのアスペクト比保持
*/
.ytAspectHold {
position: relative;
width: 100%;
padding-top: 56.25%;
}
.ytAspectHold iframe {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
}
/*
ボックスサイジング
padding と border の幅を要素の幅と高さに含める
*/
.box-sizing {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
/*シャドウ*/
/*角丸処理*/
/*角を削ったような Box*/
/*斜線*/
/*グラデーション*/
/*縦のグラデ*/
/*横のグラデ*/
/*縦のグラデ（３色 50%）*/
/*横のグラデ（３色 50%）*/
/*--------------------------------------------------------------------------------------------------
アニメーション：animation
@easing: ease、linear、ease-in、ease-out など
@delay: アニメーションが開始するまでの遅延時間
@roop: アニメーションのループ回数、infiniteを指定すると無限ループ
@direction:アニメーションの再生方向
normal : アニメーションを通常再生する。(0% → 100%)
reverse : アニメーションを逆再生する。(100% → 0%)
alternate : アニメーションを通常再生。ループの場合、通常再生(0% → 100%) → 逆再生(100% → 0%) といった繰り返し順で再生
alternate-reverse : アニメーションを逆再生。ループの場合、逆再生(100% → 0%) → 通常再生(0% → 100%)といった繰り返し順で再生
@fillmode : キーフレームアニメーションで指定したプロパティをアニメーション開始前、終了後に適用するかどうかを指定
----使用例----
a:hover i.move{
.animation("move-arrow",0.2s);
}
@keyframes move-arrow{
0% {.transform(@translateX:0px);}
100% {.transform(@translateX:5px);}
}
*/
/*--------------------------------------------------------------------------------------------------
アニメーション：transition
*/
/*-------------------------------------------------*/
/*Flexbox（親要素に設定）*/
.flexbox {
-js-display: flex;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
}
/*子要素の大きさを微調整*/
/*
0:デフォルト
1:均等
*/
/*-------------------------------------------------*/
/*選択無効*/
.noSelect {
-moz-user-select: none;
/* Firefox */
-ms-user-select: none;
/* Internet Explorer */
-khtml-user-select: none;
/* KHTML browsers (e.g. Konqueror) */
-webkit-user-select: none;
/* Chrome, Safari, and Opera */
-webkit-touch-callout: none;
/* Disable Android and iOS callouts*/
}
/*----------------------------------------*/
/*less 変数設定
/*----------------------------------------*/
.fon_mincho {
font-family: "Noto Serif JP", "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
}
.fon_gosic {
font-family: "メイリオ", Meiryo, "Helvetica Neue", Helvetica, Arial, "游ゴシック", YuGothic, "Yu Gothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "メイリオ", Meiryo, sans-serif;
}
/*
コンテンツ共通用
*/
.commonWidth {
width: 1000px;
margin: auto;
}
@media screen and (max-width: 1160px) {
.commonWidth {
width: 1160px;
padding-left: 80px;
padding-right: 80px;
}
}
@media screen and (max-width: 768px) {
.commonWidth {
width: auto;
padding-left: 5%;
padding-right: 5%;
}
}
.commonWidth990 {
max-width: 990px;
margin: auto;
}
@media screen and (max-width: 1090px) {
.commonWidth990 {
width: auto;
padding-left: 50px;
padding-right: 50px;
}
}
@media screen and (max-width: 1160px) {
.commonWidth990 {
padding-left: 4%;
padding-right: 4%;
}
}
@media screen and (max-width: 988px) {
.commonWidth990 {
min-width: 768px;
}
}
@media screen and (max-width: 768px) {
.commonWidth990 {
min-width: auto;
}
}
/*----------------------------------------*/
/*追加mixin
/*----------------------------------------*/
.linkarrow .hover::before {
transform: translateX(3px) translateY(0) scaleX(1) scaleY(1) rotate(45deg);
-webkit-transform: translateX(3px) translateY(0) scaleX(1) scaleY(1) rotate(45deg);
-moz-transform: translateX(3px) translateY(0) scaleX(1) scaleY(1) rotate(45deg);
-ms-transform: translateX(3px) translateY(0) scaleX(1) scaleY(1) rotate(45deg);
}
/*マウスオーバーアニメーション*/
/*
a{
.mix_hvr-grow > .basic;
}
a:hover{
.mix_hvr-grow > .hover(1.3);
}
*/
/*ちょっと拡大*/
/*--------------*/
/*カラーフェード*/
/*--------------*/
.mix_hvr-colorfade .basic {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
overflow: hidden;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: all;
transition-property: all;
}
/* Underline From Center */
/*--------------*/
.mix_hvr-underline-center .hover::before {
left: 0;
right: 0;
}
/* Underline From Left */
/*--------------*/
.mix_hvr-underline-left .hover::before {
left: 0;
right: 0;
}
/* Sweep To Right */
/*--------------*/
/* Sweep To Left */
/*--------------*/
/* ----------------------------------------------
マウスオーバーでサムネル画像にアニメーション追加
参考：http://gop.co.jp
![]()
*/
/*Zoom*/
/*Zoom & Rotation*/
/*----------------------------------------------*/
/*---------------------------*/
/*---------------------------*/
/*基本スタイル*/
.mv {
transition: 0.8s 0.3s linear;
-moz-transition: 0.8s 0.3s linear;
-webkit-transition: 0.8s 0.3s linear;
-o-transition: 0.8s 0.3s linear;
-ms-transition: 0.8s 0.3s linear;
}
.mv.move:nth-child(2) {
transition-delay: 0.1s;
-moz-transition-delay: 0.1s;
-webkit-transition-delay: 0.1s;
-o-transition-delay: 0.1s;
-ms-transition-delay: 0.1s;
}
.mv.move:nth-child(3) {
transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
-webkit-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
-ms-transition-delay: 0.2s;
}
.mv.move:nth-child(4) {
transition-delay: 0.3s;
-moz-transition-delay: 0.3s;
-webkit-transition-delay: 0.3s;
-o-transition-delay: 0.3s;
-ms-transition-delay: 0.3s;
}
.mv.move:nth-child(5) {
transition-delay: 0.4s;
-moz-transition-delay: 0.4s;
-webkit-transition-delay: 0.4s;
-o-transition-delay: 0.4s;
-ms-transition-delay: 0.4s;
}
.mv.move:nth-child(6) {
transition-delay: 0.5s;
-moz-transition-delay: 0.5s;
-webkit-transition-delay: 0.5s;
-o-transition-delay: 0.5s;
-ms-transition-delay: 0.5s;
}
.mv.move:nth-child(7) {
transition-delay: 0.6s;
-moz-transition-delay: 0.6s;
-webkit-transition-delay: 0.6s;
-o-transition-delay: 0.6s;
-ms-transition-delay: 0.6s;
}
.mv.move:nth-child(8) {
transition-delay: 0.7s;
-moz-transition-delay: 0.7s;
-webkit-transition-delay: 0.7s;
-o-transition-delay: 0.7s;
-ms-transition-delay: 0.7s;
}
.mv.move:nth-child(9) {
transition-delay: 0.8s;
-moz-transition-delay: 0.8s;
-webkit-transition-delay: 0.8s;
-o-transition-delay: 0.8s;
-ms-transition-delay: 0.8s;
}
.mv.move:nth-child(10) {
transition-delay: 0.9s;
-moz-transition-delay: 0.9s;
-webkit-transition-delay: 0.9s;
-o-transition-delay: 0.9s;
-ms-transition-delay: 0.9s;
}
/*フェード*/
.mv_fade {
opacity: 0;
}
.mv_fade.move {
opacity: 1;
}
/*上移動*/
.mv_top {
transform: translateX(0) translateY(30px);
-webkit-transform: translateX(0) translateY(30px);
-moz-transform: translateX(0) translateY(30px);
-ms-transform: translateX(0) translateY(30px);
}
.mv_top.move {
transform: translateX(0) translateY(0);
-webkit-transform: translateX(0) translateY(0);
-moz-transform: translateX(0) translateY(0);
-ms-transform: translateX(0) translateY(0);
}
.gsap_top {
opacity: 0;
}
/*下移動*/
.mv_bottom {
transform: translateX(0) translateY(-30px);
-webkit-transform: translateX(0) translateY(-30px);
-moz-transform: translateX(0) translateY(-30px);
-ms-transform: translateX(0) translateY(-30px);
}
.mv_bottom.move {
transform: translateX(0) translateY(0);
-webkit-transform: translateX(0) translateY(0);
-moz-transform: translateX(0) translateY(0);
-ms-transform: translateX(0) translateY(0);
}
/*左移動*/
.mv_left {
transform: translateX(30px) translateY(0px);
-webkit-transform: translateX(30px) translateY(0px);
-moz-transform: translateX(30px) translateY(0px);
-ms-transform: translateX(30px) translateY(0px);
}
.mv_left.move {
transform: translateX(0) translateY(0);
-webkit-transform: translateX(0) translateY(0);
-moz-transform: translateX(0) translateY(0);
-ms-transform: translateX(0) translateY(0);
}
/*右移動*/
.mv_right {
transform: translateX(-30px) translateY(0px);
-webkit-transform: translateX(-30px) translateY(0px);
-moz-transform: translateX(-30px) translateY(0px);
-ms-transform: translateX(-30px) translateY(0px);
}
.mv_right.move {
transform: translateX(0) translateY(0);
-webkit-transform: translateX(0) translateY(0);
-moz-transform: translateX(0) translateY(0);
-ms-transform: translateX(0) translateY(0);
}
/*ちょっと縮小*/
.mv_min {
transform: scaleX(1.1) scaleY(1.1);
-webkit-transform: scaleX(1.1) scaleY(1.1);
-moz-transform: scaleX(1.1) scaleY(1.1);
-ms-transform: scaleX(1.1) scaleY(1.1);
}
.mv_min.move {
transform: scaleX(1) scaleY(1);
-webkit-transform: scaleX(1) scaleY(1);
-moz-transform: scaleX(1) scaleY(1);
-ms-transform: scaleX(1) scaleY(1);
}
/*ちょっと拡大*/
.mv_mag {
transform: scaleX(0.9) scaleY(0.9);
-webkit-transform: scaleX(0.9) scaleY(0.9);
-moz-transform: scaleX(0.9) scaleY(0.9);
-ms-transform: scaleX(0.9) scaleY(0.9);
}
.mv_mag.move {
transform: scaleX(1) scaleY(1);
-webkit-transform: scaleX(1) scaleY(1);
-moz-transform: scaleX(1) scaleY(1);
-ms-transform: scaleX(1) scaleY(1);
}
/*
hogehogehoge
span{
.move-marker > .basic(@linecolor:#DACB85, @width:0%, @height:0.4em, @position:100%);
}
span.move{
.move-marker > .move(@height:0.4em);
}
*/
.minWidth {
min-width: 1000px;
}
@media screen and (max-width: 768px) {
.minWidth {
width: auto;
min-width: auto;
}
}
article#note section#header {
min-width: 1000px;
}
@media screen and (max-width: 768px) {
article#note section#header {
width: auto;
min-width: auto;
}
}
article#note section#header figure {
position: relative;
}
article#note section#header figure img {
width: 100%;
height: auto;
}
article#note section#header figure figcaption {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex;
justify-content: center;
align-items: center;
width: 500px;
margin: auto;
}
article#note section#header figure figcaption img {
width: 100%;
height: auto;
}
/*------------------*/
/*記事一覧*/
/*------------------*/
article#note.index {
padding-bottom: 55px;
}
article#note.index section.entries {
width: 1000px;
margin: auto;
margin-top: 50px;
}
@media screen and (max-width: 1160px) {
article#note.index section.entries {
width: 1160px;
padding-left: 80px;
padding-right: 80px;
}
}
@media screen and (max-width: 768px) {
article#note.index section.entries {
width: auto;
padding-left: 5%;
padding-right: 5%;
}
}
article#note.index section.entries ul {
-js-display: flex;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
/*
●子要素の折り返し設定（親要素に設定）
wrap:初期値。折り返しを許可、「複数行」。
nowrap:折り返しなし、つまり「単一行」。
wrap-reverse:「wrap」と同じで、ただ、折り返し地点が逆になります。
*/
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
-o-flex-wrap: wrap;
flex-wrap: wrap;
margin-top: 25px;
}
article#note.index section.entries ul li {
width: 298px;
margin-left: 53px;
}
article#note.index section.entries ul li a {
display: block;
}
article#note.index section.entries ul li a figure .image {
position: relative;
width: 100%;
margin-bottom: 16px;
object-fit: cover;
overflow: hidden;
}
article#note.index section.entries ul li a figure .image::before {
content: "";
display: block;
padding-top: 70%;
}
article#note.index section.entries ul li a figure .image img {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: auto;
margin: auto;
transition: transform 0.3s linear;
-moz-transition: transform 0.3s linear;
-webkit-transition: transform 0.3s linear;
-o-transition: transform 0.3s linear;
-ms-transition: transform 0.3s linear;
}
article#note.index section.entries ul li a figure figcaption dl dt {
margin-bottom: 10px;
font-size: 24px;
line-height: 1.3;
color: #000;
font-family: "Noto Serif JP", "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
}
article#note.index section.entries ul li a figure figcaption dl dd.date {
color: #000;
font-size: 22px;
font-family: "Noto Serif JP", "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
}
article#note.index section.entries ul li a:hover figure .image img {
transform: scaleX(1.05) scaleY(1.05);
-webkit-transform: scaleX(1.05) scaleY(1.05);
-moz-transform: scaleX(1.05) scaleY(1.05);
-ms-transform: scaleX(1.05) scaleY(1.05);
}
article#note.index section.entries ul li:nth-child(3n-2) {
margin-left: 0;
}
article#note.index section.entries ul li:nth-child(n + 4) {
margin-top: 50px;
}
article#note.index section.entries ul + h3 {
margin-top: 55px;
}
/*------------------*/
/*記事詳細 共通*/
/*------------------*/
article#note section#contents {
background: repeat-y top center / 100% auto url(../images/_note/common/backimage.png);
}
article#note .wrap {
max-width: 1200px;
min-width: 1000px;
margin: auto;
position: relative;
}
@media screen and (max-width: 768px) {
article#note .wrap {
width: auto;
min-width: auto;
}
}
article#note section.title {
display: flex;
align-items: center;
min-width: 1000px;
height: 500px;
margin: 0 auto;
padding-left: 100px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
article#note section.title h2 {
width: 459px;
}
article#note section.title h2 img {
width: 100%;
height: auto;
}
@media screen and (max-width: 768px) {
article#note section.title {
width: auto;
min-width: auto;
height: 384px;
padding-left: 15px;
}
article#note section.title h2 {
width: 190px;
}
}
article#note section.lead {
position: relative;
width: 1000px;
min-width: 1000px;
padding: 100px 0;
margin: 0 auto;
}
@media screen and (max-width: 768px) {
article#note section.lead {
width: auto;
min-width: auto;
}
}
article#note section.lead p {
position: relative;
z-index: 9;
font-size: 28px;
line-height: 2;
text-align: center;
color: #231815;
font-family: "Noto Serif JP", "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
}
article#note section.lead p strong {
display: block;
font-size: 160%;
line-height: 1;
text-decoration: underline;
}
article#note section.lead .images {
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100%;
}
article#note section.lead .images img {
position: absolute;
}
@media screen and (max-width: 768px) {
article#note section.lead p {
font-size: 4.3vw;
}
}
article#note section.feature .wrap.text-image {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
article#note section.feature .wrap.text-image .image {
position: relative;
width: calc(100% - 550px);
}
article#note section.feature .wrap.text-image .image::before {
content: "";
display: block;
padding-top: 100%;
}
article#note section.feature .wrap.text-image .image .fig1 {
position: absolute;
top: 0px;
z-index: 10;
width: 100%;
}
article#note section.feature .wrap.text-image .image .fig1 img {
position: relative;
top: 0px;
width: 100%;
height: auto;
}
article#note section.feature .wrap.text-image .image .fig2 {
position: absolute;
bottom: 0;
z-index: 15;
width: 55%;
}
article#note section.feature .wrap.text-image .image .fig2 img {
max-width: 100%;
height: auto;
transition-delay: 0.5s;
-moz-transition-delay: 0.5s;
-webkit-transition-delay: 0.5s;
-o-transition-delay: 0.5s;
-ms-transition-delay: 0.5s;
}
article#note section.feature .wrap.text-image .text {
width: 485px;
}
article#note section.feature .wrap.text-image .text h3 {
margin-bottom: 5px;
padding-bottom: 0.5em;
border-bottom: 5px solid #231815;
line-height: 1.3;
font-size: 47px;
font-weight: 700;
color: #231815;
font-family: "Noto Serif JP", "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
}
article#note section.feature .wrap.text-image .text p {
padding-top: 1.4em;
border-top: 2px solid #231815;
font-size: 24px;
line-height: 1.8;
font-weight: 500;
color: #231815;
font-family: "Noto Serif JP", "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
}
article#note section.feature .wrap.text-image .text p a {
text-decoration: underline;
}
article#note section.feature .wrap.text-image .text .link {
margin-top: 1em;
}
article#note section.feature .wrap.text-image .text .link a {
font-size: 24px;
line-height: 1.6;
color: #231815;
font-family: "Noto Serif JP", "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
}
article#note section.feature .wrap.text-image .text .link a span {
text-decoration: underline;
}
article#note section.feature .wrap.text-image:not(.imageR) .image .fig1 {
left: 0;
}
article#note section.feature .wrap.text-image:not(.imageR) .image .fig1 img {
left: 0px;
}
article#note section.feature .wrap.text-image:not(.imageR) .image .fig2 {
left: 24px;
}
article#note section.feature .wrap.text-image:not(.imageR) .text {
padding-right: 100px;
}
article#note section.feature .wrap.text-image.imageR {
flex-direction: row-reverse;
}
article#note section.feature .wrap.text-image.imageR .image .fig1 {
right: 0px;
}
article#note section.feature .wrap.text-image.imageR .image .fig1 img {
right: 0px;
}
article#note section.feature .wrap.text-image.imageR .image .fig2 {
right: 24px;
}
article#note section.feature .wrap.text-image.imageR .text {
padding-left: 100px;
}
article#note section.feature .wrap.text-image + .wrap.text-image {
margin-top: 88px;
}
@media screen and (max-width: 768px) {
article#note section.feature .wrap.text-image {
display: block;
}
article#note section.feature .wrap.text-image .image {
position: relative;
width: 100%;
}
article#note section.feature .wrap.text-image .image::before {
content: "";
display: block;
padding-top: 80%;
}
article#note section.feature .wrap.text-image .image .fig1 {
width: 83%;
}
article#note section.feature .wrap.text-image .image .fig1 img {
top: 0px;
}
article#note section.feature .wrap.text-image .image .fig2 {
bottom: 0%;
width: 46%;
}
article#note section.feature .wrap.text-image .text {
width: 85%;
padding-top: 30px;
margin: auto;
}
article#note section.feature .wrap.text-image .text h3 {
font-size: 8vw;
line-height: 1.3;
background-size: 100% auto;
text-align: center;
}
article#note section.feature .wrap.text-image .text p {
font-size: 4.3vw;
}
article#note section.feature .wrap.text-image .text .link a {
font-size: 4.3vw;
}
article#note section.feature .wrap.text-image:not(.imageR) .image .fig2 {
left: 12px;
}
article#note section.feature .wrap.text-image:not(.imageR) .text {
padding-right: 0;
}
article#note section.feature .wrap.text-image.imageR .image .fig2 {
right: 12px;
}
article#note section.feature .wrap.text-image.imageR .text {
padding-left: 0;
}
}
article#note section.tech {
margin-top: 100px;
}
article#note section.tech .wrap ul {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 50px;
background: #a39579;
}
article#note section.tech .wrap ul li {
width: calc(calc(100% - 100px) / 3);
}
article#note section.tech .wrap ul li figure img {
width: 100%;
height: auto;
}
article#note section.tech .wrap ul li h3 {
margin: 10px 0;
line-height: 1.4;
font-size: 28px;
text-align: center;
font-weight: bold;
color: #231815;
font-family: "Noto Serif JP", "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
}
article#note section.tech .wrap ul li p {
font-size: 18px;
line-height: 1.4;
color: #231815;
font-family: "Noto Serif JP", "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
}
article#note section.tech .wrap ul li p a {
display: block;
margin-top: 1em;
color: #231815;
text-decoration: underline;
}
article#note section.tech .wrap ul li p.note {
display: block;
margin-top: 1em;
font-size: 16px;
line-height: 1.25;
}
@media screen and (max-width: 768px) {
article#note section.tech {
width: 85%;
margin: 50px auto 0;
}
article#note section.tech .wrap ul {
display: block;
padding: 6.5vw;
}
article#note section.tech .wrap ul li {
width: 100%;
padding: 8vw 0;
}
article#note section.tech .wrap ul li h3 {
font-size: 7vw;
}
article#note section.tech .wrap ul li p {
font-size: 4.3vw;
}
article#note section.tech .wrap ul li p.note {
font-size: 4.3vw;
}
}
article#note section.tubuyaki {
position: relative;
width: 1000px;
min-width: 1000px;
min-height: 1343px;
margin: 70px auto;
background: no-repeat center top url(../images/_note/common/note_back.png);
}
@media screen and (max-width: 768px) {
article#note section.tubuyaki {
width: auto;
min-width: auto;
}
}
article#note section.tubuyaki .body {
position: relative;
z-index: 9;
padding: 120px 100px 100px;
}
article#note section.tubuyaki .body h3 {
padding-bottom: 60px;
text-align: center;
}
article#note section.tubuyaki .body h3 img {
max-width: 100%;
height: 100%;
}
article#note section.tubuyaki .body p {
font-size: 24px;
line-height: 1.75;
}
article#note section.tubuyaki .body figure {
text-align: center;
}
article#note section.tubuyaki .body figure img {
max-width: 100%;
height: auto;
}
@media screen and (max-width: 768px) {
article#note section.tubuyaki {
background-image: none;
width: 85%;
min-height: auto;
}
article#note section.tubuyaki::before {
content: "";
display: block;
width: 100%;
padding-top: 9%;
background: no-repeat center top / 100% auto url(../images/_note/common/note_back_smp_top.png);
}
article#note section.tubuyaki::after {
content: "";
display: block;
width: 100%;
padding-top: 13%;
background: no-repeat center bottom / 100% auto url(../images/_note/common/note_back_smp_bottom.png);
}
article#note section.tubuyaki .body {
position: relative;
z-index: 9;
padding: 0px 12% 0px;
background: repeat-y center top / 100% auto url(../images/_note/common/note_back_smp_body.png);
}
article#note section.tubuyaki .body h3 {
padding: 30px 0;
}
article#note section.tubuyaki .body p {
font-size: 4.3vw;
line-height: 1.9;
}
article#note section.tubuyaki .body figure {
text-align: center;
}
article#note section.tubuyaki .body figure img {
max-width: 100%;
height: auto;
}
}
@media screen and (max-width: 768px) {
article#note section#header figure figcaption {
width: 66%;
}
/*------------------*/
/*記事一覧*/
/*------------------*/
article#note.index {
padding-bottom: 55px;
}
article#note.index section#header figure figcaption {
width: 66%;
}
article#note.index section.entries {
margin-top: 24px;
}
article#note.index section.entries ul {
/*
●水平方向の揃え方（親要素に設定）
space-between：初期値。均等に間隔を空ける
space-around：「space-between」と同じく均等に間隔を空ける。違うのは、左右の端のFlexアイテムにも半分ずつ間隔を空けてるところ。
flex-start：横配置の場合、「左揃え」、縦配置の場合、「上揃え」になります。
flex-end：横配置の場合「右揃え」、縦配置の場合「下揃え」になります。
center：「中央揃え」です。
*/
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
-ms-justify-content: space-between;
-o-justify-content: space-between;
justify-content: space-between;
margin-top: 0px;
}
article#note.index section.entries ul li {
width: 46%;
margin-left: 0;
}
article#note.index section.entries ul li a figure .image {
margin-bottom: 8px;
}
article#note.index section.entries ul li a figure figcaption dl dt {
margin-bottom: 0;
font-size: 3.2vw;
}
article#note.index section.entries ul li a figure figcaption dl dd.date {
font-size: 2.8vw;
}
article#note.index section.entries ul li a:hover figure .image img {
transform: scaleX(1.05) scaleY(1.05);
-webkit-transform: scaleX(1.05) scaleY(1.05);
-moz-transform: scaleX(1.05) scaleY(1.05);
-ms-transform: scaleX(1.05) scaleY(1.05);
}
article#note.index section.entries ul li:nth-child(3n-2) {
margin-left: 0;
}
article#note.index section.entries ul li:nth-child(n + 3) {
margin-top: 24px;
}
}
aside#category-archive {
padding-top: 55px;
border-top: 1px solid #959595;
}
aside#category-archive .wrap {
width: 1000px;
margin: auto;
}
@media screen and (max-width: 1160px) {
aside#category-archive .wrap {
width: 1160px;
padding-left: 80px;
padding-right: 80px;
}
}
@media screen and (max-width: 768px) {
aside#category-archive .wrap {
width: auto;
padding-left: 5%;
padding-right: 5%;
}
}
aside#category-archive .wrap ul {
-js-display: flex;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
/*
●水平方向の揃え方（親要素に設定）
space-between：初期値。均等に間隔を空ける
space-around：「space-between」と同じく均等に間隔を空ける。違うのは、左右の端のFlexアイテムにも半分ずつ間隔を空けてるところ。
flex-start：横配置の場合、「左揃え」、縦配置の場合、「上揃え」になります。
flex-end：横配置の場合「右揃え」、縦配置の場合「下揃え」になります。
center：「中央揃え」です。
*/
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
-o-justify-content: center;
justify-content: center;
}
aside#category-archive .wrap ul li {
width: 14%;
margin-left: 3%;
margin-right: 3%;
}
aside#category-archive .wrap ul li a {
display: block;
}
aside#category-archive .wrap ul li a figure .image {
transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
}
aside#category-archive .wrap ul li a figure .image img {
width: 100%;
height: auto;
}
aside#category-archive .wrap ul li a figure figcaption {
margin-top: 5px;
font-size: 14px;
text-align: center;
color: #231815;
transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
}
aside#category-archive .wrap ul li a:hover figure .image {
transform: translateX(0px) translateY(-4px);
-webkit-transform: translateX(0px) translateY(-4px);
-moz-transform: translateX(0px) translateY(-4px);
-ms-transform: translateX(0px) translateY(-4px);
}
aside#category-archive .wrap ul li a:hover figure figcaption {
color: #806239;
}
@media handheld, only screen and (max-width: 768px) {
aside#category-archive {
padding-top: 55px;
padding-bottom: 40px;
border-top: 1px solid #959595;
}
aside#category-archive .wrap ul {
display: block;
}
aside#category-archive .wrap ul li {
width: 30%;
margin: 0;
}
aside#category-archive .wrap ul li a {
display: block;
}
aside#category-archive .wrap ul li a figure .image {
transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
}
aside#category-archive .wrap ul li a figure .image img {
width: 100%;
height: auto;
}
aside#category-archive .wrap ul li a figure figcaption {
margin-top: 5px;
font-size: 13px;
color: #231815;
transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
}
aside#category-archive .wrap ul li a:hover figure .image {
transform: translateX(0px) translateY(-4px);
-webkit-transform: translateX(0px) translateY(-4px);
-moz-transform: translateX(0px) translateY(-4px);
-ms-transform: translateX(0px) translateY(-4px);
}
aside#category-archive .wrap ul li a:hover figure figcaption {
color: #806239;
}
aside#category-archive .wrap ul#catSlider li {
display: none;
/*読み込み時は非表示*/
}
aside#category-archive .wrap .bx-viewport ul#catSlider li {
display: block !important;
/*JSが読み込まれたら表示*/
}
}