@charset "UTF-8";
/* top.scss */
/* normalize.scss */
/* ==========================================================================
HTML5 display definitions
========================================================================== */
/*
* Corrects `block` display not defined in IE6/7/8/9 & FF3.
*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
summary {
display: block;
}
/*
* Corrects `inline-block` display not defined in IE6/7/8/9 & FF3.
*/
audio,
canvas,
video {
display: inline-block;
}
/*
* Prevents modern browsers from displaying `audio` without controls.
* Remove excess height in iOS5 devices.
*/
audio:not([controls]) {
display: none;
height: 0;
}
/*
* Addresses styling for `hidden` attribute not present in IE7/8/9, FF3, S4.
* Known issue: no IE6 support.
*/
[hidden] {
display: none;
}
/* ==========================================================================
Base
========================================================================== */
/*
* 1. Corrects text resizing oddly in IE6/7 when body `font-size` is set using
* `em` units.
* 2. Prevents iOS text size adjust after orientation change, without disabling
* user zoom.
*/
html {
font-size: 100%;
/* 1 */
-webkit-text-size-adjust: 100%;
/* 2 */
-ms-text-size-adjust: 100%;
/* 2 */
}
/*
* Addresses `font-family` inconsistency between `textarea` and other form
* elements.
*/
/*
* Addresses margins handled incorrectly in IE6/7.
*/
body {
margin: 0;
}
img {
vertical-align: top;
}
/* ==========================================================================
Links
========================================================================== */
/*
* Addresses `outline` inconsistency between Chrome and other browsers.
*/
/*a:focus {
outline: thin dotted;
}*/
/*
* Improves readability when focused and also mouse hovered in all browsers.
* people.opera.com/patrickl/experiments/keyboard/test
*/
/*a:active,
a:hover {
outline: 0;
}*/
/* ==========================================================================
Typography
========================================================================== */
/*
* Addresses font sizes and margins set differently in IE6/7.
* Addresses font sizes within `section` and `article` in FF4+, Chrome, S5.
*/
h1, h2, h3, h4, h5, h6 {
font-size: 1.0em;
font-weight: normal;
margin: 0;
padding: 0;
}
/*
* Addresses styling not present in IE7/8/9, S5, Chrome.
*/
abbr[title] {
border-bottom: 1px dotted;
}
/*
* Addresses style set to `bolder` in FF3+, S4/5, Chrome.
*/
b,
strong {
font-weight: bold;
}
blockquote {
margin: 1em 40px;
}
/*
* Addresses styling not present in S5, Chrome.
*/
dfn {
font-style: italic;
}
/*
* Addresses styling not present in IE6/7/8/9.
*/
mark {
background: #ff0;
color: #000;
}
/*
* Addresses margins set differently in IE6/7.
*/
p,
pre {
margin: 0;
padding: 0;
}
/*
* Corrects font family set oddly in IE6, S4/5, Chrome.
* en.wikipedia.org/wiki/User:Davidgothberg/Test59
*/
code,
kbd,
pre,
samp {
font-family: monospace, serif;
_font-family: 'courier new', monospace;
font-size: 1em;
}
/*
* Improves readability of pre-formatted text in all browsers.
*/
pre {
white-space: pre;
white-space: pre-wrap;
word-wrap: break-word;
}
/*
* Addresses CSS quotes not supported in IE6/7.
*/
q {
quotes: none;
}
/*
* Addresses `quotes` property not supported in S4.
*/
q:before,
q:after {
content: '';
content: none;
}
small {
font-size: 75%;
}
/*
* Prevents `sub` and `sup` affecting `line-height` in all browsers.
* gist.github.com/413930
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
/* ==========================================================================
Lists
========================================================================== */
/*
* Addresses margins set differently in IE6/7.
*/
dl,
menu,
ol,
ul {
margin: 0;
}
dd {
margin: 0;
}
/*
* Addresses paddings set differently in IE6/7.
*/
menu,
ol,
ul {
padding: 0;
}
/*
* Corrects list images handled incorrectly in IE7.
*/
ul,
ol {
list-style: none;
list-style-image: none;
}
/* ==========================================================================
Embedded content
========================================================================== */
/*
* 1. Removes border when inside `a` element in IE6/7/8/9, FF3.
* 2. Improves image quality when scaled in IE7.
* code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/
*/
img {
border: 0;
/* 1 */
-ms-interpolation-mode: bicubic;
/* 2 */
margin: 0;
padding: 0;
}
/*
* Corrects overflow displayed oddly in IE9.
*/
svg:not(:root) {
overflow: hidden;
}
/* ==========================================================================
Figures
========================================================================== */
/*
* Addresses margin not present in IE6/7/8/9, S5, O11.
*/
figure {
margin: 0;
}
/* ==========================================================================
Forms
========================================================================== */
/*
* Corrects margin displayed oddly in IE6/7.
*/
form {
margin: 0;
}
/*
* Define consistent border, margin, and padding.
*/
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
/*
* 1. Corrects color not being inherited in IE6/7/8/9.
* 2. Corrects text not wrapping in FF3.
* 3. Corrects alignment displayed oddly in IE6/7.
*/
legend {
border: 0;
/* 1 */
padding: 0;
white-space: normal;
/* 2 */
}
/*
* 1. Corrects font size not being inherited in all browsers.
* 2. Addresses margins set differently in IE6/7, FF3+, S5, Chrome.
* 3. Improves appearance and consistency in all browsers.
*/
button,
input,
select,
textarea {
font-size: 100%;
/* 1 */
margin: 0;
/* 2 */
vertical-align: baseline;
/* 3 */
}
/*
* Addresses FF3/4 setting `line-height` on `input` using `!important` in the
* UA stylesheet.
*/
button,
input {
line-height: normal;
}
/*
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
* and `video` controls.
* 2. Corrects inability to style clickable `input` types in iOS.
* 3. Improves usability and consistency of cursor style between image-type
* `input` and others.
* 4. Removes inner spacing in IE7 without affecting normal text inputs.
* Known issue: inner spacing remains in IE6.
*/
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button;
/* 2 */
cursor: pointer;
/* 3 */
}
/*
* Re-set default cursor for disabled elements.
*/
button[disabled],
input[disabled] {
cursor: default;
}
/*
* 1. Addresses box sizing set to content-box in IE8/9.
* 2. Removes excess padding in IE8/9.
* 3. Removes excess padding in IE7.
* Known issue: excess padding remains in IE6.
*/
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box;
/* 1 */
padding: 0;
/* 2 */
}
/*
* 1. Addresses `appearance` set to `searchfield` in S5, Chrome.
* 2. Addresses `box-sizing` set to `border-box` in S5, Chrome (include `-moz`
* to future-proof).
*/
input[type="search"] {
-webkit-appearance: textfield;
/* 1 */
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
/* 2 */
box-sizing: content-box;
}
/*
* Removes inner padding and search cancel button in S5, Chrome on OS X.
*/
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/*
* Removes inner padding and border in FF3+.
*/
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
/*
* 1. Removes default vertical scrollbar in IE6/7/8/9.
* 2. Improves readability and alignment in all browsers.
*/
textarea {
overflow: auto;
/* 1 */
vertical-align: top;
/* 2 */
}
/* ==========================================================================
Tables
========================================================================== */
/*
* Remove most spacing between table cells.
*/
table {
border-collapse: collapse;
border-spacing: 0;
}
/* ==========================================================================
hr
========================================================================== */
hr {
visibility: hidden;
}
/* ==========================================================================
hr
========================================================================== */
a {
outline: none;
}
a, a:link {
outline: none;
}
a:visited {
outline: none;
}
/* module.scss */
* {
margin: 0;
padding: 0;
}
@media screen and (max-width: 767px) {
#screen {
margin-top: -70px;
padding-top: 70px;
}
}
body {
color: #333;
font-family: "Noto Sans JP", Meiryo, "メイリオ", Osaka, "MS P Gothic", "ＭＳ Ｐゴシック", sans-serif;
font-size: .875rem;
line-height: 1.7;
margin: 0;
padding: 0;
overflow-x: hidden;
}
@media screen and (min-width: 768px) {
body {
font-size: 1rem;
}
}
@media screen and (max-width: 1079px) {
/* スマホ, Tablet */
body {
width: 100%;
}
}
/* End MQ */
@media screen and (max-width: 767px) {
/* スマホ */
.pc_only {
display: none;
}
}
/* End MQ */
@media screen and (min-width: 768px) {
/* Tablet, PC */
.sp_only {
display: none;
}
}
/* End MQ */
a {
color: #333;
transition: .2s;
text-decoration: none;
}
a:hover {
opacity: .8;
transition: .2s;
}
a.anchor {
display: inline-block;
padding-top: 70px;
margin-top: -70px;
}
#screen {
position: relative;
min-height: 100%;
text-align: left;
}
#container {
margin: 0 auto;
clear: both;
position: relative;
}
section,
.section {
clear: both;
text-align: left;
margin: 0;
}
section p,
section ul,
.section p,
.section ul {
text-align: left;
}
.fadeInDown {
-webkit-animation-fill-mode: both;
-ms-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-duration: 1s;
-ms-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown;
visibility: visible !important;
}
@-webkit-keyframes fadeInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-20px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
}
}
@keyframes fadeInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-20px);
-ms-transform: translateY(-20px);
transform: translateY(-20px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
}
/*--------------------------------------
1 COLUMN用
--------------------------------------*/
.content {
/* 背景100％時のコンテンツ区切り */
width: 100%;
overflow: hidden;
text-align: left;
}
.content section,
.content .section {
margin: 0 auto;
}
@media screen and (max-width: 1079px) {
/* スマホ */
.content section,
.content .section {
width: 100%;
padding-left: 15px;
padding-right: 15px;
box-sizing: border-box;
}
}
/* End MQ */
@media screen and (min-width: 1080px) {
/* PC */
.content section,
.content .section {
padding-left: 0;
padding-right: 0;
box-sizing: border-box;
}
}
/* End MQ */
/*--------------------------------------
2 COLUMN用
--------------------------------------*/
#contents {
clear: both;
text-align: left;
min-height: 600px;
padding: 0;
margin: 0 auto 80px;
display: flex;
justify-content: space-between;
align-items: flex-start;
}
#contents {
width: 100%;
padding: 0 15px;
box-sizing: border-box;
flex-flow: column;
}
@media screen and (min-width: 768px) {
#contents {
flex-flow: row-reverse;
}
}
@media screen and (min-width: 1080px) {
#contents {
width: 1080px;
padding: 0;
}
}
#mainContents_02 {
width: 100%;
margin-bottom: 30px;
}
@media screen and (min-width: 768px) {
#mainContents_02 {
width: 70%;
margin-bottom: 0;
}
}
@media screen and (min-width: 1080px) {
#mainContents_02 {
width: 780px;
}
}
/* ------------------------------------------------
サイドバー
------------------------------------------------ */
#columnLeft {
overflow: hidden;
margin: 0 0 20px 0;
box-sizing: border-box;
}
#columnLeft {
width: 100%;
}
@media screen and (min-width: 768px) and (max-width: 1079px) {
#columnLeft {
width: 27%;
margin-left: auto;
margin-right: auto;
}
}
@media screen and (min-width: 1080px) {
#columnLeft {
width: 240px;
}
}
#columnLeft form {
margin: 0;
}
#columnLeft ul li {
list-style-type: none;
}
#columnLeft #widget_area ul ul {
margin: 0 0 0 10px;
}
#widget_area > ul {
margin: 0;
padding: 10px;
box-sizing: border-box;
font-size: .875rem;
border-top: solid 2px #00377C;
border-bottom: solid 2px #00377C;
}
#widget_area ul ul {
padding-top: 10px;
}
#widget_area ul > li {
border-bottom: dashed 1px #B8C9DA;
padding-bottom: 10px;
margin-bottom: 10px;
}
#widget_area ul > li:last-child {
border: none;
padding-bottom: 0;
margin-bottom: 0;
}
#widget_area ul > li > a:before {
content: "■";
font-size: .5rem;
color: #00377C;
padding-right: 8px;
box-sizing: border-box;
}
.ul_in > li > a:before {
content: ">" !important;
}
#columnLeft #widget_area ul ul ul, #columnLeft #widget_area ul ol {
margin: 0 0 0 10px;
}
#columnLeft section, #columnLeft .section {
overflow: hidden;
margin: 0 0 10px 0;
}
#columnLeft .side_hd p {
padding: 0 0 0 0;
font-weight: bold;
margin: 0 0 10px 0;
}
.side_title {
background: #FCAA0F;
padding: 8px 10px;
box-sizing: border-box;
color: #fff;
text-align: center;
font-size: 1.125rem;
font-weight: 500;
margin-bottom: 15px;
}
.side_title a {
color: #fff;
display: block;
}
.side_title a:hover {
opacity: .8;
}
/* ------------------------------------------------
メインイメージ
------------------------------------------------ */
.keyvisual {
padding: 0;
margin: 70px auto 40px;
background: #F7F7F7;
text-align: center;
}
@media screen and (min-width: 768px) {
.keyvisual {
margin: 0 auto 80px;
}
}
.keyvisual img {
margin: 0;
padding: 0;
width: 100%;
height: auto;
}
.pc_keyvisual {
padding: 0;
margin: 70px auto 10px;
text-align: center;
position: relative;
}
@media screen and (min-width: 768px) {
.pc_keyvisual {
margin: 0 auto 10px;
}
}
.pc_keyvisual img {
margin: 0;
padding: 0;
width: 100%;
height: 120px;
object-fit: cover;
}
@media screen and (min-width: 768px) {
.pc_keyvisual img {
height: 180px;
}
}
.keyvisual_title {
width: calc(100% - 30px);
max-width: 1080px;
margin-left: auto;
margin-right: auto;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
right: 0;
margin: auto;
display: flex;
align-items: flex-start;
flex-flow: column;
}
.keyvisual_title h1 {
position: relative;
font-size: 1.75rem;
color: #fff;
font-weight: 700;
line-height: 1.3;
text-align: left;
}
@media screen and (min-width: 768px) {
.keyvisual_title h1 {
font-size: 2rem;
}
}
.keyvisual_title p {
position: relative;
font-size: 1rem;
color: #fff;
}
@media screen and (min-width: 768px) {
.keyvisual_title p {
font-size: 1.25rem;
}
}
.keyvisual_title p:first-letter {
text-transform: capitalize;
}
.page_keyvisual {
width: calc(100% - 30px);
max-width: 1080px;
margin: 80px auto 0;
}
@media screen and (min-width: 768px) {
.page_keyvisual {
margin: 15px auto 0;
}
}
.page_keyvisual img {
width: 100%;
height: auto;
}
/* ------------------------------------------------
Hタグ
------------------------------------------------ */
.home section h2 {
/* トップページのh2は内部ページ h1と同じ */
}
section h1 a,
section h2 a,
section h3 a {
text-decoration: none;
}
section h1 a:hover,
section h2 a:hover,
section h3 a:hover,
section h1 a:active,
section h2 a:active,
section h3 a:active {
text-decoration: underline;
}
/* ------------------------------------------------
ぱんくずリスト
------------------------------------------------ */
.breadcrumbs {
margin: 10px auto 40px;
width: calc(100% - 30px);
max-width: 1080px;
}
.breadcrumbs p {
text-align: left;
font-size: .8125rem;
}
/* ------------------------------------------------
width 100% 画像幅100%
sectionに枠, 画像幅100%
------------------------------------------------ */
.single-body,
.entry_single-body {
width: 100%;
overflow: hidden;
}
.single-body img,
.entry_single-body img {
width: 100% !important;
max-width: 100% !important;
height: auto;
margin: 0 0 5px 0;
}
/* ------------------------------------------------
width 100%, バナー×2 横並べ
------------------------------------------------ */
.half {
width: 100%;
overflow: hidden;
}
.half .element_01,
.half .element_02 {
overflow: hidden;
}
.half .element_01 img,
.half .element_02 img {
width: 100%;
height: auto;
}
@media screen and (max-width: 767px) {
/* スマホ */
.half .element_01,
.half .element_02 {
width: 100%;
}
.half .element_01 {
margin-bottom: 15px;
}
}
/* End MQ */
@media screen and (min-width: 768px) {
/* Tablet, PC */
.half .element_01,
.half .element_02 {
width: 48%;
}
.half .element_01 {
float: left;
}
.half .element_02 {
float: right;
}
}
/* End MQ */
/* ------------------------------------------------
width 100%, イメージ×3 横並べ
------------------------------------------------ */
.third {
width: 100%;
overflow: hidden;
margin: 0 auto;
}
.third .element_01,
.third .element_02 {
overflow: hidden;
}
.third .element_01 img,
.third .element_02 img {
margin: 0 0 0 0;
width: 100%;
height: auto;
}
@media screen and (max-width: 767px) {
/* スマホ */
.third .element_01,
.third .element_02 {
width: 100%;
}
.third .element_01 {
margin-bottom: 15px;
}
}
/* End MQ */
@media screen and (min-width: 768px) and (max-width: 1079px) {
/* Tablet */
.third {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.third .element_01,
.third .element_02 {
width: 32%;
}
}
/* End MQ */
@media screen and (min-width: 1080px) {
/* PC */
.third .element_01,
.third .element_02 {
width: 226px;
}
.third .element_01 {
float: left;
margin-right: 16px;
}
.third .element_02 {
float: right;
margin-right: 0;
}
}
/* End MQ */
/* リストによる横並び */
.list_pc3_smp1, .list_pc3_smp1 ul, .list_pc3_smp1 li,
.list_pc3_smp2, .list_pc3_smp2 ul, .list_pc3_smp2 li {
overflow: hidden;
}
.list_pc3_smp1 li img,
.list_pc3_smp2 li img {
width: 100%;
height: auto;
margin-bottom: 10px;
}
@media screen and (max-width: 767px) {
.list_pc3_smp1 li {
width: 100%;
margin-bottom: 15px;
}
.list_pc3_smp1 li:last-child {
margin-bottom: 0;
}
}
/* End MQ */
.list_pc3_smp1 ul,
.list_pc3_smp2 ul {
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
}
.list_pc3_smp1 ul li,
.list_pc3_smp2 ul li {
margin-bottom: 16px;
}
@media screen and (min-width: 768px) {
.list_pc3_smp1 ul li,
.list_pc3_smp2 ul li {
width: 32%;
margin-right: 2%;
}
.list_pc3_smp1 ul li:nth-child(3n),
.list_pc3_smp2 ul li:nth-child(3n) {
margin-right: 0;
}
}
/* End MQ */
@media screen and (max-width: 767px) {
.list_pc3_smp2 ul li {
width: 48%;
margin-right: 4%;
}
.list_pc3_smp2 ul li:nth-child(2n) {
margin-right: 0;
}
}
/* ------------------------------------------------
width 100%, イメージ×3 横並べ liquid
------------------------------------------------ */
.third-liquid {
width: 100%;
overflow: hidden;
margin: 0 auto;
}
.third-liquid .element_01,
.third-liquid .element_02 {
overflow: hidden;
}
.third-liquid .element_01 img,
.third-liquid .element_02 img {
margin: 0 0 0 0;
width: 100%;
height: auto;
}
.third-liquid .element_01,
.third-liquid .element_02 {
width: 30%;
}
.third-liquid .element_01 {
float: left;
margin: 0 5% 0 0;
}
.third-liquid .element_02 {
float: right;
}
/* ------------------------------------------------
width 100%, イメージ×4 横並べ
------------------------------------------------ */
.list_pc4_smp2, .list_pc4_smp2 ul, .list_pc4_smp2 li {
overflow: hidden;
}
.list_pc4_smp2 li {
float: left;
}
.list_pc4_smp2 li img {
width: 100%;
height: auto;
}
@media screen and (max-width: 1079px) {
/* スマホ, Tablet */
.list_pc4_smp2 li {
width: 48%;
margin-bottom: 15px;
}
.list_pc4_smp2 li:nth-child(2n) {
float: right;
}
.list_pc4_smp2 li:nth-child(2n+1) {
clear: both;
}
}
/* End MQ */
@media screen and (min-width: 1080px) {
/* PC */
.list_pc4_smp2 li {
width: 167px;
margin-right: 24px;
margin-bottom: 24px;
}
.list_pc4_smp2 li:nth-child(2n) {
float: right;
margin-right: 0;
}
.list_pc4_smp2 li:nth-child(2n+1) {
clear: both;
}
}
/* End MQ */
/* ------------------------------------------------
width100%, 左イメージ×1 右コンテンツ
------------------------------------------------ */
.left_imgfix,
.left_imgfix-02 {
width: 100%;
overflow: hidden;
}
.left_imgfix img {
width: 130px;
float: left;
margin: 0 10px 10px 0;
}
.left_imgfix-02 .element_01 {
width: 230px;
}
.left_imgfix-02 .element_01 img {
width: 100%;
}
@media screen and (max-width: 767px) {
/* スマホ */
.left_imgfix-02 .element_01 {
width: 230px;
margin: 0 auto 10px auto;
}
}
/* End MQ */
@media screen and (min-width: 768px) {
/* Tablet, PC */
.left_imgfix-02 .element_01 {
width: 230px;
float: left;
}
.left_imgfix-02 .element_02 {
float: right;
}
}
/* End MQ */
@media screen and (min-width: 768px) and (max-width: 1079px) {
/* Tablet */
.left_imgfix-02 .element_02 {
width: calc(100% - 250px);
}
}
/* End MQ */
@media screen and (min-width: 1080px) {
/* PC */
.left_imgfix-02 .element_02 {
width: 460px;
}
}
/* End MQ */
/* ------------------------------------------------
左コンテンツ 右イメージ×1
------------------------------------------------ */
.right_imgfix,
.right_imgfix-02 {
width: 100%;
overflow: hidden;
}
.right_imgfix img {
width: 130px;
float: right;
margin: 0 0 10px 10px;
}
.right_imgfix-02 .element_01 {
width: 230px;
}
.right_imgfix-02 .element_01 img {
width: 100%;
}
@media screen and (max-width: 767px) {
/* スマホ */
.right_imgfix-02 .element_01 {
width: 230px;
margin: 0 auto 10px auto;
}
}
/* End MQ */
@media screen and (min-width: 768px) {
/* Tablet, PC */
.right_imgfix-02 .element_01 {
width: 230px;
float: right;
}
.right_imgfix-02 .element_02 {
float: left;
}
}
/* End MQ */
@media screen and (min-width: 768px) and (max-width: 1079px) {
/* Tablet */
.right_imgfix-02 .element_02 {
width: calc(100% - 250px);
}
}
/* End MQ */
@media screen and (min-width: 1080px) {
/* PC */
.right_imgfix-02 .element_02 {
width: 460px;
}
}
/* End MQ */
/* ------------------------------------------------
1カラムレイアウト 4分割
------------------------------------------------ */
.list_w_pc4_smp2,
.list_w_pc4_smp2 ul,
.list_w_pc4_smp2 li {
overflow: hidden;
}
.list_w_pc4_smp2 li {
float: left;
}
.list_w_pc4_smp2 li img {
width: 100%;
height: auto;
}
@media screen and (max-width: 1079px) {
/* スマホ, Tablet */
.list_w_pc4_smp2 li {
width: 48%;
}
.list_w_pc4_smp2 li:nth-child(2n) {
float: right;
}
.list_w_pc4_smp2 li:nth-child(2n+1) {
clear: both;
}
}
/* End MQ */
@media screen and (min-width: 1080px) {
/* PC */
.list_w_pc4_smp2 li {
width: 255px;
margin-right: 20px;
}
.list_w_pc4_smp2 li:nth-child(4n) {
float: right;
margin-right: 0;
}
.list_w_pc4_smp2 li:nth-child(4n+1) {
clear: both;
}
}
/* End MQ */
/* ------------------------------------------------
1カラムレイアウト 3分割
------------------------------------------------ */
.list_w_pc3_smp1, .list_w_pc3_smp1 ul, .list_w_pc3_smp1 li,
.list_w_pc3_smp2, .list_w_pc3_smp2 ul, .list_w_pc3_smp2 li,
.list_w_pc3_smp2, .list_w_pc3_smp3 ul, .list_w_pc3_smp3 li {
overflow: hidden;
}
.list_w_pc3_smp1 li img,
.list_w_pc3_smp2 li img,
.list_w_pc3_smp3 li img {
width: 100%;
height: auto;
}
@media screen and (max-width: 767px) {
.list_w_pc3_smp1 li {
width: 100%;
margin-bottom: 15px;
}
.list_w_pc3_smp1 li:last-child {
margin-bottom: 0;
}
}
/* End MQ */
@media screen and (max-width: 1079px) {
/* スマホ, Tablet */
.list_w_pc3_smp2 li {
width: 48%;
float: left;
margin-bottom: 16px;
}
.list_w_pc3_smp2 li:nth-child(2n) {
float: right;
}
.list_w_pc3_smp2 li:nth-child(2n+1) {
clear: both;
}
}
/* End MQ */
@media screen and (max-width: 1079px) {
/* スマホ, Tablet */
.list_w_pc3_smp3 ul {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.list_w_pc3_smp3 li {
width: 32%;
}
}
/* End MQ */
@media screen and (min-width: 768px) and (max-width: 1079px) {
/* Tablet */
.list_w_pc3_smp1 ul,
.list_w_pc3_smp2 ul {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.list_w_pc3_smp1 li,
.list_w_pc3_smp2 li {
width: 32%;
}
}
/* End MQ */
@media screen and (min-width: 1080px) {
/* PC */
.list_w_pc3_smp1 li,
.list_w_pc3_smp2 li,
.list_w_pc3_smp3 li {
float: left;
width: 340px;
margin-right: 30px;
margin-bottom: 20px;
}
.list_w_pc3_smp1 li:nth-child(3n),
.list_w_pc3_smp2 li:nth-child(3n),
.list_w_pc3_smp3 li:nth-child(3n) {
float: right;
margin-right: 0;
}
.list_w_pc3_smp1 li:nth-child(3n+1),
.list_w_pc3_smp2 li:nth-child(3n+1),
.list_w_pc3_smp3 li:nth-child(3n+1) {
clear: both;
}
}
/* End MQ */
/* ------------------------------------------------
1カラムレイアウト sigle-doouble,
1カラムレイアウト double-single,
1カラムレイアウト w-half, list_w02
------------------------------------------------ */
.single-double, .double-single,
.w-half, .list_w_pc2_smp1, .list_w_pc2_smp2 {
width: 100%;
overflow: hidden;
clear: both;
}
.single-double .area_01, .single-double .area_02,
.double-single .area_01, .double-single .area_02,
.w-half .area_01, .w-half .area_02,
.list_w_pc2_smp1 li,
.list_w_pc2_smp2 li {
overflow: hidden;
}
.single-double .area_01 img,
.double-single .area_01 img,
.w-half .area_01 img,
.w-half .area_02 img,
.list_w_pc2_smp1 li img,
.list_w_pc2_smp2 li img {
width: 100%;
height: auto;
}
@media screen and (max-width: 767px) {
/* スマホ */
.single-double .area_01,
.double-single .area_01,
.w-half .area_01,
.list_w_pc2_smp1 li {
margin-bottom: 15px;
}
}
/* End MQ */
@media screen and (max-width: 1079px) {
/* スマホ, Tablet */
.list_w_pc2_smp2 li {
float: left;
margin-bottom: 15px;
width: 49%;
}
.list_w_pc2_smp2 li:nth-child(2n) {
float: right;
}
.list_w_pc2_smp2 li:nth-child(2n+1) {
clear: both;
}
}
/* End MQ */
@media screen and (min-width: 768px) {
/* Tablet, PC */
.single-double .area_01,
.double-single .area_02 {
float: left;
}
.single-double .area_02,
.double-single .area_01 {
float: right;
}
.w-half .area_01 {
float: left;
}
.w-half .area_02 {
float: right;
}
.list_w_pc1_smp1 li:nth-child(2n) {
float: right;
}
.list_w_pc2_smp1 li:nth-child(2n+1) {
clear: both;
}
}
/* End MQ */
@media screen and (min-width: 768px) and (max-width: 1079px) {
/* Tablet */
.single-double .area_01,
.double-single .area_02 {
width: 29%;
}
.single-double .area_02,
.double-single .area_01 {
width: 70%;
}
.w-half .area_01,
.w-half .area_02 {
width: 48%;
}
.list_w_pc1_smp1 li {
float: left;
margin-bottom: 15px;
width: 48%;
}
}
/* End MQ */
@media screen and (min-width: 1080px) {
/* PC */
.single-double .area_01,
.double-single .area_02 {
width: 340px;
}
.single-double .area_02,
.double-single .area_01 {
width: 710px;
}
.w-half .area_01,
.w-half .area_02 {
width: 530px;
}
.list_w_pc2_smp1 li,
.list_w_pc2_smp2 li {
width: 530px;
float: left;
}
.list_w_pc2_smp1 li:nth-child(2n),
.list_w_pc2_smp2 li:nth-child(2n) {
float: right;
}
.list_w_pc2_smp1 li:nth-child(2n+1),
.list_w_pc2_smp2 li:nth-child(2n+1) {
clear: both;
}
}
/* End MQ */
/* ------------------------------------------------
挨拶文などの署名
------------------------------------------------ */
#signiture {
text-align: right;
}
/* ------------------------------------------------
予約カレンダー用
------------------------------------------------ */
#timetable table {
width: 100%;
border: solid 1px #39F;
border-collapse: collapse;
margin: 0 0 15px 0;
}
#timetable table th,
#timetable table td {
border: solid 1px #39F;
border-collapse: collapse;
text-align: center;
}
#timetable table th {
background: #E2F3FC;
color: #39F;
}
/* ------------------------------------------------
YouTube
------------------------------------------------ */
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* ------------------------------------------------
MAP
------------------------------------------------ */
.ggmap {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.ggmap iframe,
.ggmap object,
.ggmap embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* --ページのトップへ戻る--------------------- */
#pageTop {
text-decoration: none;
background: #FCAA0F;
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
position: fixed;
right: 5px;
bottom: 5px;
}
#pageTop img {
width: 20px;
height: 20px;
}
#pageTop:hover {
opacity: .8;
}
/* ------------------------------------------------
可変 Table
------------------------------------------------ */
.table_01 {
margin: 0 0 10px 0;
}
.table_01 dd {
width: 100%;
}
.table_01 .tbody {
overflow: hidden;
}
@media screen and (max-width: 767px) {
/* スマホ */
.table_01 {
width: 100%;
}
}
/* End MQ */
@media screen and (min-width: 768px) {
/* Tablet, PC */
.table_01 {
border-bottom: solid 1px #999;
border-right: solid 1px #999;
border-left: none;
}
}
/* End MQ */
@media screen and (max-width: 767px) {
/* スマホ */
.table_01 .tbody {
display: block;
border-top: solid 1px #999;
border-right: solid 1px #999;
border-left: solid 1px #999;
}
}
/* End MQ */
@media screen and (min-width: 768px) {
/* Tablet, PC */
.table_01 .tbody {
display: table-row-group;
}
}
/* End MQ */
@media screen and (max-width: 767px) {
/* スマホ */
.table_01 dl {
display: block;
font-size: 90%;
margin: 0;
}
}
/* End MQ */
@media screen and (min-width: 768px) {
/* Tablet, PC */
.table_01 dl {
display: table-row;
line-height: 1.6;
border-top: solid 1px #999;
overflow: hidden;
*zoom: 1;
width: 100%;
}
}
/* End MQ */
@media screen and (max-width: 767px) {
/* スマホ */
.table_01 dl dt,
.table_01 dl dd {
float: none;
display: block;
padding: 3px;
margin: 0;
border-bottom: solid 1px #999;
}
}
/* End MQ */
@media screen and (min-width: 768px) {
/* Tablet, PC */
.table_01 dl dt,
.table_01 dl dd {
display: table-cell;
*display: inline;
padding: 5px 8px;
border-top: solid 1px #999;
border-left: solid 1px #999;
*border-top: none;
*border-left: none;
vertical-align: middle;
*zoom: 1;
}
}
/* End MQ */
.table_01 dl dt {
background: #EEE;
font-weight: bold;
}
@media screen and (min-width: 768px) {
/* Tablet, PC */
.table_01 dl dt {
border-bottom: none;
min-width: 130px;
white-space: nowrap;
vertical-align: top;
}
}
/* End MQ */
@media screen and (min-width: 768px) {
/* Tablet, PC */
.table_01 dl dd {
border-bottom: none;
}
}
/* End MQ */
.table_01 dl dd label {
margin-right: 4px;
}
.table_01 dl dd label input {
margin-right: 4px;
}
.submit-button {
text-align: center;
}
.table_02 {
width: 100%;
margin-bottom: 20px;
border-collapse: collapse;
vertical-align: middle;
}
/* X方向にthが多いタイプのtable */
.table_02 th,
.table_02 td {
border: 1px solid #aaa;
padding: 15px;
}
.table_02 th {
background: #ffe4e1;
font-weight: normal;
}
.table_02 label {
line-height: 34px;
margin: 0;
}
@media screen and (max-width: 1079px) {
/* スマホ, Tablet */
.table_02 thead {
display: none;
}
.table_02 tr,
.table_02 td {
display: block;
width: auto;
}
.table_02 tr {
margin-bottom: 30px;
}
.table_02 td {
border: none;
border-bottom: 1px solid #ffe4e1;
box-sizing: border-box;
padding: 10px 0;
justify-content: space-between;
text-align: left;
}
.table_02 td::before {
content: attr(aria-label);
display: inline-block;
float: left;
text-align: left;
background: #ffe4e1;
width: 100%;
box-sizing: border-box;
margin-bottom: 8px;
font-weight: normal;
padding: 4px;
font-size: .875rem;
}
}
/* End MQ */
/* ------------------------------------------------
WP-Pagenavi
------------------------------------------------ */
.wp-pagenavi a, .wp-pagenavi span {
display: inline-block;
margin-bottom: 0.5em;
}
/* ------------------------------------------------
Contact Form7
------------------------------------------------ */
.table_01 dl dd textarea {
width: 100%;
}
.table_01 dl dd .wpcf7-checkbox .wpcf7-list-item {
display: block;
clear: both;
margin-bottom: 5px;
}
/* ------------------------------------------------
Clear Fix
------------------------------------------------ */
.clear {
clear: both;
}
/* ------------------------------------------------
カラー、サイズ、ライン など 微調整用
------------------------------------------------ */
/*カラー*/
.black {
color: #000 !important;
}
.red, .error {
color: #C03 !important;
}
.bold {
font-weight: bold;
}
/* -----------------------------------------------------------------------------------------------------------------------
背景色
----------------------------------------------------------------------------------------------------------------------- */
.bg_gray {
background-color: #CFCFCF !important;
}
.bg_blue {
background-color: #ADE4FF !important;
}
/* -----------------------------------------------------------------------------------------------------------------------
文字サイズ
----------------------------------------------------------------------------------------------------------------------- */
.fsize10 {
font-size: 0.625rem !important;
}
.fsize11 {
font-size: 0.6875rem !important;
}
.fsize12 {
font-size: 0.75rem !important;
}
.fsize13 {
font-size: 0.8125rem !important;
}
.fsize14 {
font-size: 0.875rem !important;
}
.fsize15 {
font-size: 0.9375rem !important;
}
.fsize16 {
font-size: 1rem !important;
}
.fsize17 {
font-size: 1.0625rem !important;
}
.fsize18 {
font-size: 1.125rem !important;
}
.fsize19 {
font-size: 1.1875rem !important;
}
.fsize20 {
font-size: 1.25rem !important;
}
.fsize21 {
font-size: 1.3125rem !important;
}
.fsize22 {
font-size: 1.375rem !important;
}
.fsize23 {
font-size: 1.4375rem !important;
}
.fsize24 {
font-size: 1.5rem !important;
}
/*▼▼▼ ＰＣ＆タブ ▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼*/
@media screen and (min-width: 768px) {
.pc_fsize10 {
font-size: 10px !important;
}
.pc_fsize11 {
font-size: 11px !important;
}
.pc_fsize12 {
font-size: 12px !important;
}
.pc_fsize13 {
font-size: 13px !important;
}
.pc_fsize14 {
font-size: 14px !important;
}
.pc_fsize15 {
font-size: 15px !important;
}
.pc_fsize16 {
font-size: 16px !important;
}
.pc_fsize17 {
font-size: 17px !important;
}
.pc_fsize18 {
font-size: 18px !important;
}
.pc_fsize19 {
font-size: 19px !important;
}
.pc_fsize20 {
font-size: 20px !important;
}
}
/*▼▼▼ スマホ ▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼*/
@media screen and (max-width: 767px) {
.sp_fsize10 {
font-size: 10px !important;
}
.sp_fsize11 {
font-size: 11px !important;
}
.sp_fsize12 {
font-size: 12px !important;
}
.sp_fsize13 {
font-size: 13px !important;
}
.sp_fsize14 {
font-size: 14px !important;
}
.sp_fsize15 {
font-size: 15px !important;
}
.sp_fsize16 {
font-size: 16px !important;
}
.sp_fsize17 {
font-size: 17px !important;
}
.sp_fsize18 {
font-size: 18px !important;
}
.sp_fsize19 {
font-size: 19px !important;
}
.sp_fsize20 {
font-size: 20px !important;
}
}
/* -----------------------------------------------------------------------------------------------------------------------
幅
----------------------------------------------------------------------------------------------------------------------- */
.w5 {
width: 5% !important;
}
.w10 {
width: 10% !important;
}
.w15 {
width: 15% !important;
}
.w20 {
width: 20% !important;
}
.w30 {
width: 30% !important;
}
.w35 {
width: 35% !important;
}
.w40 {
width: 40% !important;
}
.w45 {
width: 45% !important;
}
.w50 {
width: 50% !important;
}
.w60 {
width: 60% !important;
}
.w70 {
width: 70% !important;
}
.w80 {
width: 80% !important;
}
.w90 {
width: 90% !important;
}
.w100 {
width: 100% !important;
}
/*▼▼▼ ＰＣ＆タブ ▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼*/
@media screen and (min-width: 768px) {
.pc_w10 {
width: 10% !important;
}
.pc_w20 {
width: 20% !important;
}
.pc_w30 {
width: 30% !important;
}
.pc_w40 {
width: 40% !important;
}
.pc_w50 {
width: 50% !important;
}
.pc_w60 {
width: 60% !important;
}
.pc_w70 {
width: 70% !important;
}
.pc_w80 {
width: 80% !important;
}
.pc_w90 {
width: 90% !important;
}
.pc_w100 {
width: 100% !important;
}
}
/*▼▼▼ スマホ ▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼*/
@media screen and (max-width: 767px) {
.sp_w10 {
width: 10% !important;
}
.sp_w20 {
width: 20% !important;
}
.sp_w30 {
width: 30% !important;
}
.sp_w40 {
width: 40% !important;
}
.sp_w50 {
width: 50% !important;
}
.sp_w60 {
width: 60% !important;
}
.sp_w70 {
width: 70% !important;
}
.sp_w80 {
width: 80% !important;
}
.sp_w90 {
width: 90% !important;
}
.sp_w100 {
width: 100% !important;
}
}
/* -----------------------------------------------------------------------------------------------------------------------
文字配置
----------------------------------------------------------------------------------------------------------------------- */
.textc {
text-align: center !important;
}
.textr {
text-align: right !important;
}
.textl {
text-align: left !important;
}
.textj {
text-align: justify !important;
}
/*▼▼▼ ＰＣ＆タブ ▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼*/
@media screen and (min-width: 768px) {
.pc_textc {
text-align: center !important;
}
.pc_textr {
text-align: right !important;
}
.pc_textl {
text-align: left !important;
}
.pc_textj {
text-align: justify !important;
}
}
/*▼▼▼ スマホ ▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼*/
@media screen and (max-width: 767px) {
.sp_textc {
text-align: center !important;
}
.sp_textr {
text-align: right !important;
}
.sp_textl {
text-align: left !important;
}
.sp_textj {
text-align: justify;
}
}
/* -----------------------------------------------------------------------------------------------------------------------
余白微調整
----------------------------------------------------------------------------------------------------------------------- */
.mr20 {
margin-right: 20px;
}
.mr30 {
margin-right: 30px;
}
.no_margin {
margin: 0 !important;
}
.mra {
margin-right: auto !important;
}
.mla {
margin-left: auto !important;
}
.mt0 {
margin-top: 0px !important;
}
.mt5 {
margin-top: 5px !important;
}
.mt10 {
margin-top: 10px !important;
}
.mt15 {
margin-top: 15px !important;
}
.mt20 {
margin-top: 20px !important;
}
.mt30 {
margin-top: 30px !important;
}
.mt35 {
margin-top: 35px !important;
}
.mt40 {
margin-top: 40px !important;
}
.mt50 {
margin-top: 50px !important;
}
.mt60 {
margin-top: 60px !important;
}
.mt70 {
margin-top: 70px !important;
}
.mt80 {
margin-top: 80px !important;
}
.mt90 {
margin-top: 90px !important;
}
.mt100 {
margin-top: 100px !important;
}
.mb0 {
margin-bottom: 0px !important;
}
.mb5 {
margin-bottom: 5px !important;
}
.mb10 {
margin-bottom: 10px !important;
}
.mb15 {
margin-bottom: 15px !important;
}
.mb20 {
margin-bottom: 20px !important;
}
.mb25 {
margin-bottom: 25px !important;
}
.mb30 {
margin-bottom: 30px !important;
}
.mb40 {
margin-bottom: 40px !important;
}
.mb50 {
margin-bottom: 50px !important;
}
.mb60 {
margin-bottom: 60px !important;
}
.mb70 {
margin-bottom: 70px !important;
}
.mb80 {
margin-bottom: 80px !important;
}
.mb90 {
margin-bottom: 90px !important;
}
.mb100 {
margin-bottom: 100px !important;
}
.mb180 {
margin-bottom: 180px !important;
}
.mb200 {
margin-bottom: 200px !important;
}
.pdlr0 {
padding-left: 0 !important;
padding-right: 0 !important;
}
.pt0 {
padding-top: 0px !important;
}
.pb0 {
padding-bottom: 0px !important;
}
.pa10_all {
padding: 10px !important;
}
.no_pa {
padding: 0px !important;
}
.pt0 {
padding-top: 0px !important;
}
.pb0 {
padding-bottom: 0px !important;
}
.pa10_all {
padding: 10px !important;
}
.no_pa {
padding: 0px !important;
}
/*▼▼▼ タブ ▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼*/
@media screen and (min-width: 768px) {
.tb_mr20 {
margin-right: 20px !important;
}
.tb_mt0 {
margin-top: 0px !important;
}
.tb_mt5 {
margin-top: 5px !important;
}
.tb_mt10 {
margin-top: 10px !important;
}
.tb_mt15 {
margin-top: 15px !important;
}
.tb_mt20 {
margin-top: 20px !important;
}
.tb_mt30 {
margin-top: 30px !important;
}
.tb_mt40 {
margin-top: 40px !important;
}
.tb_mt50 {
margin-top: 50px !important;
}
.tb_mt60 {
margin-top: 60px !important;
}
.tb_mt70 {
margin-top: 70px !important;
}
.tb_mt80 {
margin-top: 80px !important;
}
.tb_mt90 {
margin-top: 90px !important;
}
.tb_mt100 {
margin-top: 100px !important;
}
.tb_mb0 {
margin-bottom: 0px !important;
}
.tb_mb5 {
margin-bottom: 5px !important;
}
.tb_mb10 {
margin-bottom: 10px !important;
}
.tb_mb15 {
margin-bottom: 15px !important;
}
.tb_mb20 {
margin-bottom: 20px !important;
}
.tb_mb30 {
margin-bottom: 30px !important;
}
.tb_mb40 {
margin-bottom: 40px !important;
}
.tb_mb50 {
margin-bottom: 50px !important;
}
.tb_mb60 {
margin-bottom: 60px !important;
}
.tb_mb70 {
margin-bottom: 70px !important;
}
.tb_mb80 {
margin-bottom: 80px !important;
}
.tb_mb90 {
margin-bottom: 90px !important;
}
.tb_mb100 {
margin-bottom: 100px !important;
}
}
/*▼▼▼ ＰＣ ▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼*/
@media screen and (min-width: 1080px) {
.pc_mr20 {
margin-right: 20px !important;
}
.pc_mt0 {
margin-top: 0px !important;
}
.pc_mt5 {
margin-top: 5px !important;
}
.pc_mt10 {
margin-top: 10px !important;
}
.pc_mt15 {
margin-top: 15px !important;
}
.pc_mt20 {
margin-top: 20px !important;
}
.pc_mt30 {
margin-top: 30px !important;
}
.pc_mt40 {
margin-top: 40px !important;
}
.pc_mt50 {
margin-top: 50px !important;
}
.pc_mt60 {
margin-top: 60px !important;
}
.pc_mt70 {
margin-top: 70px !important;
}
.pc_mt80 {
margin-top: 80px !important;
}
.pc_mt90 {
margin-top: 90px !important;
}
.pc_mt100 {
margin-top: 100px !important;
}
.pc_mb0 {
margin-bottom: 0px !important;
}
.pc_mb5 {
margin-bottom: 5px !important;
}
.pc_mb10 {
margin-bottom: 10px !important;
}
.pc_mb15 {
margin-bottom: 15px !important;
}
.pc_mb20 {
margin-bottom: 20px !important;
}
.pc_mb30 {
margin-bottom: 30px !important;
}
.pc_mb40 {
margin-bottom: 40px !important;
}
.pc_mb50 {
margin-bottom: 50px !important;
}
.pc_mb60 {
margin-bottom: 60px !important;
}
.pc_mb70 {
margin-bottom: 70px !important;
}
.pc_mb80 {
margin-bottom: 80px !important;
}
.pc_mb90 {
margin-bottom: 90px !important;
}
.pc_mb100 {
margin-bottom: 100px !important;
}
.pc_mb120 {
margin-bottom: 120px !important;
}
}
/*▼▼▼ スマホ ▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼*/
@media screen and (max-width: 767px) {
.sp_mt0 {
margin-top: 0px !important;
}
.sp_mt5 {
margin-top: 5px !important;
}
.sp_mt10 {
margin-top: 10px !important;
}
.sp_mt15 {
margin-top: 15px !important;
}
.sp_mt20 {
margin-top: 20px !important;
}
.sp_mt30 {
margin-top: 30px !important;
}
.sp_mt40 {
margin-top: 40px !important;
}
.sp_mt50 {
margin-top: 50px !important;
}
.sp_mt60 {
margin-top: 60px !important;
}
.sp_mt70 {
margin-top: 70px !important;
}
.sp_mt80 {
margin-top: 80px !important;
}
.sp_mt90 {
margin-top: 90px !important;
}
.sp_mt100 {
margin-top: 100px !important;
}
.sp_mb0 {
margin-bottom: 0px !important;
}
.sp_mb5 {
margin-bottom: 5px !important;
}
.sp_mb10 {
margin-bottom: 10px !important;
}
.sp_mb15 {
margin-bottom: 15px !important;
}
.sp_mb20 {
margin-bottom: 20px !important;
}
.sp_mb30 {
margin-bottom: 30px !important;
}
.sp_mb40 {
margin-bottom: 40px !important;
}
.sp_mb50 {
margin-bottom: 50px !important;
}
.sp_mb60 {
margin-bottom: 60px !important;
}
.sp_mb70 {
margin-bottom: 70px !important;
}
.sp_mb80 {
margin-bottom: 80px !important;
}
.sp_mb90 {
margin-bottom: 90px !important;
}
.sp_mb100 {
margin-bottom: 100px !important;
}
}
/*◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆
【 ６ 】 部分的に特別なデザインやレイアウトが必要な場合
◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆*/
/* -----------------------------------------------------------------------------------------------------------------------
FLEX 個別設定
----------------------------------------------------------------------------------------------------------------------- */
.flex {
display: flex;
}
.justify-between {
justify-content: space-between !important;
}
.justify-around {
justify-content: space-around !important;
}
.justify-center {
justify-content: center !important;
}
.justify-start {
justify-content: flex-start !important;
}
.justify-end {
justify-content: flex-end !important;
}
.align-center {
align-items: center !important;
}
.align-start {
align-items: flex-start !important;
}
.align-end {
align-items: flex-end !important;
}
.flex1 {
flex: 1;
}
@media screen and (max-width: 767px) {
.sp_flex {
display: flex;
}
.sp_align-end {
align-items: flex-end !important;
}
.sp_column-reverse {
flex-flow: column-reverse !important;
}
.sp_column {
flex-flow: column !important;
}
.sp_row {
flex-flow: row !important;
}
.sp_row-reverse {
flex-flow: row-reverse !important;
}
.sp_justify-center {
justify-content: center !important;
}
}
.sp_justify-end {
justify-content: flex-end !important;
}
@media screen and (min-width: 768px) {
.pc_flex {
display: flex;
}
.pc_column-reverse {
flex-flow: column-reverse !important;
}
.pc_column {
flex-flow: column !important;
}
.pc_row {
flex-flow: row !important;
}
.pc_row-reverse {
flex-flow: row-reverse !important;
}
.pc_justify-between {
justify-content: space-between !important;
}
.pc_justify-around {
justify-content: space-around !important;
}
.pc_justify-center {
justify-content: center !important;
}
.pc_justify-start {
justify-content: flex-start !important;
}
.pc_justify-end {
justify-content: flex-end !important;
}
.pc_align-center {
align-items: center !important;
}
.pc_align-start {
align-items: flex-start !important;
}
.pc_align-end {
align-items: flex-end !important;
}
}
.table_type01 {
width: calc(100% - 45px);
table-layout: fixed;
font-size: .75rem;
box-sizing: border-box;
margin-left: 45px;
margin-bottom: 40px;
}
@media screen and (min-width: 768px) {
.table_type01 {
font-size: .875rem;
margin-left: 65px;
width: calc(100% - 65px);
}
}
.table_type01 tr {
display: flex;
flex-flow: column;
}
@media screen and (min-width: 768px) {
.table_type01 tr {
flex-flow: row;
align-items: flex-start;
}
}
.table_type01 th {
font-size: .875rem;
font-weight: normal;
width: 100%;
display: flex;
justify-content: flex-start;
align-items: center;
padding: 12px 0 0;
box-sizing: border-box;
}
@media screen and (min-width: 768px) {
.table_type01 th {
padding: 30px 0 24px;
width: 30%;
}
}
.table_type01 td {
width: 100%;
padding: 12px 0;
box-sizing: border-box;
min-width: 300px;
}
@media screen and (min-width: 768px) {
.table_type01 td {
width: 70%;
padding: 24px 0;
}
}
.table_type01 td label {
display: flex;
justify-content: flex-start;
align-items: center;
}
.table_type01 td label span {
width: 100%;
flex: 1;
}
.table_type01 td label b {
font-weight: 400 !important;
display: flex;
justify-content: flex-start;
align-items: center;
margin: 0 6px;
}
.table_type01 textarea {
width: 100%;
box-sizing: border-box;
border-radius: 4px;
background: #f5f5f5;
border: solid 1px #e0e0e0;
font-size: 1rem;
padding: 10px;
font-family: "Noto Sans JP", Meiryo, "メイリオ", Osaka, "MS P Gothic", "ＭＳ Ｐゴシック", sans-serif;
max-height: 200px;
}
.table_type01 input[type="text"],
.table_type01 input[type="email"],
.table_type01 select {
padding: 10px;
width: 100%;
box-sizing: border-box;
border-radius: 4px;
background: #f5f5f5;
border: solid 1px #e0e0e0;
}
.table_type01 input[type="radio"] {
margin-right: 6px;
}
.wpcf7-spinner {
display: none !important;
}
.hisu {
color: #CB1717;
font-size: 1rem;
display: inline-block;
margin-left: 10px;
}
.contact_button {
text-align: center;
}
.contact_button input {
padding: 15px 80px;
vertical-align: middle;
line-height: 1;
background: #00377C;
border: 1px solid #00377C;
border-radius: 3px;
color: #ffffff;
font-family: inherit;
-webkit-appearance: none;
font-size: 1rem;
max-width: 380px;
margin-left: auto;
margin-right: auto;
}
.contact_button input:hover {
opacity: .7;
}
div.wpcf7 .ajax-loader {
display: none !important;
}
.wpcf7-mail-sent-ok {
display: none !important;
}
.sent .general {
display: none;
}
.general {
margin-bottom: 40px;
}
.title_type01 {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 40px;
}
.title_type01 h1, .title_type01 h2 {
position: relative;
font-size: 1.125rem;
font-weight: 700;
border-bottom: solid 2px #FCAA0F;
width: calc(100% - 40px);
padding-bottom: 5px;
}
@media screen and (min-width: 768px) {
.title_type01 h1, .title_type01 h2 {
font-size: 1.5rem;
width: calc(100% - 50px);
}
}
.title_type01 h1::before, .title_type01 h2::before {
width: 7px;
height: 7px;
background: #FCAA0F;
border-radius: 7px;
position: absolute;
left: 0;
bottom: -5px;
content: "";
}
.title_type01 h1 a:hover, .title_type01 h2 a:hover {
opacity: .8;
text-decoration: none !important;
}
.title_type01 img {
width: 30px;
height: auto;
}
@media screen and (min-width: 768px) {
.title_type01 img {
width: 40px;
}
}
.title_type02 {
display: flex;
justify-content: space-between;
align-items: center;
margin: 60px 0 40px;
box-sizing: border-box;
}
@media screen and (min-width: 768px) {
.title_type02 {
padding-left: 50px;
}
}
.title_type02 h2, .title_type02 h3 {
position: relative;
font-size: 1rem;
font-weight: 700;
border-bottom: solid 1px #00377C;
width: 100%;
padding-bottom: 5px;
padding-left: 30px;
box-sizing: border-box;
}
@media screen and (min-width: 768px) {
.title_type02 h2, .title_type02 h3 {
font-size: 1.25rem;
}
}
.title_type02 h2::before, .title_type02 h3::before {
content: "";
position: absolute;
left: 5px;
top: 11px;
width: 14px;
height: 14px;
background: #00377C;
}
.title_type03 {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 40px;
}
.title_type03 h2, .title_type03 h3 {
position: relative;
text-align: center;
font-size: 1.125rem;
font-weight: 700;
line-height: 1.4;
}
@media screen and (min-width: 768px) {
.title_type03 h2, .title_type03 h3 {
font-size: 2rem;
}
}
.feature_wrap {
display: flex;
justify-content: center;
align-items: center;
flex-flow: column;
margin-bottom: 60px;
}
@media screen and (min-width: 768px) {
.feature_wrap {
align-items: flex-start;
flex-flow: row;
}
}
@media screen and (min-width: 1080px) {
.feature_wrap {
margin-bottom: 90px;
justify-content: space-between;
align-items: stretch;
}
}
.picture01 img {
width: 100%;
height: auto;
}
.bg01 {
background: #F2F9FF;
padding: 80px 0;
}
.indent01 {
padding-left: 30px;
box-sizing: border-box;
}
@media screen and (min-width: 768px) {
.indent01 {
padding-left: 50px;
}
}
.topics_block {
width: calc(100% - 30px);
margin-left: auto;
}
@media screen and (min-width: 768px) {
.topics_block {
width: calc(100% - 80px);
}
}
.topics_block ul li {
margin-bottom: 10px;
}
@media screen and (min-width: 768px) {
.topics_block ul li {
margin-bottom: 0;
}
}
.topics_block ul li a {
display: flex;
justify-content: flex-start;
align-items: center;
flex-flow: column;
min-height: 60px;
box-sizing: border-box;
position: relative;
width: 100%;
font-size: .875rem;
}
@media screen and (min-width: 768px) {
.topics_block ul li a {
flex-flow: row;
}
}
.topics_block ul li a .date {
border-bottom: solid 1px #043F78;
width: 100%;
min-height: 60px;
box-sizing: border-box;
display: flex;
justify-content: flex-start;
align-items: center;
color: #00377C;
font-family: Arial, Helvetica, "sans-serif";
}
@media screen and (min-width: 768px) {
.topics_block ul li a .date {
width: 160px;
width: 90px;
justify-content: center;
}
}
.topics_block ul li a p + p {
border-bottom: solid 1px #CCC;
width: 100%;
min-height: 60px;
box-sizing: border-box;
display: flex;
justify-content: flex-start;
align-items: center;
padding-left: 5px;
padding-right: 40px;
}
@media screen and (min-width: 768px) {
.topics_block ul li a p + p {
width: calc(100% - 60px);
padding-left: 25px;
}
}
.topics_block ul li a p + p::after {
background: url("../images/common/topics_arrow.svg") no-repeat;
width: 30px;
height: 30px;
background-size: contain;
content: "";
right: 0;
top: 15px;
position: absolute;
}
@media screen and (min-width: 768px) {
.topics_block ul li a p + p::after {
right: 10px;
bottom: 0;
top: 0;
margin: auto;
}
}
.link_type01 {
text-align: center;
width: 80%;
margin: 20px auto;
}
.link_type01 a {
width: 100%;
box-sizing: border-box;
border-radius: 4px;
background: #FCAA0F;
padding: 6px 30px;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-size: .8125rem;
}
.link_type02 {
width: 80%;
margin-left: auto;
margin-top: 40px;
margin-bottom: 40px;
}
.link_type02 a {
max-width: 240px;
margin-left: auto;
box-sizing: border-box;
border-radius: 4px;
background: #00377C;
padding: 6px 30px;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-size: .8125rem;
}
.side_logo {
margin-top: 20px;
}
.side_logo img {
width: 100%;
height: auto;
max-width: 281px;
}
.usage {
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
margin-left: 40px;
}
@media screen and (min-width: 768px) {
.usage {
justify-content: flex-start;
margin-left: 65px;
}
}
.usage ul {
margin-bottom: 40px;
width: 48%;
}
@media screen and (min-width: 768px) {
.usage ul {
width: 23.5%;
margin-right: 2%;
}
.usage ul:nth-of-type(4n) {
margin-right: 0;
}
}
.usage ul li {
width: 100%;
margin-bottom: 5px;
}
.usage ul li a {
font-size: .8125rem;
}
@media screen and (min-width: 768px) {
.usage ul li a {
font-size: .875rem;
}
}
.usage ul li a::before {
content: "● ";
color: #00377C;
}
.half_list {
display: flex;
justify-content: center;
align-items: center;
flex-flow: column;
}
@media screen and (min-width: 768px) {
.half_list {
flex-flow: row;
}
}
.half_list li {
font-weight: 700;
}
@media screen and (min-width: 768px) {
.half_list li {
margin: 0 20px;
}
}
.box_type04 {
display: flex;
justify-content: center;
align-items: center;
flex-flow: column;
margin-bottom: 20px;
width: calc(100% - 30px);
margin-left: auto;
}
@media screen and (min-width: 768px) {
.box_type04 {
width: 100%;
margin-right: auto;
flex-flow: row;
justify-content: space-between;
align-items: flex-start;
}
}
.box_type04 .box_left {
width: 100%;
margin-bottom: 20px;
}
@media screen and (min-width: 768px) {
.box_type04 .box_left {
width: 70%;
margin-bottom: 0;
max-width: 530px;
}
}
.box_type04 .box_right {
width: 100%;
}
@media screen and (min-width: 768px) {
.box_type04 .box_right {
width: 30%;
}
}
.box_type04 a img {
width: 100%;
height: auto;
}
.box_type04 + .box_type03 {
width: calc(100% - 30px);
}
@media screen and (min-width: 768px) {
.box_type04 + .box_type03 {
margin-right: auto;
margin-right: 15px;
width: 100%;
}
}
.box_type04 + .box_type03 a {
width: 100%;
}
@media screen and (max-width: 767px) {
.box_type04 + .box_type03 a {
margin-left: auto;
width: calc(100% - 30px);
}
}
@media screen and (min-width: 768px) {
.box_type04 + .box_type03 a {
margin-right: auto;
}
}
/* 制作用ダミーエリア */
.box_type03 {
margin-left: auto;
margin-bottom: 20px;
}
@media screen and (min-width: 768px) {
.box_type03 {
width: 100%;
}
}
.box_type03 a {
/*width:calc(100% - 30px);*/
}
.box_type03 a img {
width: 100%;
height: auto;
}
/* header.scss */
.header {
width: 100%;
border-top: solid 5px #00377C;
border-bottom: solid 1px #ccc;
/*overflow: hidden;*/
display: none;
}
@media screen and (min-width: 768px) {
.header {
display: block;
}
}
.header_inner {
display: flex;
justify-content: space-between;
align-items: center;
width: calc(100% - 30px);
max-width: 1080px;
margin-left: auto;
margin-right: auto;
padding-top: 10px;
box-sizing: border-box;
flex-flow: column;
}
@media screen and (min-width: 1080px) {
.header_inner {
flex-flow: row;
height: 73px;
}
}
.header_right {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 15px;
}
@media screen and (min-width: 1080px) {
.header_right {
margin-top: 0;
}
}
.header_right .tel a {
border: solid 1px #00B050;
width: 190px;
height: 50px;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
color: #00B050;
font-size: 1.3125rem;
}
.header_right .tel a small {
font-size: .875rem;
display: inline-block;
position: relative;
top: 3px;
}
.header_right .tel a:hover {
background: #00B050;
color: #fff;
}
.header_right .c_button a {
width: 190px;
height: 50px;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
background: #00B050;
font-size: .9325rem;
}
.header_right .c_button a img {
margin-right: 8px;
}
.logo {
display: flex;
justify-content: flex-start;
align-items: flex-end;
flex-flow: column;
}
@media screen and (min-width: 560px) {
.logo {
flex-flow: row;
}
}
.logo p {
font-size: .875rem;
line-height: 1.3;
position: relative;
margin-left: 15px;
font-weight: 500;
top: 2px;
}
@media screen and (min-width: 560px) {
.logo p {
top: -6px;
}
}
.logo p small {
font-family: Arial, Helvetica, "sans-serif";
font-weight: 400;
}
@media screen and (min-width: 560px) {
.logo p small {
display: block;
}
}
.logo img {
width: 75vw;
height: auto;
}
@media screen and (min-width: 560px) {
.logo img {
width: 65vw;
}
}
@media screen and (min-width: 768px) {
.logo img {
width: auto;
}
}
@media screen and (max-width: 1079px) {
/* スマホ, Tablet */
.menu-text {
position: absolute;
top: 28px;
right: 8px;
color: #FFF;
font-size: .7rem;
font-family: Arial, Helvetica, "sans-serif";
}
}
/* End MQ */
@media screen and (min-width: 1080px) {
/* PC */
.menu-text {
display: none;
}
}
/* End MQ */
@media screen and (max-width: 767px) {
/* スマホ */
.sub_title {
position: absolute;
top: 12px;
left: 10px;
}
.logo img {
width: 230px;
}
}
@media screen and (max-width: 767px) and (max-width: 560px) {
.sub_title {
top: 5px;
}
}
/* End MQ */
@media screen and (min-width: 768px) {
/* Tablet, PC */
.sub_title {
display: none;
}
}
/* End MQ */
/* gnav.scss */
@media screen and (min-width: 768px) {
/* PC */
.gnav_pc {
width: calc(100% - 30px);
height: 58px;
margin-left: auto;
margin-right: auto;
}
.gnav_pc ul {
max-width: 1080px;
height: 58px;
margin-left: auto;
margin-right: auto;
display: flex;
justify-content: space-between;
align-items: center;
}
.gnav_pc ul li a {
color: #00377C;
font-size: .9325rem;
}
.gnav_pc ul li {
position: relative;
}
.gnav_pc .sub-menu {
position: absolute;
top: 100%;
left: -10px;
width: auto;
height: auto;
background: #C9E0FF;
opacity: 0;
visibility: hidden;
transition: 0.3s;
flex-direction: column;
align-items: flex-start;
gap: 6px;
padding: 8px 4px;
z-index: 5;
}
.gnav_pc .sub-menu li {
}
.gnav_pc .sub-menu li a {
padding: 10px;
white-space: nowrap;
font-size: 14px;
}
.gnav_pc li.menu-item-has-children:hover .sub-menu {
opacity: 1;
visibility: visible;
}
#gnav_mm {
display: none !important;
}
}
/* End MQ */
/*! #######################################################################
MeanMenu 2.0.6
--------
To be used with jquery.meanmenu.js by Chris Wharton (http://www.meanthemes.com/plugins/meanmenu/)
####################################################################### */
@media screen and (max-width: 767px) {
.gnav_pc {
display: none;
}
a.meanmenu-reveal {
display: none;
}
/* 一番上のバー */
.mean-container .mean-bar {
position: fixed;
z-index: 999;
right: 0;
top: 0;
height: 70px;
border-bottom: solid 1px #00377C;
background: #fff;
width: 100%;
}
.mean-container a.meanmenu-reveal {
width: 30px;
height: 31px;
padding: 8px 10px 14px 10px;
position: absolute;
top: 8px;
right: 8px !important;
cursor: pointer;
color: #fff;
text-decoration: none;
line-height: 22px;
display: block;
z-index: 1000;
background: #00377C;
}
}
@media screen and (max-width: 767px) and (max-width: 767px) {
#service_post a.meanmenu-reveal {
display: none !important;
}
}
@media screen and (max-width: 767px) {
.mean-container a.meanmenu-reveal span {
display: block;
background: #fff;
height: 2px;
margin-top: 6px;
}
.mean-container a.meanmenu-reveal span:first-of-type {
margin-top: 3px;
}
/*開いた中のバー*/
.mean-container .mean-nav {
width: 100%;
}
.mean-container .mean-nav > ul {
padding: 0;
margin: 0;
height: calc(100% - 70px);
top: 70px;
width: 100%;
display: flex;
justify-content: flex-start;
align-items: center;
flex-flow: column;
list-style-type: none;
background: #00377C;
position: fixed;
overflow-y: auto;
}
.mean-container .mean-nav ul li {
position: relative;
width: 100%;
}
.mean-container .mean-nav ul li a {
display: block;
width: 90%;
padding: 1em 5%;
margin: 0;
text-align: left;
color: #fff;
border-top: 1px solid #383838;
border-top: 1px solid rgba(255, 255, 255, 0.5);
text-decoration: none;
text-transform: uppercase;
}
.mean-container .mean-nav ul li li a {
width: 80%;
padding: 1em 10%;
border-top: 1px solid #f1f1f1;
border-top: 1px solid rgba(255, 255, 255, 0.25);
opacity: 0.75;
filter: alpha(opacity=75);
text-shadow: none !important;
visibility: visible;
}
.mean-container .mean-nav ul li.mean-last a {
border-bottom: none;
margin-bottom: 0;
}
.mean-container .mean-nav ul li li li a {
width: 70%;
padding: 1em 15%;
}
.mean-container .mean-nav ul li li li li a {
width: 60%;
padding: 1em 20%;
}
.mean-container .mean-nav ul li li li li li a {
width: 50%;
padding: 1em 25%;
}
.mean-container .mean-nav ul li a:hover {
background: #004eaf;
}
.mean-container .mean-nav ul li a.mean-expand {
margin-top: 1px;
width: 26px;
height: 29px;
padding: 7px 12px 16px 12px;
text-align: center;
position: absolute;
right: 0;
top: 0;
z-index: 2;
font-weight: 700;
background: #004eaf;
border: none !important;
border-left: 1px solid rgba(255, 255, 255, 0.4) !important;
}
.mean-container .mean-nav ul li a.mean-expand:hover {
background: #004eaf;
}
.mean-container .mean-push {
float: left;
width: 100%;
padding: 0;
margin: 0;
clear: both;
}
.mean-nav .wrapper {
width: 100%;
padding: 0;
margin: 0;
}
/* Fix for box sizing on Foundation Framework etc. */
.mean-container .mean-bar, .mean-container .mean-bar * {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
}
.mean-remove {
display: none !important;
}
/* footer.scss */
.footer {
width: 100%;
}
.footer_top {
background: #F7F7F7;
padding: 33px 0 43px;
display: none;
}
@media screen and (min-width: 768px) {
.footer_top {
display: block;
}
}
.footer_top nav {
width: calc(100% - 30px);
max-width: 1080px;
margin-left: auto;
margin-right: auto;
}
.footer_top nav ul {
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
}
@media screen and (min-width: 768px) and (max-width: 1079px) {
.footer_top nav ul li {
display: block;
margin-right: 20px;
width: 31%;
}
.footer_top nav ul li:nth-child(3n) {
margin-right: 0;
}
}
@media screen and (min-width: 1080px) {
.footer_top nav ul li {
margin-right: 25px;
width: 23%;
}
.footer_top nav ul li:nth-child(4n) {
margin-right: 0;
}
}
.footer_top nav ul li a {
padding: 10px 0;
box-sizing: border-box;
color: #00377C;
font-size: .8125rem;
border-bottom: solid 1px #CCC;
position: relative;
display: flex;
justify-content: flex-start;
align-items: center;
}
.footer_top nav ul li a::after {
position: absolute;
content: "";
right: 0;
bottom: 0;
top: 0;
margin: auto;
background: url("../images/common/arrow.svg") no-repeat;
width: 7px;
height: 11px;
background-size: contain;
}
.footer_bottom {
background: #00377C;
padding: 42px 0 48px;
color: #fff;
}
.footer_bottom .footer_inner {
width: calc(100% - 30px);
max-width: 1080px;
margin-left: auto;
margin-right: auto;
display: flex;
justify-content: center;
align-items: center;
flex-flow: column;
}
@media screen and (min-width: 1080px) {
.footer_bottom .footer_inner {
justify-content: space-between;
align-items: flex-end;
flex-flow: row;
}
}
.footer_bottom .address {
font-size: .875rem;
display: flex;
justify-content: center;
align-items: center;
flex-flow: column;
margin-bottom: 30px;
}
@media screen and (min-width: 768px) {
.footer_bottom .address {
flex-flow: row;
justify-content: space-between;
align-items: flex-start;
}
}
@media screen and (min-width: 1080px) {
.footer_bottom .address {
margin-left: 45px;
margin-bottom: 0;
}
}
.footer_bottom .address p {
margin-bottom: 10px;
}
.footer_bottom .address ul {
font-family: Arial, Helvetica, "sans-serif";
}
@media screen and (min-width: 1080px) {
.footer_bottom .address ul {
margin-left: 50px;
}
}
.footer_bottom .address ul li a {
color: #fff;
}
.footer_bottom .f_logo {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 32px;
flex-flow: column;
}
@media screen and (min-width: 768px) {
.footer_bottom .f_logo {
flex-flow: row;
justify-content: flex-start;
}
.footer_bottom .f_logo img {
width: 320px;
height: auto;
}
}
.footer_bottom .f_logo p {
margin-left: 25px;
box-sizing: border-box;
font-size: .875rem;
}
.footer_bottom .f_logo p small {
font-family: Arial, Helvetica, "sans-serif";
display: block;
line-height: 1.2;
}
/*.footer_bottom .f_logo img {*/
/* width: 320px;*/
/* height: auto; }*/
@media screen and (min-width: 400px) {
.footer_bottom .f_logo img {
width: auto;
}
}
.footer_bottom .f_right {
display: flex;
justify-content: center;
align-items: center;
flex-flow: column;
font-size: .75rem;
}
@media screen and (min-width: 480px) {
.footer_bottom .f_right {
justify-content: flex-end;
align-items: flex-end;
flex-flow: row;
}
}
.footer_bottom .f_right a {
color: #fff;
display: block;
}
.footer_bottom .f_right a::before {
content: "― ";
}
@media screen and (min-width: 480px) {
.footer_bottom .f_right a {
margin-right: 25px;
}
}
/* CSS for Top Page */
@media screen and (min-width: 1080px) {
/* PC */
.home section,
.home .section {
width: 1080px;
}
}
/* End MQ */
.box_type01 {
border: solid 1px #00377C;
border-radius: 10px;
box-sizing: border-box;
width: calc(100% - 45px);
margin-left: auto;
height: 200px;
color: #00377C;
font-size: 1rem;
padding: 5px 10px;
}
@media screen and (min-width: 768px) {
.box_type01 {
height: 340px;
width: 200px;
margin-left: 20px;
}
}
@media screen and (min-width: 1080px) {
.box_type01 {
width: 250px;
margin-left: 0;
}
}
.top_half_block {
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-flow: column;
margin-bottom: 80px;
padding-left: 45px;
box-sizing: border-box;
}
@media screen and (min-width: 768px) {
.top_half_block {
flex-flow: row;
align-items: center;
padding-left: 65px;
}
}
.top_half_block .top_half_left {
width: 100%;
margin-bottom: 30px;
}
@media screen and (min-width: 768px) {
.top_half_block .top_half_left {
width: 65%;
margin-bottom: 0;
}
}
.top_half_block .top_half_left img {
width: 100%;
height: auto;
}
.top_half_block .top_half_right {
width: 100%;
}
@media screen and (min-width: 768px) {
.top_half_block .top_half_right {
width: 30%;
}
}
.box_type02 {
box-sizing: border-box;
width: 100%;
text-align: center;
}
@media screen and (min-width: 768px) {
.box_type02 {
height: 280px;
}
}
.box_type02 img {
width: 80%;
height: auto;
}
@media screen and (min-width: 768px) {
.box_type02 img {
width: 100%;
}
}
.box_type03 {
width: 100%;
}
@media screen and (min-width: 1080px) {
.box_type03 {
width: 250px;
}
}
.box_type03 img {
width: 100%;
height: auto;
border: solid 1px #00377C;
border-radius: 10px;
box-sizing: border-box;
}
.bg02 {
padding-left: 20px;
box-sizing: border-box;
}
@media screen and (min-width: 768px) {
.bg02 {
padding-left: 6%;
}
}
@media screen and (min-width: 1080px) {
.bg02 {
padding-left: 11.42%;
}
}
.bg02 .content {
padding: 80px 0;
background: #F2F9FF;
box-sizing: border-box;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
}
@media screen and (min-width: 768px) {
.bg02 .content {
padding: 80px 0 80px 65px;
}
}
.bg02 .content section {
width: 100%;
max-width: 950px;
margin-right: 11.42%;
}
@media screen and (min-width: 768px) {
.bg02 .content section {
margin-left: 0;
margin-right: auto;
}
}
@media screen and (min-width: 1080px) {
.bg02 .content section {
max-width: 1000px;
}
}
.bg03 {
background: url("../images/top/info_back.jpg") no-repeat;
padding: 80px 0;
background-size: cover;
border-top: solid 1px #F5F9FE;
}
.top_product_block {
display: flex;
justify-content: flex-end;
flex-flow: column;
padding-left: 30px;
}
@media screen and (min-width: 768px) {
.top_product_block {
padding-left: 50px;
box-sizing: border-box;
padding-right: 15px;
}
}
@media screen and (min-width: 1080px) {
.top_product_block {
flex-flow: row;
padding-right: 0;
}
}
.top_product_block > ul {
display: flex;
justify-content: flex-start;
flex-flow: column;
}
@media screen and (min-width: 768px) {
.top_product_block > ul {
flex-flow: row;
justify-content: flex-end;
}
}
.top_product_block > ul > li {
width: 100%;
margin-bottom: 30px;
}
@media screen and (min-width: 768px) {
.top_product_block > ul > li {
width: 310px;
margin-left: 20px;
}
}
@media screen and (min-width: 1080px) {
.top_product_block > ul > li {
margin-bottom: 0;
margin-right: 20px;
margin-left: 0;
}
}
.top_product_block > ul > li a {
display: flex;
justify-content: flex-start;
flex-flow: column;
background: #fff;
}
.top_product_block > ul > li a p {
text-align: center;
background: #00377C;
color: #fff;
width: 100%;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
font-size: .875rem;
}
.top_product_block > ul > li a ul li {
width: 100%;
height: 40px;
background: #fff;
border-bottom: solid 1px #F2F9FF;
box-sizing: border-box;
display: flex;
justify-content: flex-start;
align-items: center;
padding-left: 40px;
position: relative;
font-size: .875rem;
}
.top_product_block > ul > li a ul li::before {
position: absolute;
left: 15px;
top: 0;
bottom: 0;
content: "";
background: url("../images/common/arrow.svg") no-repeat;
width: 7px;
height: 11px;
background-size: contain;
margin: auto;
}
.top_product_block > ul > li a ul li span:first-of-type {
width: 45%;
}
.top_product_block > ul > li a ul li span:last-of-type {
width: 55%;
}
.top_product_block > ul > li a img {
width: 100%;
height: auto;
}
.feature_block {
padding: 0 0 0 30px;
box-sizing: border-box;
width: 100%;
}
@media screen and (min-width: 768px) {
.feature_block {
padding: 0 0 0 50px;
}
}
@media screen and (min-width: 768px) and (max-width: 1079px) {
.feature_block {
flex: 1;
}
}
@media screen and (min-width: 1080px) {
.feature_block {
width: 100%;
margin-right: 35px;
padding: 0 0 0 100px;
}
}
.feature_block ul {
width: 100%;
margin-bottom: 40px;
min-height: 40px;
}
@media screen and (min-width: 768px) and (max-width: 1079px) {
.feature_block ul {
margin-left: auto;
margin-right: auto;
}
}
@media screen and (min-width: 1080px) {
.feature_block ul {
margin-bottom: 0;
}
}
.feature_block ul li a {
display: flex;
justify-content: flex-start;
border: solid 1px #DEDEDE;
background-color: #C9E0FF;
box-sizing: border-box;
margin-bottom: 10px;
overflow: hidden;
}
.feature_block ul li a .number {
display: flex;
justify-content: space-between;
position: relative;
}
.feature_block ul li a .number img {
width: auto;
height: 102%;
object-fit: contain;
position: absolute;
top: 0;
right: 0;
}
.feature_block ul li a span {
color: #00377C;
text-align: justify;
min-width: 120px;
display: inline-block;
text-align-last: justify;
}
.feature_block ul li a strong {
background: #00377C;
width: 120px;
color: #fff;
font-size: 1rem;
font-weight: 500;
min-height: 40px;
display: flex;
justify-content: flex-start;
align-items: center;
position: relative;
padding-left: 10px;
box-sizing: border-box;
}
@media screen and (min-width: 768px) {
.feature_block ul li a strong {
font-size: 1.125rem;
padding-left: 0;
padding-right: 12px;
justify-content: center;
}
}
.feature_block ul li a b {
font-family: 'Oswald', sans-serif;
font-size: 1.375rem;
font-weight: 400;
display: inline-block;
margin-left: 10px;
}
.feature_block ul li a small {
font-size: .875rem;
display: block;
position: relative;
left: -8px;
}
.feature_block ul div + div {
font-size: 1rem;
font-weight: 500;
width: calc(100% - 120px);
padding: 10px;
line-height: 1.4;
box-sizing: border-box;
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-flow: column;
}
@media screen and (min-width: 768px) {
.feature_block ul div + div {
align-items: center;
flex-flow: row;
font-size: 1.125rem;
padding: 6px 20px 6px 5px;
}
}
.title_type01 + p {
margin-bottom: 40px;
}
.top_field {
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
margin-bottom: 40px;
padding-left: 30px;
}
@media screen and (min-width: 768px) {
.top_field {
justify-content: flex-start;
padding-left: 50px;
}
}
.top_field li {
width: 48%;
margin-bottom: 20px;
}
@media screen and (min-width: 768px) {
.top_field li {
width: 23.5%;
margin-right: 2%;
}
.top_field li:nth-of-type(4n) {
margin-right: 0;
}
}
.top_field li img {
width: 100%;
height: auto;
border-radius: 6px;
border: solid 1px #00377C;
box-sizing: border-box;
}
.top_field li p {
font-size: .875rem;
text-align: center;
margin-top: 6px;
}
.about-wrap {
margin-bottom: 80px;
}
.about-media-block {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 30px;
}
.about-media-block .content {
}
.about-media-block .media {
}
.about-media-block .media img {
max-width: 100%;
}
.about-product {
display: grid;
gap: 20px;
}
.about-product-item {
}
.about-product-item-image {
border: solid 1px #ccc;
box-sizing: border-box;
padding: 10px;
}
.about-product-item-image img {
width: 100%;
height: auto;
}
.about-product-item-title {
text-align: center;
background: #00377C;
color: #fff;
width: 100%;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
font-size: .875rem;
}
@media screen and (min-width: 1080px) {
.about-media-block {
flex-direction: row;
align-items: baseline;
}
.about-media-block .content {
width: 55%;
padding-right: 30px;
}
.about-media-block .media {
width: 45%;
}
.about-product {
grid-template-columns: 1fr 1fr 1fr;
gap: 20px;
}
.about-product-item-image {
width: 100%;
height: auto;
aspect-ratio: 4 / 3;
}
.about-product-item-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
}