/* ■■■■■■■■■■■ */
/* mixin-variable mixin・変数 */
/* ■■■■■■■■■■■ */
/*-----------------変数------------------*/
/*メディアクエリ*/
/*---------------カラー----------------*/
/*画像ズーム*/
/*---------------------------------------------------------------- ここからは旧式 ----------------------------------------------------------------*/
@charset 'UTF-8';
.main-c-back {
background-color: #0B3D96;
}
.sub-c1-back {
background-color: #f2fdff;
}
.sub-c2-back {
background-color: #c2e0ec;
}
.sub-c2-bor {
border: 2px solid #ea8f02;
}
.sub-c3-back {
background-color: #ddf1f9;
}
/*カラーリスト*/
/*white*/
/*black9*/
/*$black3*/
/*$black3*/
/*$black3*/
/*$black3*/
/*$black3*/
/*$black3*/
/*$black3*/
/*black3*/
/*black3*/
/*black3*/
/*black3*/
/*black3*/
/*black3*/
/*black3*/
/*black3*/
/*black3*/
/*gray1*/
/*gray3*/
/*black3*/
/*black3*/
/*black3*/
/*black3*/
/*black3*/
/*black3*/
/*black3*/
/*black3*/
.color-border10 {
border-color: #444444;
border: solid 1px;
/*black3*/
}
.color-bg11 {
background-color: #f2f2f2;
}
.color-bg12 {
background-color: #e3e3e3;
}
/*旧カラー*/
/*カラー*/
.bg-sub-color1 {
background-color: #cccccc;
}
.bg-sub-color2 {
background-color: #000000;
}
/*テキストカラー*/
/*テキストカラー*/
.text-maincolor {
color: #333333;
}
.text-white {
color: #ffffff;
}
/*ボーダーカラー*/
/*ボックスフレームカラー*/
.bg-black {
background-color: #333333;
}
.border-black {
border: solid 3px #333333;
}
.txt-black {
color: #333333;
}
.bg-red {
background-color: #ea0202;
}
.border-red {
border: solid 3px #ea0202;
}
.txt-red {
color: #ea0202;
}
.bg-light-gray {
background-color: #f2f2f2;
}
.border-light-gray {
border: solid 3px #f2f2f2;
}
.txt-light-gray {
color: #f2f2f2;
}
.bg-main-color {
background-color: #f08437;
}
.border-main-color {
border: solid 3px #f08437;
}
.txt-main-color {
color: #f08437;
}
/*ツートbg*/
.twotone-white-gray {
background: linear-gradient(90deg, #f8f8f8 0%, #f8f8f8 50%, #f1f1f1 50%, #f1f1f1 100%);
}
/*-----------------mixin------------------*/
/*アニメーション*/
/*見出し*/
/*-----------------mixin------------------*/
/*コンテンツ背景*/
/*コンテンツ大枠*/
/*ボタンのマージンや大きさ*/
/*画像のマージンや大きさ*/
/*--------------------------ボタン--------------------------------*/
/*小ボタン*/
/*大ボタン*/
/*WEB作品集バッジ*/
/*■■■■■■■■■■■テーマ打ち消し■■■■■■■■■■■■■*/
.container {
padding-left: 0px;
padding-right: 0px;
}
@media (min-width: 769px) {
.container {
width: 100%;
}
}
@media (max-width: 768px) {
.container {
width: 100%;
}
}
/*.container{
@include pc{width: 1110px;};
@include sp{width:100%;};
margin: 0 auto;
padding-left:15px;
padding-right:15px;
}*/
@media screen and (min-width: 768px) {
.container, .container-md, .container-sm {
max-width: 100% !important;
}
.container, .container-md, .container-sm {
max-width: 100% !important;
}
.container {
max-width: 100% !important;
}
}
/*
@media screen and (min-width:768px) {
.container, .container-md, .container-sm {
max-width: 95% !important;}
.container, .container-md, .container-sm {
max-width: 95% !important;
}
.container {
max-width: 95% !important;
}
}
*/
.wp-block-vk-blocks-heading {
margin: 0 0 0 0;
}
.wp-block-columns {
margin: 0 0 0 0;
}
figure {
margin: 0 0 0 0;
}
.wp-block-image {
margin-bottom: 0px;
}
.carousel {
margin-top: -25px;
}
.siteContent {
padding: 0px;
}
p {
display: block;
margin-block-start: 0px;
margin-block-end: 0px;
margin-inline-start: 0px;
margin-inline-end: 0px;
line-height: calc(39/17);
margin-bottom: 24px;
}
.mainSection-title, h2, h3, h4, h5, h6 {
margin: 0px;
clear: both;
}
.subSection-title, h3 {
padding-bottom: 0px;
position: relative;
border-bottom: none;
}
body.single .page-header, .entry-meta-dataList, .entry-meta .entry-meta_items_term, .comments-area {
display: none;
}
html {
height: 100%;
}
h3::after {
border-bottom: 0px solid;
}
/* ■■■■■■■■■■■ */
/* primary 基本設定 */
/* ■■■■■■■■■■■ */
/*------------基本設定----------------*/
html {
overflow: auto;
}
html {
scroll-behavior: smooth;
}
body {
position: relative;
min-height: 100%;
height: auto !important;
width: 100%;
overflow: hidden;
word-wrap: break-word;
/* 単語の途中でも改行 */
-webkit-animation: fadeIn 2s ease 0s 1 normal;
font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
animation-name: loadfad;
animation-duration: 2s;
animation-iteration-count: 1;
}
@media (min-width: 769px) {
body {
line-height: 160%;
}
}
@media (max-width: 768px) {
body {
line-height: 200%;
}
}
@keyframes loadfad {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
* {
box-sizing: border-box;
}
/*アクセス時フェードイン
@keyframes fadeIn {
0% {opacity: 0}
100% {opacity: 1}}
@-webkit-keyframes fadeIn {
0% {opacity: 0}
100% {opacity: 1}}
*/
/*フレックス設定*/
@media (max-width: 768px) {
.wp-block-columns {
justify-content: space-between;
}
}
/*----------リンク関連----------*/
a {
cursor: pointer;
text-decoration: none;
}
a:hover {
overflow: hidden;
text-decoration: none;
}
@media (min-width: 769px) {
a:hover {
transition: 0.5s;
opacity: 0.3;
}
}
@media (min-width: 769px) {
a:hover img {
transition: 0.5s;
opacity: 0.4;
}
}
/*--------テキスト---------*/
p, li, h2, h3, h4, h5, h6 {
color: #444444;
}
@media (min-width: 769px) {
p, li, h2, h3, h4, h5, h6 {
font-size: 16px;
}
}
@media (max-width: 768px) {
p, li, h2, h3, h4, h5, h6 {
font-size: 16px;
}
}
p {
letter-spacing: 2px;
}
ul {
padding-inline-start: 20px;
}
.ek-linked-block a:hover {
background-color: #ffffff;
transition: 1.5s;
opacity: 0.5;
}
/*--------------------------------------メインビジュアル--------------------------------------*/
.siteContent {
margin-top: -2px;
}
/*テキスト調整 位置_PC右 SP中央*/
.siteHeader {
border-top: 5px solid #0B3D96;
}
.slide-text-title {
display: inline-block;
background-color: white;
padding: 20px;
opacity: 0.9;
}
@media (min-width: 769px) {
.slide-text-title {
font-size: 2vw;
}
}
@media (min-width: 769px) {
.slide-text-set {
left: 65%;
}
}
.siteHeader {
box-shadow: none;
}
@media (min-width: 769px) {
.slide picture > img {
width: 100%;
min-height: 600px;
object-fit: cover;
}
}
.carousel-inner img {
opacity: 0;
transform: scale(1.2);
transition: 1.5s;
}
.carousel-inner.show img {
opacity: 1;
transform: scale(1);
}
.carousel {
border-bottom: none;
border-top: none;
margin-top: 0px;
}
/*---------------ヘッダー----------------------------*/
.siteHeader, .header_scrolled .gMenu_outer {
background-color: #ffffff;
}
.siteHeader .container {
margin: 0 auto;
}
@media (min-width: 769px) {
.siteHeader .container {
max-width: 1080px !important;
width: 100%;
}
}
@media (max-width: 768px) {
.siteHeader .container {
width: 95%;
}
}
.gMenu a {
color: #444444 !important;
display: block !important;
padding: 10px 20px !important;
}
.gMenu a:hover {
opacity: 0.3 !important;
transition: 0.5s !important;
}
.gMenu > li:before {
border-bottom: none;
}
/*メニュの伸びるボーダー*/
サブメニュー▼ .gMenu > li.menu-item-has-children::after {
border-bottom-color: #0B3D96 !important;
bottom: 9px !important;
}
.gMenu > li > ul.sub-menu {
background-color: #0B3D96;
}
.gMenu ul li a, .gMenu ul li a:hover {
color: #fff !important;
font-size: 14px;
}
.gMenu > li.menu-item-has-children::after {
border-bottom-color: #0B3D96 !important;
}
.device-pc .gMenu > li.menu-item-has-children:hover::after, .gMenu > li.acc-parent-open::after {
opacity: 1;
bottom: 9px;
}
.vk-menu-acc .acc-btn {
padding-left: 600px;
margin-right: -280px;
}
/*
.siteHeader{
@include pc{margin-top: -26px !important;};
@include sp{
margin-top: -29px !important;};}
.siteHeader .container {
@include sp{padding-top: 12px;
padding-bottom: 12px;};
}
.slide img, .slide picture>img {
@include sp{margin-top:25px !important;
margin-bottom:10px !important;};}
.page-header {
background: url("http://www.siteworks.site/herb2102/wp-content/uploads/2021/02/pageheader.png") no-repeat 50% center;
background-size: auto;
background-size: cover;
color: #333;
text-shadow: 1px 1px 10px #fff, -1px 1px 10px #fff, 1px -1px 10px #fff, -1px -1px 10px #fff;
}
*/
#content p {
font-size: 18px;
}
.wp-block-table.is-style-stripes td {
border-color: #cccccc;
}
/*--------------------------------------フッター調整--------------------------------------*/
.mainSection {
margin-bottom: -1px;
}
@media (min-width: 769px) {
.single footer {
width: 100%;
bottom: 0px;
}
}
/*フッターカラー*/
.section.siteFooter {
background: #0B3D96;
border-top-color: #0B3D96;
}
.copySection p {
color: #ffffff;
font-size: 14px;
}
.copySection {
border-top: var(--color-footer-border, #ccc);
display: flex !important;
align-items: center;
justify-content: center;
}
footer a, footer p {
color: #ffffff;
text-decoration: none !important;
}
footer a:hover {
opacity: 0.5;
transition: 0.5s;
}
/*フッターナビボタン*/
.foot-navi {
position: fixed;
}
@media (min-width: 769px) {
.foot-navi {
bottom: 40%;
right: 1%;
z-index: 999;
width: 45px;
}
}
@media (max-width: 768px) {
.foot-navi {
display: flex;
bottom: 3%;
right: 18%;
z-index: 999;
width: 35%;
}
}
.scrolled .page_top_btn {
border-radius: 50%;
background-color: #0B3D96;
padding: 25px;
border: solid 2px #aacfdd;
}
.page_top_btn {
border-radius: 50%;
background-color: #0B3D96;
padding: 25px;
border: solid 2px #aacfdd;
box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
}
/*---------------ニュース-------------------------*/
.wp-block-latest-posts__post-author, .wp-block-latest-posts__post-date {
font-size: 0.8125em;
}
@media (min-width: 769px) {
.wp-block-latest-posts__post-author, .wp-block-latest-posts__post-date {
display: inline;
margin-left: 20px;
}
}
@media (max-width: 768px) {
.wp-block-latest-posts__post-author, .wp-block-latest-posts__post-date {
display: block;
}
}
.wp-block-latest-posts li time {
color: #0B3D96;
}
/*--------------------------------------コンタクトフォーム--------------------------------------*/
.wpcf7 input[name="your-name"], .wpcf7 input[name="your-email"], .wpcf7 input[name="your-subject"] {
height: 35px;
}
@media (min-width: 769px) {
.wpcf7 input[name="your-name"], .wpcf7 input[name="your-email"], .wpcf7 input[name="your-subject"] {
width: 100%;
}
}
@media (max-width: 768px) {
.wpcf7 input[name="your-name"], .wpcf7 input[name="your-email"], .wpcf7 input[name="your-subject"] {
width: 100%;
}
}
.wpcf7 textarea[name="your-message"] {
width: 100%;
}
@media (min-width: 769px) {
.wpcf7 textarea[name="your-message"] {
height: 350px !important;
}
}
@media (max-width: 768px) {
.wpcf7 textarea[name="your-message"] {
height: 250px !important;
}
}
.wpcf7 label {
display: block;
}
.btn-primary {
font-size: 24px;
border: none;
background-color: #0B3D96;
padding: 16px 32px;
filter: drop-shadow(0px 1px 2px #8bbad0);
border-radius: 0px;
margin-top: 16px;
}
@media (min-width: 769px) {
.btn-primary {
max-width: 350px;
min-width: 300px;
}
}
@media (max-width: 768px) {
.btn-primary {
width: 90%;
font-size: 16px;
}
}
.btn-primary:hover {
opacity: 0.8;
transition: 0.5s;
background-color: #c2e0ec;
}
/*ウィジェット*/
.subSection .widget {
margin-top: 25px;
}
/*----------------個別投稿一覧ページ-------------*/
.post-3948 {
padding: 80px 0px;
}
.page-id-3948 h2, .single h2 {
margin-bottom: 24px;
}
.page-id-3948 .wp-block-separator, .single .wp-block-separator {
border-top: 1px none;
border-bottom: 1px none;
}
@media (min-width: 769px) {
.page-id-3948 .wp-block-post-title a, .page-id-3948 .wp-block-post-featured-image a, .single .wp-block-post-title a, .single .wp-block-post-featured-image a {
display: block;
}
}
@media (min-width: 769px) {
.page-id-3948 figure {
width: 300px;
float: left;
margin: 0 24px 24px 0;
}
}
@media (max-width: 768px) {
.page-id-3948 figure img {
margin-bottom: 24px;
}
}
.page-id-3948 h2 {
border-top-color: #0B3D96;
}
.alignwide {
margin-left: 0px;
margin-right: 0px;
}
.wp-block-read-more {
display: inline;
width: -moz-fit-content;
width: fit-content;
}
.blog-inline ul {
display: inline-block !important;
}
@media (min-width: 769px) {
.wp-block-post-featured-image a {
display: inline !important;
}
}
/*----------------個別投稿ページ-------------*/
.single .siteContent, .single .breadSection, .category .siteContent, .category .breadSection {
padding-left: 5%;
padding-right: 5%;
max-width: 1080px;
margin: 0 auto;
}
.single .siteContent {
margin-top: 40px;
}
.category .siteContent {
margin-top: 40px;
margin-bottom: 80px;
}
.single p {
margin-bottom: 24px;
}
.single h2 {
margin-top: 48px;
margin-bottom: 40px;
text-align: left !important;
position: relative;
padding-bottom: 0.2em;
border-bottom: 15px solid #ccc;
border-top: transparent;
}
.single h2::after {
position: absolute;
bottom: -15px;
left: 0;
z-index: 2;
content: '';
width: 20%;
height: 14px;
background-color: #0B3D96;
}
.single h3 {
margin: 40px 0px 0px 0px;
text-align: left !important;
}
.single h4 {
margin: 32px 0px;
}
@media (min-width: 769px) {
.single .siteHeader_logo {
margin-bottom: 0px !important;
}
}
.postNextPrev .card {
margin-bottom: 24px;
}
/*----------------slick--------------*/
.slick-slider {
padding: 0px;
}
/* Arrows */
.slick-prev, .slick-next {
font-size: 0;
line-height: 0;
position: absolute;
top: 50%;
display: block;
width: 20px;
height: 20px;
padding: 0;
-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
cursor: pointer;
color: transparent;
border: none;
outline: none;
background: transparent;
}
.slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus {
color: transparent;
outline: none;
background: transparent;
}
.slick-prev:hover:before, .slick-prev:focus:before, .slick-next:hover:before, .slick-next:focus:before {
opacity: 1;
}
.slick-prev.slick-disabled:before, .slick-next.slick-disabled:before {
opacity: 0.25;
}
.slick-prev:before, .slick-next:before {
font-family: 'slick';
font-size: 30px;
line-height: 1;
opacity: 0.75;
color: #ffffff;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.slick-prev {
left: 1%;
z-index: 2;
}
[dir='rtl'] .slick-prev {
right: -25px;
left: auto;
}
.slick-prev:before {
/* content: '◀';*/
content: '';
display: inline-block;
/*忘れずに！*/
background-image: url(https://www.siteworks.site/testsite/wp-content/uploads/2022/02/prev.png);
background-repeat: no-repeat;
background-size: contain;
}
@media (min-width: 769px) {
.slick-prev:before {
width: 30px;
height: 30px;
}
}
@media (max-width: 768px) {
.slick-prev:before {
width: 30px;
height: 30px;
}
}
[dir='rtl'] .slick-prev:before {
content: '→';
}
.slick-next {
right: 3%;
z-index: 2;
}
[dir='rtl'] .slick-next {
right: auto;
left: -25px;
}
.slick-next:before {
/*content: '▶';*/
content: '';
display: inline-block;
/*忘れずに！*/
background-image: url(https://www.siteworks.site/testsite/wp-content/uploads/2022/02/next.png);
background-size: contain;
background-repeat: no-repeat;
}
@media (min-width: 769px) {
.slick-next:before {
width: 30px;
height: 30px;
}
}
@media (max-width: 768px) {
.slick-next:before {
width: 30px;
height: 30px;
}
}
[dir='rtl'] .slick-next:before {
content: '←';
}
/* Dots */
.slick-dotted.slick-slider {
margin-bottom: 30px;
}
.slick-dots {
position: absolute;
display: block;
width: 100%;
padding: 0;
margin: 0;
list-style: none;
text-align: center;
}
@media (min-width: 769px) {
.slick-dots {
bottom: -45px;
}
}
@media (max-width: 768px) {
.slick-dots {
bottom: -30px;
}
}
.slick-dots li {
position: relative;
display: inline-block;
width: 20px;
height: 20px;
margin: 0 5px;
padding: 0;
cursor: pointer;
}
.slick-dots li button {
font-size: 0;
line-height: 0;
display: block;
width: 20px;
height: 20px;
padding: 5px;
cursor: pointer;
color: transparent;
border: 0;
outline: none;
background: transparent;
}
.slick-dots li button:hover, .slick-dots li button:focus {
outline: none;
}
.slick-dots li button:hover:before, .slick-dots li button:focus:before {
opacity: 1;
}
.slick-dots li button:before {
font-family: 'slick';
font-size: 20px;
line-height: 20px;
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
content: '•';
text-align: center;
opacity: 0.25;
color: black;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before {
opacity: 0.75;
color: black;
}
/*スライダー*/
.slider00 {
margin: 0px auto;
}
.slider01 img {
height: auto;
width: 100%;
}
.slider00 {
margin: 0px auto;
}
.slider01 img {
height: auto;
width: 100%;
}
/*slick setting*/
.slick-prev:before, .slick-next:before {
color: #888888;
}
.slider02 {
margin: 0px auto;
width: 100%;
}
.slider02 img {
height: auto;
width: 100%;
}
.slider03 {
width: 100%;
}
.slider03 img {
max-width: 100%;
}
/* 櫻井追加記述 */
.slider04 img {
max-width: 90vw;
object-fit: cover;
}
@media (min-width: 769px) {
.slider04 img {
height: 60vh;
}
}
@media (max-width: 768px) {
.slider04 img {
height: 80vh;
}
}
.slick-position {
position: relative;
top: 50%;
transform: translateY(-50%);
}
/* 櫻井追加記述ここまで */
.slick-loading .slick-list {
/* Slider */
background: #fff url('./ajax-loader.gif') center center no-repeat;
}
/* Icons */
@font-face {
font-family: 'slick';
font-weight: normal;
font-style: normal;
src: url('./fonts/slick.eot');
src: url('./fonts/slick.eot?#iefix') format('embedded-opentype'), url('./fonts/slick.woff') format('woff'), url('./fonts/slick.ttf') format('truetype'), url('./fonts/slick.svg#slick') format('svg');
}
/*----------fullscss---------*/
@media (min-width: 769px) {
.f-cont-std {
max-width: 1110px;
min-width: 1110px;
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
}
}
@media (max-width: 768px) {
.f-cont-std {
max-width: 95%;
margin: 0 auto;
}
}
/*繝輔Ξ繝�け繧ｹ繧ｫ繝ｩ繝�縲隕ｪ隕∫ｴ�*/
.f-flxwrp-w-spb {
display: flex;
justify-content: space-between;
}
@media (min-width: 769px) {
.f-flxwrp-w-spb {
flex-wrap: nowrap;
}
}
@media (max-width: 768px) {
.f-flxwrp-w-spb {
flex-wrap: wrap;
}
}
.f-flxwrp-nw-spb {
display: flex;
flex-wrap: wrap;
}
@media (min-width: 769px) {
.f-flxwrp-nw-spb {
justify-content: space-between;
}
}
/*繝輔Ξ繝�け繧ｹ繧ｫ繝ｩ繝�縲蟄占ｦ∫ｴ�*/
.c-clm25-50-card li {
list-style-type: none;
}
@media (min-width: 769px) {
.c-clm25-50-card li {
margin-left: 16px;
}
}
@media (max-width: 768px) {
.c-clm25-50-card li {
margin-left: 8px;
}
}
.c-clm25-50-card li:first-child {
margin-left: 0px;
}
@media (max-width: 768px) {
.c-clm25-50-card ul li:nth-child(even) {
margin-left: 8px;
}
}
@media (max-width: 768px) {
.c-clm25-50-card ul li:nth-child(odd) {
margin-left: 0px;
}
}
@media (min-width: 769px) {
.c-clm25-50 {
flex-basis: 25%;
}
}
@media (max-width: 768px) {
.c-clm25-50 {
flex-basis: 44% !important;
flex-grow: 1 !important;
}
}
@media (min-width: 769px) {
.f-flx29 {
flex-basis: 29%;
}
}
@media (max-width: 768px) {
.f-flx29 {
flex-basis: 100%;
}
}
@media (min-width: 769px) {
.f-flx30 {
flex-basis: 30%;
}
}
@media (max-width: 768px) {
.f-flx30 {
flex-basis: 100%;
}
}
@media (min-width: 769px) {
.f-flx32 {
flex-basis: 32%;
}
}
@media (max-width: 768px) {
.f-flx32 {
flex-basis: 100%;
}
}
@media (min-width: 769px) {
.f-flx40 {
flex-basis: 40%;
}
}
@media (max-width: 768px) {
.f-flx40 {
flex-basis: 100%;
}
}
@media (min-width: 769px) {
.f-flx50 {
flex-basis: 49%;
}
}
@media (max-width: 768px) {
.f-flx50 {
flex-basis: 100%;
}
}
@media (min-width: 769px) {
.f-flx60 {
flex-basis: 59%;
}
}
@media (max-width: 768px) {
.f-flx60 {
flex-basis: 100%;
}
}
@media (min-width: 769px) {
.f-flx70 {
flex-basis: 69%;
}
}
@media (max-width: 768px) {
.f-flx70 {
flex-basis: 100%;
}
}
@media (min-width: 769px) {
.f-flx25-50 {
flex-basis: 24%;
}
}
@media (max-width: 768px) {
.f-flx25-50 {
flex-basis: 49%;
}
}
/*逕ｻ蜒丞ｹ�ｪｿ謨ｴ*/
.f-img-max100 {
max-width: 100%;
}
.f-img80 {
max-width: 80%;
}
@media (min-width: 769px) {
.f-img-pcmax7 {
max-width: 7%;
}
}
.f-max640 {
max-width: 640px;
}
.f-img100 {
width: 100%;
}
.f-suiteki1 {
position: absolute;
z-index: 999;
filter: brightness(340%) drop-shadow(2px 4px 6px rgba(45, 0, 80, 0.6)) saturate(20%) hue-rotate(10deg);
opacity: 0.8;
}
@media (min-width: 769px) {
.f-suiteki1 {
top: -5vw;
left: -5%;
}
}
@media (max-width: 768px) {
.f-suiteki1 {
width: 70vw;
top: -12vw;
left: -30%;
}
}
@media (min-width: 769px) {
.f-suiteki1 img {
width: 40vw;
}
}
@media (max-width: 768px) {
.f-suiteki1 img {
width: 70vw;
}
}
.f-suiteki2 {
z-index: 999;
filter: brightness(340%) drop-shadow(2px 4px 6px rgba(45, 0, 80, 0.6)) saturate(20%) hue-rotate(10deg);
opacity: 0.8;
}
@media (min-width: 769px) {
.f-suiteki2 {
position: absolute;
top: -5vw;
right: -8%;
}
}
@media (max-width: 768px) {
.f-suiteki2 {
position: absolute;
width: 70vw;
top: -12vw;
right: -40%;
}
}
@media (min-width: 769px) {
.f-suiteki2 img {
width: 40vw;
}
}
@media (max-width: 768px) {
.f-suiteki2 img {
width: 70vw;
}
}
/*----------コンテンツ背景----------*/
.cont-back-white {
width: 100%;
position: relative;
background-color: #ffffff;
}
.cont-back-yellow {
width: 100%;
position: relative;
background-color: #eceae2;
}
/*----------コンテンツ大枠 pc:960px(920) sp:95%----------*/
.content-frame {
margin: 0 auto;
box-sizing: border-box;
position: relative;
}
@media (min-width: 769px) {
.content-frame {
max-width: 1100px;
}
}
/*--------------------------------------幅--------------------------------------*/
.max-60 {
max-width: 60px;
}
@media (min-width: 769px) {
.max-1110 {
margin: 0 auto;
max-width: 1110px;
}
}
@media (min-width: 769px) {
.max-960 {
margin: 0 auto;
max-width: 960px;
}
}
@media (min-width: 769px) {
.max-850 {
margin: 0 auto;
max-width: 850px;
}
}
@media (min-width: 769px) {
.max-769 {
margin: 0 auto;
max-width: 769px;
}
}
.wid-70per {
width: 70%;
}
/*-----------------------------コンテンツからはみ出る背景-----------------------------*/
.fluid-box-wp {
position: relative;
left: 50%;
transform: translateX(-50%);
}
@media (min-width: 769px) {
.fluid-box-wp {
width: 102vw;
min-width: 1200px;
}
}
@media (max-width: 768px) {
.fluid-box-wp {
width: 100vw;
padding-right: 16px !important;
padding-left: 16px !important;
}
}
.fluid-box-wp40 {
position: relative;
left: 50%;
transform: translateX(-50%);
}
@media (min-width: 769px) {
.fluid-box-wp40 {
width: 102vw;
min-width: 1200px;
}
}
@media (max-width: 768px) {
.fluid-box-wp40 {
width: 100vw;
padding: 0 40px;
}
}
.fluid-box-wp-map {
position: relative;
left: 50%;
transform: translateX(-50%);
}
@media (min-width: 769px) {
.fluid-box-wp-map {
width: 100vw;
min-width: 1200px;
}
}
@media (max-width: 768px) {
.fluid-box-wp-map {
width: 100vw;
padding: 24px;
}
}
/*----パディング80 基本-----*/
@media (min-width: 769px) {
.pd-section {
padding: 80px 0px;
}
}
@media (max-width: 768px) {
.pd-section {
padding: 40px 0px;
}
}
@media (min-width: 769px) {
.pd-section-half {
padding-top: 0px;
padding-bottom: 80px;
}
}
@media (max-width: 768px) {
.pd-section-half {
padding-top: 0px;
padding-bottom: 40px;
}
}
@media (min-width: 769px) {
.fluid-pd-section {
padding: 80px 120px 80px 120px;
}
}
@media (max-width: 768px) {
.fluid-pd-section {
padding-top: 40px;
padding-bottom: 40px;
}
}
@media (min-width: 769px) {
.fluid-pd-section-half {
padding: 0px 120px 80px 120px;
}
}
@media (max-width: 768px) {
.fluid-pd-section-half {
padding-top: 0px;
padding-bottom: 40px;
}
}
@media (min-width: 769px) {
.fluid-pd80 {
padding: 80px 120px 80px 120px;
}
}
/*----パディング0の場合-----*/
@media (min-width: 769px) {
.fluid-pdb0 {
padding: 80px 120px 0px 120px;
}
}
/*----パディング0の場合-----*/
@media (min-width: 769px) {
.fluid-pd0 {
padding: 0px 120px 0px 120px;
}
}
/*----パディング上下32の場合-----*/
@media (min-width: 769px) {
.fluid-pd32 {
padding: 32px 120px 32px 120px;
}
}
/*--------------------------------------背景色があるときのコンテンツ位置調整--------------------------------------*/
.fluid-1col {
max-width: 1110px;
margin: 0 auto;
}
.fluid-1col-txt {
position: relative;
max-width: 1110px;
margin: 0 auto;
}
@media (min-width: 769px) {
.fluid-1col-txt {
right: 5%;
}
}
.fluid-0col {
position: relative;
max-width: 1110px;
margin: 0 auto;
}
.fluid-2col {
position: relative;
max-width: 1110px;
margin: 0 auto;
}
@media (min-width: 769px) {
.fluid-2col {
right: 4%;
}
}
.fluid-left {
position: relative;
}
@media (min-width: 769px) {
.fluid-left {
left: 4%;
}
}
.fluid-1col-r-600 {
position: relative;
max-width: 600px;
margin: 0 auto;
}
@media (min-width: 769px) {
.fluid-1col-r-600 {
right: 5%;
}
}
/*-------------コンテンツボックス-------------*/
.cont-box {
background-color: #ffffff;
}
@media (min-width: 769px) {
.cont-box {
padding: 64px 90px;
border-radius: 10px;
}
}
@media (max-width: 768px) {
.cont-box {
padding: 64px 10px;
border-radius: 10px;
}
}
.cont-box-orangeborder {
border: solid 3px #f08437;
background-color: #f08437;
}
.cont-box-orangeborder-white {
border: solid 3px #f08437;
background-color: #ffffff;
}
.cont-box-blackborder-white {
border: solid 3px #333333;
background-color: #ffffff;
}
@media (min-width: 769px) {
.max-pc640 {
max-width: 640px;
}
}
.max-50per {
max-width: 50%;
}
.max-75per {
max-width: 75%;
}
/*---------------フレックスボックス---------------*/
.flex-nowrap {
flex-flow: nowrap !important;
}
/*横並び-左右均等*/
.flex-wrp {
display: flex;
/* Flexboxを使う親要素（フレックスコンテナ）に指定する */
justify-content: space-between;
/* 両端から左右へ均等に配置する */
flex-flow: wrap;
/* 要素の折り返し設定 */
}
/*横並び-左右均等*/
.flex-wrp-talign {
display: flex;
/* Flexboxを使う親要素（フレックスコンテナ）に指定する */
justify-content: space-between;
/* 両端から左右へ均等に配置する */
align-items: flex-start;
/* 親要素から上に揃えて配置する */
flex-flow: wrap;
/* 要素の折り返し設定 */
}
/*横並び-左右均等-逆方向*/
.flex-wrp-reverse {
display: flex;
/* Flexboxを使う親要素（フレックスコンテナ）に指定する */
justify-content: space-between;
/* 両端から左右へ均等に配置する */
align-items: flex-start;
/* 親要素から上に揃えて配置する */
}
@media (min-width: 769px) {
.flex-wrp-reverse {
flex-direction: row-reverse;
flex-flow: no-wrap;
/* 要素の折り返し設定 */
}
}
@media (max-width: 768px) {
.flex-wrp-reverse {
flex-flow: wrap;
/* 要素の折り返し設定 */
}
}
/*横並び-左右均等-折り返しなし*/
.flex-wrp-nowrap {
display: flex;
/* Flexboxを使う親要素（フレックスコンテナ）に指定する */
justify-content: space-between;
/* 両端から左右へ均等に配置する */
align-items: flex-start;
/* 親要素から上に揃えて配置する */
flex-flow: nowrap;
/* 要素の折り返し設定 */
}
/*横並び-中央ぞろえ*/
.flex-wrp-cent {
display: flex;
/* Flexboxを使う親要素（フレックスコンテナ）に指定する */
justify-content: center;
/* 両端から左右へ均等に配置する */
align-items: baseline;
/* 親要素から上に揃えて配置する */
flex-flow: wrap;
/* 要素の折り返し設定 */
}
/*横並び-絶対中央配置*/
.flex-wrp-centcent {
display: flex;
/* Flexboxを使う親要素（フレックスコンテナ）に指定する */
justify-content: center;
/* 両端から左右へ均等に配置する */
align-items: center;
flex-flow: wrap;
/* 親要素から上に揃えて配置する */
/* 要素の折り返し設定 */
}
@media (max-width: 768px) {
.sp-justy-center {
justify-content: center;
}
}
/*横並び-中央ぞろえ*/
.flex-wrp-2column {
display: flex;
align-items: baseline;
flex-flow: nowrap;
}
@media (min-width: 769px) {
.flex-wrp-2column {
justify-content: center;
}
}
@media (max-width: 768px) {
.flex-wrp-2column {
justify-content: space-between;
}
}
/*横幅合わせ*/
.flex-auto {
flex-basis: auto !important;
}
.flex-auto-glow0 {
flex-basis: auto !important;
flex-grow: 0 !important;
}
/*---------------フレックスボックス２カラム---------------*/
.flex2-column {
flex-grow: 0;
box-sizing: border-box;
position: relative;
}
@media (min-width: 769px) {
.flex2-column {
width: 49%;
}
}
@media (max-width: 768px) {
.flex2-column {
width: 100%;
}
}
.flex2-column50 {
display: flex;
justify-content: center;
align-items: flex-start;
}
@media (min-width: 769px) {
.flex2-column50 {
flex-flow: nowrap;
}
}
@media (max-width: 768px) {
.flex2-column50 {
flex-flow: wrap;
}
}
/*------------フレックスボックス3カラム----------------*/
.flex3-column {
flex-grow: 0;
box-sizing: border-box;
}
@media (min-width: 769px) {
.flex3-column {
width: 32%;
}
}
@media (max-width: 768px) {
.flex3-column {
width: 100%;
}
}
/*白背景ボックス*/
.flex3-column-white {
flex-grow: 0;
box-sizing: border-box;
}
@media (min-width: 769px) {
.flex3-column-white {
width: 32.5%;
}
}
@media (max-width: 768px) {
.flex3-column-white {
width: 100%;
}
}
.flex3-2-column {
flex-grow: 0;
box-sizing: border-box;
}
@media (min-width: 769px) {
.flex3-2-column {
width: 32%;
}
}
@media (max-width: 768px) {
.flex3-2-column {
width: 49%;
}
}
.flex24 {
flex-grow: 0;
box-sizing: border-box;
}
@media (min-width: 769px) {
.flex24 {
width: 24%;
}
}
@media (max-width: 768px) {
.flex24 {
width: 100%;
}
}
.flex37 {
flex-grow: 0;
box-sizing: border-box;
}
@media (min-width: 769px) {
.flex37 {
width: 37%;
}
}
@media (max-width: 768px) {
.flex37 {
width: 100%;
}
}
/*------------フレックスボックス2カラム 70--30 sp100----------------*/
.area-30-70 h3 {
color: #f08437;
}
@media (min-width: 769px) {
.area-30-70 h3 {
font-size: 3.8rem;
}
}
@media (max-width: 768px) {
.area-30-70 h3 {
font-size: 2.4rem;
}
}
.area-30-70 .box-name {
color: #f08437;
margin: 24px 0px 8px 0px;
}
.area-30-70 .box-massage {
color: #f08437;
font-size: 2rem;
font-weight: bold;
margin: 0px 0px 24px 0px;
}
.flex2-column-70 {
flex-grow: 0;
box-sizing: border-box;
}
@media (min-width: 769px) {
.flex2-column-70 {
width: 69%;
}
}
@media (max-width: 768px) {
.flex2-column-70 {
width: 100%;
}
}
.flex2-column-30 {
flex-grow: 0;
box-sizing: border-box;
}
@media (min-width: 769px) {
.flex2-column-30 {
width: 29%;
}
}
@media (max-width: 768px) {
.flex2-column-30 {
width: 100%;
}
}
/*-------------------画像サイズ---------------*/
/*------------画像幅調整---------------*/
.min-wide107 {
min-width: 100px;
}
.max-w90p {
max-width: 90%;
}
.img-w100 {
width: 100%;
}
.img-w80 {
width: 80%;
}
.img-w75 {
width: 75%;
}
@media (min-width: 769px) {
.img-w75-100 {
width: 75%;
}
}
@media (max-width: 768px) {
.img-w75-100 {
width: 100%;
}
}
.img-w60 {
width: 60%;
}
.img-w51 {
width: 51%;
}
@media (min-width: 769px) {
.img-w50-100 {
width: 50%;
}
}
@media (max-width: 768px) {
.img-w50-100 {
width: 100%;
}
}
.img-w50 {
width: 50%;
}
.img-w25 {
width: 25%;
}
.img-w10 {
width: 10%;
}
@media (min-width: 769px) {
.img-w5 {
width: 5%;
}
}
@media (max-width: 768px) {
.img-w5 {
width: 15%;
}
}
@media (min-width: 769px) {
.img-w60-80 {
width: 60%;
}
}
@media (max-width: 768px) {
.img-w60-80 {
width: 80%;
}
}
.img-layout-1colmn-25 {
margin-bottom: 24px;
}
@media (min-width: 769px) {
.img-layout-1colmn-25 {
width: 25%;
margin: 0 auto 24px auto;
}
}
@media (max-width: 768px) {
.img-layout-1colmn-25 {
width: 50%;
margin: 0 auto 24px auto;
}
}
@media (min-width: 769px) {
.img-layout-100 {
width: 100%;
margin: 0 auto 24px auto;
}
}
@media (max-width: 768px) {
.img-layout-100 {
width: 100%;
margin: 0 auto 24px auto;
}
}
@media (min-width: 769px) {
.img-layout-80 {
width: 80%;
margin: 0 auto 24px auto;
}
}
@media (max-width: 768px) {
.img-layout-80 {
width: 80%;
margin: 0 auto 24px auto;
}
}
@media (min-width: 769px) {
.img-layout-60-80 {
width: 60%;
margin: 0 auto 24px auto;
}
}
@media (max-width: 768px) {
.img-layout-60-80 {
width: 80%;
margin: 0 auto 24px auto;
}
}
@media (min-width: 769px) {
.img-layout-mb0 {
width: 100%;
margin: 0 auto 0px auto;
}
}
@media (max-width: 768px) {
.img-layout-mb0 {
width: 100%;
margin: 0 auto 0px auto;
}
}
.img-layout-works {
-webkit-filter: drop-shadow(1px 3px 4px rgba(0, 0, 0, 0.4));
-moz-filter: drop-shadow(1px 3px 4px rgba(0, 0, 0, 0.4));
-ms-filter: drop-shadow(1px 3px 4px rgba(0, 0, 0, 0.4));
filter: drop-shadow(1px 3px 4px rgba(0, 0, 0, 0.4));
}
@media (min-width: 769px) {
.img-layout-works {
width: 100%;
margin: 0 auto 24px auto;
}
}
@media (max-width: 768px) {
.img-layout-works {
width: 100%;
margin: 0 auto 24px auto;
}
}
.img-layout-works:hover {
filter: drop-shadow(7px 9px 5px #666);
}
/*-------------------画像ズーム---------------*/
/*1カラム*/
.zoom {
overflow: hidden;
}
.zoom img {
width: 100%;
}
.zoom img:hover {
-webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
-o-transform: scale(1.3);
-ms-transform: scale(1.3);
transform: scale(1.3);
}
/* -----------スクロールフェードイン-----------*/
.fadein {
opacity: 0;
transform: translateY(80px);
transition: all 1s;
}
/* -----------横からスクロール-----------*/
.sa {
opacity: 0;
}
@media (min-width: 769px) {
.sa {
transition: all 1.5s ease;
}
}
@media (max-width: 768px) {
.sa {
transition: all 1.2s ease;
}
}
.sa.show {
opacity: 1;
transform: none;
}
@media (min-width: 769px) {
.sa--rl {
transform: translate(270px, 0);
}
}
@media (max-width: 768px) {
.sa--rl {
transform: translate(120px, 0);
}
}
/*---------------罫線----------------*/
@media (min-width: 769px) {
.border-pcl-none {
border-left: none;
}
}
@media (max-width: 768px) {
.border-spt-none {
border-top: none;
}
}
@media (min-width: 769px) {
.border-t-none {
border-top: none;
}
}
@media (max-width: 768px) {
.border-t-none {
border-top: none;
}
}
/*画像枠線*/
.bxsh-gry img {
box-shadow: 0px 0px 0px 3px #444444;
}
.img-border {
outline: 1px solid #f08437;
outline-offset: 0;
}
.img-border-gray4 {
outline: 4px solid #dcdbdb;
outline-offset: 0;
}
.border-bold {
outline: 3px solid #f08437;
}
.img-border-txt {
outline: 2px solid #f08437;
outline-offset: 7px;
}
.img-border-gray4 {
outline: 4px solid #cccccc;
outline-offset: 0;
}
.border-bold {
outline: 3px solid #f08437;
}
.img-border-txt {
outline: 2px solid #f08437;
outline-offset: 7px;
}
.border-8-gray {
border: solid 8px #cccccc;
box-sizing: border-box;
}
.border-4-blue {
border: solid 4px #d1dbe0;
box-sizing: border-box;
}
/*水平線*/
.hr80 {
width: 50%;
margin: 0 auto 90px auto;
background-color: #cccccc;
}
.hr100 {
width: 100%;
margin: 16px auto 16px auto;
background-color: #cccccc;
}
.hr-dot {
border: none;
border-top: dotted 2px #666666;
}
.hr-dot2px {
border: none;
border-top: dotted 2px #666666;
}
.hr-black {
height: 2px;
background-color: #333333;
border: none;
}
.hr-white {
height: 1px;
background-color: #ffffff;
border: none;
}
.hr-gray {
height: 1px;
background-color: #666666;
border: none;
}
/*------------ディスプレイ---------------*/
.display-none {
display: none !important;
}
@media (min-width: 769px) {
.pc-none {
display: none;
}
}
@media (max-width: 768px) {
.sp-none {
display: none;
}
}
/*------------文章揃え、装飾---------------*/
.m-0auto {
margin: 0 auto;
display: block;
}
@media (max-width: 768px) {
.m-sp0auto {
margin: 0 auto;
display: block;
}
}
.m-0auto-inline {
margin: 0 auto;
}
.txtcenter {
text-align: center;
}
@media (min-width: 769px) {
.txtcenterpc {
text-align: center;
}
}
@media (max-width: 768px) {
.txtcentersp {
text-align: center;
}
}
.txtright {
text-align: right;
}
.bold {
font-weight: bold;
}
.a-none a {
text-decoration: none;
}
/*下線マーカー*/
.marker-yellow {
background: linear-gradient(transparent 70%, #fee661 0%);
display: table;
}
.marker-yellow-left {
background: linear-gradient(transparent 70%, #fee661 0%);
}
@media (min-width: 769px) {
.marker-yellow-left {
display: inline-block;
}
}
@media (max-width: 768px) {
.marker-yellow-left {
display: table;
}
}
.marker-red {
background: linear-gradient(transparent 70%, #e60012 0%);
display: table;
}
/*----------アンカーパディング調整---------*/
.anchor {
display: block;
padding-top: 160px;
margin-top: -160px !important;
}
/*---------------エフェクト---------------*/
.drop-shadow {
filter: drop-shadow(3px 3px 8px rgba(50, 50, 50, 0.2));
}
.drop-shadow-hov {
filter: drop-shadow(1px 2px 2px rgba(0, 0, 0, 0.4));
-webkit-filter: drop-shadow(1px 2px 2px rgba(0, 0, 0, 0.4));
-moz-filter: drop-shadow(1px 2px 2px rgba(0, 0, 0, 0.4));
-ms-filter: drop-shadow(1px 2px 2px rgba(0, 0, 0, 0.4));
}
.drop-shadow-hov:hover {
filter: drop-shadow(5px 5px 5px #666);
}
@media (min-width: 769px) {
.backbox-yellow {
position: relative;
-moz-box-shadow: -30px -32px 0px 3px #fff45f;
-webkit-box-shadow: -30px -32px 0px 3px #fff45f;
-ms-box-shadow: -30px -32px 0px 3px #fff45f;
box-shadow: -30px -32px 0px 3px #ffe659;
}
}
/*------------画像可変---------------*/
.imgsizing {
width: 100%;
height: 100%;
}
/*---------------フォント調整・装飾関連---------------*/
.font-small {
font-size: 14px !important;
}
@media (max-width: 768px) {
.font-semi-middle {
font-size: 20px !important;
}
}
@media (min-width: 769px) {
.font-s22 {
font-size: 22px !important;
}
}
@media (max-width: 768px) {
.font-s22 {
font-size: 20px !important;
}
}
.font-middle {
font-size: 24px !important;
line-height: 1.5;
}
.font-semi-big {
font-size: 32px;
line-height: 1.5;
}
@media (min-width: 769px) {
.font-big {
font-size: 36px;
}
}
@media (max-width: 768px) {
.font-big {
font-size: 24px;
}
}
.font-ex-big {
font-size: 76px;
}
.line-h2em {
line-height: 2em;
}
@media (max-width: 768px) {
.fontsize-sp24 {
font-size: 26px !important;
}
}
@media (max-width: 768px) {
.fontsize-sp20 {
font-size: 20px !important;
}
}
@media (max-width: 768px) {
.fontsize-sp15 {
font-size: 15px !important;
}
}
.under-red {
border-bottom: solid 3px #ea0202;
margin-bottom: 16px;
}
.size-16 {
font-size: 16px;
line-height: 115%;
}
.size-22 {
font-size: 22px;
display: inline;
margin-bottom: 8px;
}
@media (min-width: 769px) {
.size-38 {
font-size: 38px !important;
}
}
@media (max-width: 768px) {
.size-38 {
font-size: 20px !important;
}
}
.under-dot {
border-bottom: dotted 5px;
border-color: #0B3D96;
display: table;
}
@media (min-width: 769px) {
.spbr br {
display: none;
}
}
@media (max-width: 768px) {
.pcbr br {
display: none;
}
}
/*---------------パディング調整---------------*/
@media (min-width: 769px) {
.pd-content {
padding: 80px 0px;
}
}
@media (max-width: 768px) {
.pd-content {
padding: 32px 0px;
}
}
.pdt0 {
padding-top: 0px;
}
.pdb0 {
padding-bottom: 0px;
}
@media (min-width: 769px) {
.pd-head {
padding: 120px 0px;
}
}
@media (max-width: 768px) {
.pd-head {
padding: 40px 0px;
}
}
@media (min-width: 769px) {
.pd-foot {
padding: 120px 0px;
}
}
@media (max-width: 768px) {
.pd-foot {
padding: 40px 0px;
}
}
.pd8 {
padding: 8px;
}
@media (min-width: 769px) {
.pd16 {
padding: 16px;
}
}
@media (max-width: 768px) {
.pd16 {
padding: 8px;
}
}
.pd16-24 {
padding: 16px 24px;
}
.pd24 {
padding: 24px;
}
.pd32 {
padding: 32px;
}
@media (min-width: 769px) {
.pd40 {
padding: 40px;
}
}
@media (max-width: 768px) {
.pd40 {
padding: 24px 16px;
}
}
@media (min-width: 769px) {
.pd80-40 {
padding: 80px;
}
}
@media (max-width: 768px) {
.pd80-40 {
padding: 40px;
}
}
.pd48 {
padding: 48px;
}
.pdlr-8 {
padding: 0px 8px;
}
.pdb40-20 {
padding: 40px 20px;
}
@media (min-width: 769px) {
.pd40-40sp20 {
padding: 40px 40px;
}
}
@media (max-width: 768px) {
.pd40-40sp20 {
padding: 20px 16px;
}
}
@media (min-width: 769px) {
.pd8-40sp8-16 {
padding: 8px 40px;
}
}
@media (max-width: 768px) {
.pd8-40sp8-16 {
padding: 8px 16px;
}
}
@media (min-width: 769px) {
.pd80-40sp20 {
padding: 80px 40px;
}
}
@media (max-width: 768px) {
.pd80-40sp20 {
padding: 20px 16px;
}
}
/*デバイス別*/
@media (min-width: 769px) {
.pdt32 {
padding-top: 32px;
}
}
@media (min-width: 769px) {
.pdlr-pc20 {
padding: 0px 20px;
}
}
@media (min-width: 769px) {
.pdlr-pc24 {
padding: 0px 24px;
}
}
@media (min-width: 769px) {
.pdlr-pc32 {
padding: 0px 32px;
}
}
@media (min-width: 769px) {
.pd-pc32 {
padding: 0px 32px;
}
}
@media (min-width: 769px) {
.pd16-sp8 {
padding: 16px;
}
}
@media (max-width: 768px) {
.pd16-sp8 {
padding: 16px 8px;
}
}
@media (min-width: 769px) {
.pd32-24 {
padding: 32px;
}
}
@media (max-width: 768px) {
.pd32-24 {
padding: 24px;
}
}
@media (min-width: 769px) {
.pd32-30 {
padding: 32px;
}
}
@media (max-width: 768px) {
.pd32-30 {
padding: 30px;
}
}
@media (min-width: 769px) {
.pd48-32 {
padding: 48px;
}
}
@media (max-width: 768px) {
.pd48-32 {
padding: 32px;
}
}
@media (min-width: 769px) {
.pd80_20-24 {
padding: 80px 20px;
}
}
@media (max-width: 768px) {
.pd80_20-24 {
padding: 24px;
}
}
@media (min-width: 769px) {
.pd0_80_20-24 {
padding: 0px 20px 80px 20px;
}
}
@media (max-width: 768px) {
.pd0_80_20-24 {
padding: 24px;
}
}
@media (min-width: 769px) {
.pdtb80-24 {
padding: 80px 0px;
}
}
@media (max-width: 768px) {
.pdtb80-24 {
padding: 24px 0px;
}
}
@media (min-width: 769px) {
.pd-spmenu {
padding: 80px 20px;
}
}
@media (max-width: 768px) {
.pd-spmenu {
padding: 24px 24px 16vw 24px;
}
}
.pd32_0 {
padding: 32px 0px;
}
@media (min-width: 769px) {
.pd32-24 {
padding: 32px;
}
}
@media (max-width: 768px) {
.pd32-24 {
padding: 24px;
}
}
@media (min-width: 769px) {
.pd32_24-0 {
padding: 32px;
}
}
@media (max-width: 768px) {
.pd32_24-0 {
padding: 24px 0px;
}
}
@media (min-width: 769px) {
.pd64-24 {
padding: 64px;
}
}
@media (max-width: 768px) {
.pd64-24 {
padding: 24px;
}
}
/*---------------マージン調整---------------*/
.m16 {
margin: 16px;
}
.mb0 {
margin-bottom: 0px;
}
.mb2 {
margin-bottom: 2px;
}
.mb4 {
margin-bottom: 4px;
}
.mb8 {
margin-bottom: 8px;
}
.mb16 {
margin-bottom: 16px;
}
.mb24 {
margin-bottom: 24px !important;
}
.mb32 {
margin-bottom: 32px !important;
}
.mb40 {
margin-bottom: 40px;
}
.mb48 {
margin-bottom: 48px;
}
.mb60 {
margin-bottom: 60px;
}
.mb72 {
margin-bottom: 72px;
}
.mb80 {
margin-bottom: 80px;
}
.mb90 {
margin-bottom: 90px;
}
.mr-6 {
margin-right: 6px;
}
.mb-u8 {
margin-bottom: -8px;
}
.mb-u16 {
margin-bottom: -16px;
}
@media (min-width: 769px) {
.mbpc-u100 {
margin-bottom: -100px;
}
}
/*トップ*/
.mt4 {
margin-top: 4px;
}
.mt8 {
margin-top: 8px;
}
.mt16 {
margin-top: 16px;
}
.mt24 {
margin-top: 24px;
}
.mt32 {
margin-top: 32px;
}
.mt40 {
margin-top: 40px;
}
.mt48 {
margin-top: 48px;
}
.mt60 {
margin-top: 60px;
}
.mtb24 {
margin: 24px 0px;
}
.mt-u2 {
margin-top: -3px;
}
.mt-u16 {
margin-top: -16px;
}
.mt-u24 {
margin-top: -24px;
}
@media (max-width: 768px) {
.mt-spu24 {
margin-top: -24px;
}
}
.mr-6 {
margin-right: 6px;
}
.ml0 {
margin-left: 0px !important;
}
.mb4 {
margin-bottom: 4px !important;
}
@media (max-width: 768px) {
.mlsp4 {
margin-left: 4px !important;
}
}
@media (min-width: 769px) {
.ml4 {
margin-left: 4px !important;
}
}
.ml05em {
margin-left: 0.5em !important;
}
.ml1em {
margin-left: 1em !important;
}
.mtu52 {
margin-top: -52px;
}
@media (min-width: 769px) {
.mt-u52 {
margin-top: -52px;
}
}
.mtu105 {
margin-top: -105px;
}
.mtb24 {
margin: 24px 0px;
}
/*デバイス別*/
@media (min-width: 769px) {
.mbpc24-mrsp24 {
margin-bottom: 24px;
}
}
@media (max-width: 768px) {
.mbpc24-mrsp24 {
margin-right: 24px;
}
}
@media (min-width: 769px) {
.mb24-sp48 {
margin-bottom: 24px;
}
}
@media (max-width: 768px) {
.mb24-sp48 {
margin-top: 48px;
margin-bottom: 24px;
}
}
@media (min-width: 769px) {
.mb-u8-sp-u8 {
margin-bottom: -8px;
}
}
@media (max-width: 768px) {
.mb-u8-sp-u8 {
margin-bottom: -8px;
}
}
@media (max-width: 768px) {
.mbsp8 {
margin-bottom: 8px !important;
}
}
@media (max-width: 768px) {
.mbsp16 {
margin-bottom: 16px !important;
}
}
@media (max-width: 768px) {
.mbsp24 {
margin-bottom: 24px !important;
}
}
@media (max-width: 768px) {
.mbsp32 {
margin-bottom: 32px;
}
}
@media (max-width: 768px) {
.mbsp48 {
margin-bottom: 48px;
}
}
@media (max-width: 768px) {
.mbsp60 {
margin-bottom: 60px;
}
}
@media (max-width: 768px) {
.mbsp80 {
margin-bottom: 80px;
}
}
@media (max-width: 768px) {
.mtsp24 {
margin-top: 24px;
}
}
@media (min-width: 769px) {
.mtpc8 {
margin-top: 8px;
}
}
@media (min-width: 769px) {
.mtpc16 {
margin-top: 16px;
}
}
@media (min-width: 769px) {
.mtpc24 {
margin-top: 24px;
}
}
@media (min-width: 769px) {
.mtpc38 {
margin-top: 38px;
}
}
@media (min-width: 769px) {
.mtpc60 {
margin-top: 60px;
}
}
/*---------------角丸---------------*/
.radius-5 {
border-radius: 5px !important;
}
.radius-5 img {
border-radius: 5px !important;
}
.radius-10 {
border-radius: 10px !important;
}
.radius-10 img {
border-radius: 10px !important;
}
.radius-101 {
border-radius: 10px !important;
}
.radius-50 {
border-radius: 50px;
}
.radius-50per img {
border-radius: 50% !important;
}
.radius-top10 {
border-radius: 10px 10px 0 0 !important;
}
.radius-top10 img {
border-radius: 10px 10px 0 0 !important;
}
.radius-btm10 {
border-radius: 0 0 10px 10px;
}
/*装飾 バッジ*/
.bdg-circle {
display: flex;
justify-content: center;
align-items: center;
height: 60px;
width: 60px;
border-radius: 50%;
position: relative;
}
.bdg-circle::before {
content: "";
position: absolute;
display: block;
top: 3px;
bottom: 3px;
left: 3px;
right: 3px;
border: 1px solid white;
border-radius: 50px;
}
.bdg-circle-txt {
line-height: 1em;
font-size: 16px;
}
.bdg-circle-num {
font-size: 22px;
font-weight: bold;
line-height: 1em;
}
/*画像横幅表示*/
/*超重要*/
.mein-pic {
position: relative;
}
@media (min-width: 993px) {
.mein-pic {
width: 100vw;
height: 40vw;
}
}
@media (max-width: 992px) {
.mein-pic {
width: 125vw;
height: 47vw;
}
}
@media (max-width: 768px) {
.mein-pic {
width: 100vw;
height: 54vh;
}
}
/*装飾 ボタン*/
@media (min-width: 769px) {
.btn-wrap {
background-color: #ffffff;
display: table;
margin: 0 auto;
}
}
@media (min-width: 769px) {
.btn-wrap-rds {
background-color: #ffffff;
display: table;
margin: 0 auto;
border-radius: 10px;
}
}
.btn01 {
display: flex;
justify-content: center;
align-items: center;
border-radius: 10px;
position: relative;
margin: 0 auto;
max-width: 750px;
background-color: #0B3D96 !important;
}
@media (min-width: 769px) {
.btn01 {
padding: 40px;
}
}
@media (max-width: 768px) {
.btn01 {
padding: 24px;
}
}
@media (min-width: 769px) {
.btn01 p {
font-size: 31px;
font-weight: bold;
}
}
@media (max-width: 768px) {
.btn01 p {
font-size: 22px;
}
}
.btn01::before {
content: "";
position: absolute;
display: block;
top: 4px;
bottom: 4px;
left: 4px;
right: 4px;
border: 1px solid white;
border-radius: 10px;
}
.btn-dl1, .btn-dl2, .btn-arw-btm {
margin: 0 auto;
font-weight: bold;
filter: drop-shadow(4px 4px 0px #2a586e);
}
@media (min-width: 769px) {
.btn-dl1, .btn-dl2, .btn-arw-btm {
max-width: 350px;
min-width: 300px;
}
}
@media (max-width: 768px) {
.btn-dl1, .btn-dl2, .btn-arw-btm {
width: 90%;
font-size: 16px;
}
}
.btn-dl1:hover, .btn-dl2:hover, .btn-arw-btm:hover {
opacity: 0.8;
transition: 0.5s;
}
.btn-dl1 a, .btn-dl2 a, .btn-arw-btm a {
color: #ffffff;
display: block;
text-decoration: none;
}
@media (min-width: 769px) {
.btn-dl1 a, .btn-dl2 a, .btn-arw-btm a {
padding: 16px;
}
}
@media (max-width: 768px) {
.btn-dl1 a, .btn-dl2 a, .btn-arw-btm a {
padding: 16px 0px;
}
}
.btn-dl1 a:after {
content: '';
background-image: url(http://siteworks.site/prototype-temp/wp-content/uploads/2021/10/dl-icon.png);
display: inline-block;
width: 20px;
height: 20px;
margin-left: 3px;
background-size: contain;
background-repeat: no-repeat;
position: relative;
top: 2px;
}
.btn-dl2 a:after {
font-family: "Font Awesome 5 Free";
margin-left: 8px;
font-weight: 900;
content: "";
}
.btn-arw-btm a:after {
font-family: "Font Awesome 5 Free";
margin-left: 8px;
font-weight: 900;
content: "";
}
.btn-round {
font-weight: bold;
background-color: #ffffff;
border-radius: 50px;
filter: drop-shadow(3px 3px 8px rgba(50, 50, 50, 0.2));
text-align: center;
}
.btn-round a {
padding: 16px;
display: block;
text-decoration: none;
color: #1486aa;
}
.btn-round a::hover {
opacity: 0.3;
}
.fluid-box-wp-meinpic {
position: relative;
transform: translateX(-50%);
}
@media (min-width: 769px) {
.fluid-box-wp-meinpic {
left: 50%;
}
}
@media (max-width: 768px) {
.fluid-box-wp-meinpic {
left: 50%;
width: 100vw;
}
}
.mein-pictop {
background: url(https://miroku-no-shizuku.com/wp-content/uploads/2021/03/mvpc3.jpg) center center / cover no-repeat;
}
@media (min-width: 769px) {
.mein-pic1 {
background: url(http://siteworks.site/miroku-no-shizuku/wp-content/uploads/2021/03/osusume8.jpg) center center / cover no-repeat;
}
}
@media (max-width: 768px) {
.mein-pic1 {
background: url(http://siteworks.site/miroku-no-shizuku/wp-content/uploads/2021/03/osusumesp2.jpg) center center / cover no-repeat;
}
}
@media (min-width: 769px) {
.main-pic1 {
background: url(http://www.siteworks.site/vine-clean/wp-content/uploads/2021/11/14-6-scaled.jpg) center center / cover no-repeat;
left: 50%;
width: 100vw;
height: 75vw;
}
}
@media (max-width: 768px) {
.main-pic1 {
background: url(http://siteworks.site/miroku-no-shizuku/wp-content/uploads/2021/03/osusumesp2.jpg) center center / cover no-repeat;
}
}
@media (min-width: 769px) {
.mein-pic2 {
background: url(http://siteworks.site/miroku-no-shizuku/wp-content/uploads/2021/03/support4.jpg) center center / cover no-repeat;
}
}
@media (max-width: 768px) {
.mein-pic2 {
background: url(http://siteworks.site/miroku-no-shizuku/wp-content/uploads/2021/03/supportsp3.jpg) center center / cover no-repeat;
}
}
@media (min-width: 769px) {
.mein-pic3 {
background: url(http://siteworks.site/keisoupower/wp-content/uploads/2021/09/back-polygon.jpg) center center / contain no-repeat;
}
}
@media (max-width: 768px) {
.mein-pic3 {
background: url(http://siteworks.site/keisoupower/wp-content/uploads/2021/09/back-polygon.jpg) center center / contain no-repeat;
}
}
@media (min-width: 769px) {
.mein-pic-text-outer {
background: url(http://siteworks.site/keisoupower/wp-content/uploads/2021/09/back-polygon.jpg) center center / contain no-repeat;
display: flex;
justify-content: center;
}
}
@media (max-width: 768px) {
.mein-pic-text-outer {
background: url(http://siteworks.site/keisoupower/wp-content/uploads/2021/09/back-polygon.jpg) center center / contain no-repeat;
display: flex;
justify-content: center;
}
}
@media (min-width: 769px) {
.mein-pic-text-outer2 {
background: url(http://www.siteworks.site/vine-clean/wp-content/uploads/2021/10/20.jpg) center center / contain no-repeat;
display: flex;
justify-content: center;
}
}
@media (max-width: 768px) {
.mein-pic-text-outer2 {
background: url(http://www.siteworks.site/vine-clean/wp-content/uploads/2021/10/20.jpg) center center / contain no-repeat;
display: flex;
justify-content: center;
}
}
@media (min-width: 993px) {
.mein-pic-text-width100 {
width: 100vw;
}
}
@media (max-width: 992px) {
.mein-pic-text-width100 {
width: 125vw;
}
}
@media (max-width: 768px) {
.mein-pic-text-width100 {
width: 125vw;
}
}
.mein-pic-text-centre {
text-align: center;
display: table-cell;
height: 29vw;
vertical-align: middle;
}
.bg1 {
margin: 0;
width: 100vw;
background-size: contain;
background-image: url(http://siteworks.site/miroku-no-shizuku/wp-content/uploads/2021/03/wall-back.png);
background-repeat: repeat-x;
}
@media (min-width: 769px) {
.bg1 {
min-height: 120px;
}
}
.bg2 {
width: 100vw;
background-size: contain;
background-image: url(http://siteworks.site/miroku-no-shizuku/wp-content/uploads/2021/03/wood-back-scaled.jpg);
background-repeat: repeat;
}
.bg2-2 {
margin: 0;
width: 100vw;
background-size: cover;
background-image: url(http://www.siteworks.site/vine-clean/wp-content/uploads/2021/10/21-4.jpg);
background-repeat: no-repeat;
}
.bg2-3 {
margin: 0;
width: 100vw;
background-size: cover;
background-image: url(http://www.siteworks.site/vine-clean/wp-content/uploads/2021/10/0-4.jpg);
background-repeat: no-repeat;
}
.bg3 {
margin: 0;
width: 100vw;
background-size: auto;
background-image: url(http://siteworks.site/miroku-no-shizuku/wp-content/uploads/2021/03/hougan-back.jpg);
background-repeat: repeat;
}
.bg5 {
margin: 0;
width: 100vw;
}
@media (min-width: 769px) {
.bg5 {
background-image: url(http://www.siteworks.site/vine-clean/wp-content/uploads/2021/10/20.jpg);
background-size: auto;
background-repeat: no-repeat;
padding: 90px 120px;
}
}
@media (max-width: 768px) {
.bg5 {
background-image: url(http://www.siteworks.site/vine-clean/wp-content/uploads/2021/10/20sp.jpg);
background-size: cover;
background-repeat: no-repeat;
padding: 27px 0px;
}
}
.bg-rpt-xy {
margin: 0;
width: 100vw;
background-size: auto;
background-image: url(http://siteworks.site/prototype-temp/wp-content/uploads/2021/10/bg_img02.png);
background-repeat: repeat;
}
.bg4 {
background-size: auto auto;
background-color: white;
background-image: repeating-linear-gradient(135deg, transparent, transparent 4px, #e2f4fa 4px, #e2f4fa 6px);
}
/*---------------レイアウト調整---------------*/
.centre {
display: flex;
align-items: center;
justify-content: center;
}
@media (max-width: 768px) {
.centre-sp {
display: flex;
align-items: center;
justify-content: center;
}
}
.centre100 {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.align-cent {
display: flex;
align-items: center;
flex-flow: wrap;
}
.pos-relative {
position: relative;
}
.z-ind-1000 {
z-index: 1000;
}
.z-ind-u1 {
z-index: -1;
}
/*コンテンツ位置調整 ミロクの対談の白バック部分で使った*/
.mein-pic-centre {
text-align: center;
}
@media (min-width: 769px) {
.mein-pic-centre {
padding-top: 20%;
}
}
@media (max-width: 768px) {
.mein-pic-centre {
padding-top: 45%;
}
}
@media (max-width: 768px) {
.text-back-white {
background-color: #ffffff;
padding: 5px;
width: 90%;
}
}
/*------------HP--------*/
/*制作の流れ*/
.list-flow {
margin-bottom: 90px;
}
.list-flow li {
height: 40px;
background-color: #cccccc;
box-sizing: border-box;
list-style-type: none;
margin: 30px auto;
color: #ffffff;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
@media (min-width: 769px) {
.list-flow li {
width: 60%;
}
}
@media (max-width: 768px) {
.list-flow li {
width: 100%;
}
}
.list-flow li:after {
content: "";
position: absolute;
right: 0;
bottom: -20px;
left: 0;
width: 0px;
height: 0px;
margin: auto;
border-style: solid;
border-color: #cccccc transparent transparent transparent;
border-width: 20px 20px 0 20px;
}
.list-flow li:last-child:after {
content: none;
}
/*price-page*/
@media (max-width: 768px) {
.price-pagemenu div {
margin-bottom: 24px;
}
}
.price-pagemenu a {
color: #f08437;
font-size: 24px;
font-weight: bold;
}
.price-pagemenu a:hover {
opacity: 0.5;
transition: 0.5s;
}
.price-pagemenu a:visited {
color: #f08437;
}
/*-------------MVエリア-------------*/
.mv-area img {
width: 100%;
}
.mv {
background-image: url(../img/img-temp/mv.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 500px;
}
/*-------------相談エリア-------------*/
.soudan-area p {
margin-bottom: 40px;
}
@media (min-width: 769px) {
.soudan-area p {
padding: 0 30px;
}
}
@media (max-width: 768px) {
.soudan-area p {
padding: 0 0px;
}
}
/*-------2カラム-2-------*/
.title-box {
width: 100%;
height: 40px;
background-color: #efefef;
color: #f08437;
font-weight: bold;
}
.junle1 {
padding: 0 10px;
height: 30px;
display: flex;
align-items: center;
background-color: #909403;
color: #ffffff;
position: absolute;
top: 6%;
left: 3%;
z-index: 999;
font-size: 14px;
-webkit-filter: drop-shadow(1px 3px 4px rgba(0, 0, 0, 0.4));
-moz-filter: drop-shadow(1px 3px 4px rgba(0, 0, 0, 0.4));
-ms-filter: drop-shadow(1px 3px 4px rgba(0, 0, 0, 0.4));
filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.6));
}
.junle2 {
padding: 0 10px;
height: 30px;
display: flex;
align-items: center;
background-color: #0000cd;
color: #ffffff;
position: absolute;
top: 6%;
left: 3%;
z-index: 999;
font-size: 14px;
-webkit-filter: drop-shadow(1px 3px 4px rgba(0, 0, 0, 0.4));
-moz-filter: drop-shadow(1px 3px 4px rgba(0, 0, 0, 0.4));
-ms-filter: drop-shadow(1px 3px 4px rgba(0, 0, 0, 0.4));
filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.6));
}
/*-------------グラフ-１-------------*/
.graph1-wrp {
font-size: 16px;
}
.graph1-wrp .graph1-strong {
font-size: 24px;
font-weight: bold;
}
.graph1-wrp .graph1-subject dt {
height: 80px;
}
.graph1-wrp .graph1-subject dd {
background-color: #f08437;
padding: 25px 0;
color: #ffffff;
border-bottom: solid 1px #ffffff;
box-sizing: border-box;
height: 70px;
display: flex;
align-items: center;
justify-content: center;
}
.graph1-wrp .graph1-cont {
margin-bottom: 24px;
}
.graph1-wrp .graph1-cont dt {
color: #ffffff;
height: 80px;
background-color: #cccccc;
box-sizing: border-box;
}
@media (min-width: 769px) {
.graph1-wrp .graph1-cont dt {
padding: 15px 0;
}
}
@media (max-width: 768px) {
.graph1-wrp .graph1-cont dt {
padding: 8px 0;
margin-bottom: 16px;
}
}
.graph1-wrp .graph1-cont .subject-sp {
background-color: #f08437;
padding: 10px 0;
color: #ffffff;
border-bottom: solid 1px #ffffff;
box-sizing: border-box;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
}
.graph1-wrp .graph1-cont dd {
color: #524f4d;
background-color: #f3f2eb;
padding: 25px 0;
box-sizing: border-box;
height: 70px;
vertical-align: middle;
display: flex;
align-items: center;
justify-content: center;
border-bottom: solid 1px #ffffff;
}
/*------------------グラフ-2----------------*/
.table-title {
widows: 100%;
height: 60px;
box-sizing: border-box;
padding-top: 17px;
background-color: #f08437;
color: #fff;
font-weight: bold;
text-align: center;
}
.graph2-wrp {
width: 100%;
border-collapse: collapse;
margin-bottom: 72px;
}
.graph2-wrp h3 {
margin-bottom: 24px;
}
.graph2-wrp th {
width: 40%;
box-sizing: border-box;
background-color: #efefef;
color: #f08437;
text-align: center;
border-bottom: #f08437 1px solid;
border-top: #f08437 1px solid;
padding: 15px 0 10px 10px;
}
.graph2-wrp td {
width: 60%;
box-sizing: border-box;
border-bottom: solid 1px #f08437;
border-top: solid 1px #f08437;
text-align: left;
padding: 15px 0 10px 10px;
}
/*------------------テキストボックス----------------*/
.textbox-1 {
margin-bottom: 64px;
box-sizing: border-box;
border: 8px solid #dcdbdb;
padding: 32px 20px;
}
.textbox-1 ul {
list-style-type: none;
}
.textbox-1 li {
margin-bottom: 16px;
}
.textbox-pink {
padding: 10px 20px;
background-color: #cccccc;
color: #ffffff;
text-align: center;
box-sizing: border-box;
width: 90%;
margin: 0 auto 16px auto;
border-radius: 5px;
}
/*-------------ニュースエリア-------------*/
.news-area {
position: relative;
}
.news-area .news-wrap {
background-color: #ffffff;
}
@media (min-width: 769px) {
.news-area .news-wrap {
padding: 64px 90px;
border-radius: 30px;
}
}
@media (max-width: 768px) {
.news-area .news-wrap {
padding: 64px 10px;
border-radius: 30px;
}
}
.news-area hr {
height: 2px;
background-color: #cccccc;
border: none;
}
@media (min-width: 769px) {
.news-area hr {
margin-bottom: 24px;
margin-left: -5%;
width: 110%;
}
}
@media (max-width: 768px) {
.news-area hr {
margin-bottom: 24px;
width: 100%;
}
}
.news-area dt {
font-weight: bold;
}
@media (min-width: 769px) {
.news-area dt {
float: left;
}
}
@media (max-width: 768px) {
.news-area dt {
text-align: center;
margin-bottom: 8px;
}
}
.news-area dd {
margin-bottom: 16px;
padding-left: 20px;
}
@media (min-width: 769px) {
.news-area dd {
margin-left: 100px;
}
}
@media (max-width: 768px) {
.news-area dd {
padding: 10px;
line-height: 140%;
}
}
.news-area dd:last-child {
margin-bottom: 0px;
}
.news-area dd a {
color: #f08437;
}
.news-area dd a:hover {
opacity: 0.5;
transition: 0.5s;
}
/*-------------カレンダーエリア-------------*/
.cal_wrapper {
max-width: 640px;
min-width: 300px;
margin: 0 auto;
}
.googlecal {
position: relative;
padding-bottom: 100%;
height: 0;
}
.googlecal iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}
@media only screen and (min-width: 768px) {
.googlecal {
padding-bottom: 75%;
}
}
.cal_wrapper100 {
min-width: 300px;
margin: 2.0833% auto;
}
.googlecal100 {
position: relative;
padding-bottom: 100%;
height: 0;
}
.googlecal100 iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
min-height: 300px !important;
}
@media only screen and (min-width: 768px) {
.googlecal100 {
padding-bottom: 30%;
}
}
/*---------------タブコンテンツ---------------*/
.tab {
border-bottom: #9ec34b 3px solid;
}
.tab div {
width: 50%;
min-width: 50%;
margin: 0px 0 0px 0;
box-sizing: border-box;
flex-grow: 0;
border-top: 2px solid #888888;
border-right: 2px solid #888888;
border-left: 2px solid #888888;
border-radius: 5px 5px 0px 0px;
box-sizing: border-box;
padding: 15px 0 10px 0;
/*cursor: pointer;*/
transition: 0.5s;
font-size: 18px;
font-weight: bolder;
top: 9px;
position: relative;
}
.tab div:hover {
background-color: #cccccc;
border-top: 2px solid #cccccc;
border-right: 2px solid #cccccc;
border-left: 2px solid #cccccc;
box-sizing: border-box;
}
.tab div.active {
color: #fff;
background: #9ec34b;
border-top: 2px solid #9ec34b;
border-right: 2px solid #9ec34b;
border-left: 2px solid #9ec34b;
cursor: auto;
padding: 17px 0;
top: 0px;
position: relative;
cursor: url(../img/pointer.png), auto;
}
.area section {
display: none;
}
.area section.show {
display: block;
}
/*------------モーダル---------------*/
.modal {
display: none;
height: 100vh;
position: fixed;
top: 0;
width: 100%;
z-index: 999;
overflow: scroll;
}
.modal__bg {
background: rgba(50, 50, 50, 0.8);
height: 100%;
position: absolute;
width: 100%;
}
.modal__content {
width: 70%;
height: 60%;
overflow-y: auto;
position: fixed;
top: 45%;
bottom: 0;
left: 50%;
padding: 40px;
background: #fff;
border: #CCC 5px solid;
border-radius: 5px;
transform: translate(-50%, -50%);
margin-left: -9px;
}
.modal__content h3 {
color: #333333;
font-weight: bold;
font-size: 20px;
margin-bottom: 32px;
text-align: center;
}
.modal__content p {
margin-bottom: 32px;
}
.modal__content hr {
border: #ccc 2px solid;
border-radius: 3px;
margin-bottom: 32px;
}
.modalback-btn {
width: 70px;
height: 36px;
color: #333333;
font-size: 14px;
font-weight: bold;
text-align: center;
background-color: #ccc;
z-index: 999;
position: absolute;
top: 88%;
left: 47%;
}
.modalback-btn a {
display: block;
padding: 6px 10px 10px 10px;
}
/*-------------サブMVエリア-------------*/
.submv-area {
background-image: url(../img/submv@2x.png);
background-repeat: no-repeat;
background-size: cover;
background-position: left top;
height: 100px;
min-height: 100px;
}
/*サブページMV*/
.cont-frame-submv .flex-middle {
display: flex;
/* Flexboxを使う親要素（フレックスコンテナ）に指定する */
align-items: center;
flex-flow: nowrap;
/* 親要素から上に揃えて配置する */
height: 130px;
/* 要素の折り返し設定 */
}
.cont-frame-submv .flex-middle p {
font-weight: bold;
font-size: 60px;
font-family: 'Tangerine', cursive;
-webkit-filter: drop-shadow(1px 3px 4px rgba(0, 0, 0, 0.4));
-moz-filter: drop-shadow(1px 3px 4px rgba(0, 0, 0, 0.4));
-ms-filter: drop-shadow(1px 3px 4px rgba(0, 0, 0, 0.4));
filter: drop-shadow(2px 2px 5px rgba(100, 100, 100, 0.6));
}
/*----------ページ内メニュー----------*/
.navi-hp .btn-layout-navi-hp {
-webkit-filter: drop-shadow(1px 3px 4px rgba(0, 0, 0, 0.4));
-moz-filter: drop-shadow(1px 3px 4px rgba(0, 0, 0, 0.4));
-ms-filter: drop-shadow(1px 3px 4px rgba(0, 0, 0, 0.4));
filter: drop-shadow(1px 3px 4px rgba(0, 0, 0, 0.4));
}
@media (min-width: 769px) {
.navi-hp .btn-layout-navi-hp {
width: 95%;
margin: 0 auto 24px auto;
}
}
@media (max-width: 768px) {
.navi-hp .btn-layout-navi-hp {
width: 100;
margin: 0 auto 24px auto;
}
}
.navi-hp img {
-webkit-filter: drop-shadow(1px 3px 4px rgba(0, 0, 0, 0.4));
-moz-filter: drop-shadow(1px 3px 4px rgba(0, 0, 0, 0.4));
-ms-filter: drop-shadow(1px 3px 4px rgba(0, 0, 0, 0.4));
filter: drop-shadow(1px 3px 4px rgba(0, 0, 0, 0.4));
}
/*パンくず*/
.breadcrumb {
margin: 0;
padding: 0;
list-style: none;
}
.breadcrumb li {
display: inline;
/*横に並ぶように*/
list-style: none;
}
.breadcrumb li:after {
/* >を表示*/
content: '>';
padding: 0 0.2em;
color: #555;
}
.breadcrumb li:last-child:after {
content: '';
}
.breadcrumb li:last-child:after {
content: '';
}
.breadcrumb li a {
text-decoration: none;
color: #524e4d;
/*色*/
}
.breadcrumb li a:hover {
text-decoration: underline;
}
/*-------------下層ページコンテンツ-------------*/
.contact-sent {
margin-top: 24px;
font-size: 20px;
font-weight: bold;
line-height: 180%;
}
.tel-sent {
font-size: 32px;
}
.teltime-sent {
color: #cccccc;
}
/*------------実績--------*/
.table-type1-mb24 {
width: 100%;
border-collapse: collapse;
margin-bottom: 24px;
}
.table-type1-mb24 h3 {
margin-bottom: 24px;
}
.table-type1-mb24 th {
width: 40%;
box-sizing: border-box;
background-color: #efefef;
color: #f08437;
text-align: center;
border-bottom: #f08437 1px solid;
border-top: #f08437 1px solid;
padding: 15px 0 10px 10px;
}
.table-type1-mb24 td {
width: 60%;
box-sizing: border-box;
border-bottom: solid 1px #f08437;
border-top: solid 1px #f08437;
text-align: left;
padding: 15px 0 10px 10px;
}
.border-work a {
color: #f08437;
padding: 10px 20px;
border: 2px solid #f08437;
box-sizing: border-box;
}
.border-work a:hover {
color: #f08437;
transition: 0.5s;
background-color: #000000;
cursor: pointer;
}
.badge-relative {
position: relative;
}
.btn-works-back {
display: flex;
align-items: center;
background-color: #f08437;
color: #ffffff;
width: 120px;
margin: 0 auto 72px auto;
z-index: 999;
font-size: 16px;
border-radius: 5px;
}
.btn-works-back a {
color: #ffffff;
box-sizing: border-box;
width: 120px;
display: block;
padding: 5px 10px;
}
.btn-works-back a:hover {
color: #f08437;
transition: 0.5s;
background-color: #000000;
cursor: pointer;
border-radius: 5px;
}
/*-----見出し-------*/
.h-pic {
text-align: center;
}
.h-pic:before {
content: "";
display: inline-block;
width: 1.1em;
height: 1.1em;
background: url(../img/h2@2x.png) no-repeat;
background-size: contain;
}
/*------------------------------*/
/*------------------------------*/
.h-dotted {
background: #dfefff;
box-shadow: 0px 0px 0px 5px #dfefff;
border: dashed 2px white;
padding: 0.3em 0.5em;
}
/*------------------------------*/
.h-square1 {
position: relative;
padding: 10px 5px 10px 42px;
background: #77c3df;
font-size: 20px;
color: #ffffff;
margin-left: -33px;
line-height: 1.3;
z-index: 14;
}
.h-square1:before {
position: absolute;
content: '';
left: -2px;
top: -2px;
border: none;
border-left: solid 40px white;
border-bottom: solid 79px transparent;
z-index: -2;
}
/*------------------------------*/
.h-smallunder {
position: relative;
margin-bottom: 1.5em;
}
.h-smallunder:before {
content: '';
position: absolute;
bottom: -15px;
display: inline-block;
width: 60px;
height: 5px;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
background-color: black;
border-radius: 2px;
}
/*------------------------------*/
.h-circle {
color: #505050;
/*文字色*/
padding: 0.5em;
/*文字周りの余白*/
display: inline-block;
/*おまじない*/
line-height: 1.3;
/*行高*/
background: #dbebf8;
/*背景色*/
vertical-align: middle;
border-radius: 25px 0px 0px 25px;
/*左側の角を丸く*/
}
.h-circle:before {
content: '●';
color: white;
margin-right: 8px;
}
/*------------------------------*/
.h-curve {
position: relative;
color: #158b2b;
font-size: 32px;
padding: 17px 0;
text-align: center;
margin: 1.5em 0;
}
.h-curve:before {
content: "";
position: absolute;
top: -8px;
left: 50%;
width: 150px;
height: 75px;
border-radius: 50%;
border: 5px solid #a6ddb0;
border-left-color: transparent;
border-right-color: transparent;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
/*------------------------------*/
.h-kagikakko {
position: relative;
line-height: 1.4;
padding: 0.25em 1em;
display: inline-block;
}
.h-kagikakko:before, .h-kagikakko:after {
content: '';
width: 20px;
height: 30px;
position: absolute;
display: inline-block;
}
.h-kagikakko:before {
border-left: solid 1px #ff5722;
border-top: solid 1px #ff5722;
top: 0;
left: 0;
}
.h-kagikakko:after {
border-right: solid 1px #ff5722;
border-bottom: solid 1px #ff5722;
bottom: 0;
right: 0;
}
.hr-botted {
border-width: 0 0 8px;
border-style: solid;
border-image: url('data:image/svg+xml,') 0 0 100% repeat;
width: 216px;
margin: 0 auto;
}
.hr-dot {
border: none;
border-top: dotted 5px #f08437;
}
.hr-dot-gray {
border: none;
border-top: dotted 5px #cccccc;
}
.hr-black {
height: 2px;
background-color: #333333;
border: none;
}
/*--------------------ボタン関連----------------------*/
.button-1 a {
color: #f08437;
padding: 10px 20px;
border: 1px solid #f08437;
box-sizing: border-box;
}
.button-1 a:hover {
color: #f08437;
transition: 0.5s;
background-color: #000000;
cursor: pointer;
}
.button-layout {
-webkit-filter: drop-shadow(1px 3px 4px rgba(0, 0, 0, 0.4));
-moz-filter: drop-shadow(1px 3px 4px rgba(0, 0, 0, 0.4));
-ms-filter: drop-shadow(1px 3px 4px rgba(0, 0, 0, 0.4));
filter: drop-shadow(1px 3px 4px rgba(0, 0, 0, 0.4));
}
@media (min-width: 769px) {
.button-layout {
width: 100%;
margin: 0 auto 24px auto;
}
}
@media (max-width: 768px) {
.button-layout {
width: 100%;
margin: 0 auto 24px auto;
}
}
.button-layout-50-100 {
-webkit-filter: drop-shadow(1px 3px 4px rgba(0, 0, 0, 0.4));
-moz-filter: drop-shadow(1px 3px 4px rgba(0, 0, 0, 0.4));
-ms-filter: drop-shadow(1px 3px 4px rgba(0, 0, 0, 0.4));
filter: drop-shadow(1px 3px 4px rgba(0, 0, 0, 0.4));
}
@media (min-width: 769px) {
.button-layout-50-100 {
width: 50%;
margin: 0 auto 24px auto;
}
}
@media (max-width: 768px) {
.button-layout-50-100 {
width: 100%;
margin: 0 auto 24px auto;
}
}
@media (min-width: 769px) {
.white-back-button {
border-radius: 50px;
background-color: #ffffff;
height: 80px;
width: 450px;
margin: 0 auto;
}
}
/* トップへ戻るボタン*/
#page-top {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 200;
}
@media (min-width: 769px) {
#page-top {
font-size: 77%;
}
}
@media (max-width: 768px) {
#page-top {
font-size: 80%;
}
}
#page-top a {
display: block;
text-align: center;
text-decoration: none;
color: #fff;
border-radius: 5px;
background-color: rgba(102, 102, 102, 0.8);
}
@media (min-width: 769px) {
#page-top a {
width: 90px;
padding: 20px 0;
}
}
@media (max-width: 768px) {
#page-top a {
width: 60px;
padding: 10px 0;
line-height: 160%;
}
}
#page-top a:hover {
text-decoration: none;
background: #999;
}
.btn-link-w50 a {
display: block;
padding: 16px;
background-color: #333333;
text-align: center;
border-radius: 10px;
color: #ffffff;
font-weight: bold;
text-decoration: none;
}
@media (min-width: 769px) {
.btn-link-w50 a {
width: 50%;
}
}
.btn-link-w25-50 a {
display: block;
padding: 16px;
background-color: #333333;
text-align: center;
border-radius: 10px;
color: #ffffff;
text-decoration: none;
}
@media (min-width: 769px) {
.btn-link-w25-50 a {
width: 25%;
}
}
@media (max-width: 768px) {
.btn-link-w25-50 a {
width: 50%;
}
}
.btn-link-w15-40 a {
display: block;
padding: 8px;
background-color: #333333;
text-align: center;
border-radius: 10px;
color: #ffffff;
text-decoration: none;
}
@media (min-width: 769px) {
.btn-link-w15-40 a {
width: 15%;
}
}
@media (max-width: 768px) {
.btn-link-w15-40 a {
width: 40%;
}
}
.badge-new {
display: inline-block;
padding: 2px;
font-size: 14px;
background-color: red;
text-align: center;
border-radius: 5px;
color: #ffffff;
margin-right: 8px;
}
@media (min-width: 769px) {
.badge-new {
width: 5%;
}
}
@media (max-width: 768px) {
.badge-new {
width: 20vw;
}
}
/*------------リスト関連---------------*/
.list-standard {
margin: 40px 0 40px 0px;
}
.list-standard li {
margin: 0 0 16px 56px;
font-weight: bold;
}
.list-dl01-standard dt {
font-weight: bold;
font-size: 2rem;
margin-bottom: 8px;
color: #f08437;
}
.list-dl01-standard dd {
margin-bottom: 24px;
color: #f08437;
}
.list-dl01-standard hr {
margin-bottom: 40px;
}
.li-disc li {
list-style-type: disc;
margin-left: 20px;
margin-bottom: 16px;
}
/*------------HP--------*/
/*制作の流れ*/
.list-flow {
margin-bottom: 90px;
}
.list-flow li {
height: 52px;
border: 4px solid #406833;
background-color: #fafaf7;
box-sizing: border-box;
list-style-type: none;
margin: 30px auto;
color: #000000;
border-radius: 30px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
font-size: 20px;
}
@media (min-width: 769px) {
.list-flow li {
width: 50%;
}
}
@media (max-width: 768px) {
.list-flow li {
width: 100%;
}
}
.list-flow li:after {
content: "";
position: absolute;
right: 0;
bottom: -20px;
left: 0;
width: 0px;
height: 0px;
margin: auto;
border-style: solid;
border-color: #406833 transparent transparent transparent;
border-width: 20px 20px 0 20px;
}
.list-flow li:last-child:after {
content: none;
}
/*------------モーダル---------------*/
.modal {
display: none;
height: 100vh;
position: fixed;
top: 0;
width: 100%;
z-index: 997;
overflow: scroll;
}
.modal__bg {
background: rgba(5, 5, 5, 0.9);
height: 100%;
position: absolute;
width: 100%;
}
.modal__content {
width: 70%;
height: 60%;
overflow-y: auto;
position: fixed;
top: 45%;
bottom: 0;
left: 50%;
padding: 40px;
background: #fff;
border: #CCC 5px solid;
border-radius: 5px;
transform: translate(-50%, -50%);
margin-left: -9px;
}
.modal__content h3 {
color: #333333;
font-weight: bold;
font-size: 2rem;
margin-bottom: 32px;
text-align: center;
}
.modal__content p {
margin-bottom: 32px;
}
.modal__content hr {
border: #ccc 2px solid;
border-radius: 3px;
margin-bottom: 32px;
}
.modal__content_pic img {
position: relative;
max-width: 90vw;
max-height: 90vh;
}
.modal__content_pic h3 {
color: #333333;
font-weight: bold;
font-size: 2rem;
margin-bottom: 32px;
text-align: center;
}
.modal__content_pic p {
margin-bottom: 32px;
}
.modal__content_pic hr {
border: #ccc 2px solid;
border-radius: 3px;
margin-bottom: 32px;
}
.modal__content_pic-footmenu img {
max-height: 90vh;
margin: auto;
}
.modalback-btn {
font-size: 5rem;
z-index: 999;
bottom: 3%;
left: 2%;
position: fixed;
}
.modalback-btn a {
display: block;
color: #efefef;
padding: 6px 10px 10px 10px;
}
/*吹き出し*/
/*----- Q&A -----*/
.blk-qa {
display: flex;
margin: 16px 0 0 0;
}
.blk-qa > div {
display: table-cell;
}
.blk-qa > div img {
width: 100px;
}
.blk-qa p {
margin-bottom: 1em;
}
.blk-qa p:last-child {
margin-bottom: 0;
}
.blk-qa > div:first-child {
z-index: 2;
}
.blk-qa > div:nth-child(2) {
display: inline-block;
position: relative;
padding: 32px;
width: 735px;
border-radius: 20px;
}
.blk-qa > div:nth-child(2)::after {
content: '';
position: absolute;
display: block;
width: 0;
height: 0;
top: 25px;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
}
@media screen and (max-width: 600px) {
.blk-qa {
position: relative;
display: block;
width: 100%;
margin: 2px 0 0 0;
}
blk-qa .body_img.is_mi .blk-qa > div:first-child {
width: 50px;
}
.blk-qa > div:nth-child(2) {
margin: 20px 0 0 0;
padding: 24px;
}
.blk-qa > div:nth-child(2)::after {
display: none;
}
}
/* Q&A - クエスチョン*/
.blk-q > div:first-child {
width: 100px;
padding-right: 20px;
}
.blk-q > div:nth-child(2) {
background: #dbf7ff;
}
.blk-q > div:nth-child(2)::after {
left: -10px;
border-right: 20px solid #dbf7ff;
}
@media screen and (max-width: 600px) {
.blk-q > div:first-child {
position: absolute;
left: -5px;
width: 50px;
padding: 0;
}
.blk-q > div:first-child p span {
padding-right: 0;
padding-left: 0;
font-size: 9px !important;
}
.blk-q > div:nth-child(2) {
width: calc(100% - 42px);
left: 20px;
}
}
/* Q&A - アンサー*/
.blk-a > div:first-child {
width: 100px;
padding-left: 20px;
}
.blk-a > div:first-child p {
position: relative;
}
.blk-a > div:first-child p span {
position: absolute;
display: block;
top: 100%;
width: 100%;
padding: 4px 2px;
background-color: #fff;
color: #000;
font-size: 80%;
text-align: center;
line-height: 1.2;
letter-spacing: -0.02em;
}
.blk-a {
flex-direction: row-reverse;
}
.blk-a > div:nth-child(2) {
background: #fff2e0;
}
.blk-a > div:nth-child(2)::after {
right: -10px;
border-left: 20px solid #fff2e0;
}
@media screen and (max-width: 600px) {
.blk-a > div:first-child {
position: absolute;
right: -5px;
width: 50px;
padding: 0;
}
.blk-a > div:first-child p span {
padding-right: 0;
padding-left: 0;
font-size: 9px;
}
.blk-a > div:nth-child(2) {
width: calc(100% - 42px);
right: -20px;
}
}
.blk-q > div:first-child p {
position: relative;
}
.blk-q > div:first-child p span {
position: absolute;
display: block;
top: 100%;
width: 100%;
padding: 4px 2px;
background-color: #fff;
color: #000;
font-size: 80%;
text-align: center;
line-height: 1.2;
letter-spacing: -0.02em;
}
/*アニメーション要素のスタイル*/
@media (min-width: 769px) {
.animation {
opacity: 0;
visibility: hidden;
transition: 1.5s;
transform: translateY(150px);
}
}
@media (max-width: 768px) {
.animation {
opacity: 0;
visibility: hidden;
transition: 1.5s;
transform: translateY(50px);
}
}
/*アニメーション要素までスクロールした時のスタイル*/
.active {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
/*----------Cpmpornentscss---------*/
/*-------見出し------*/
h2 {
text-align: center;
font-weight: bold;
}
@media (min-width: 769px) {
h2 {
margin-bottom: 50px;
line-height: 1.3em;
font-size: 32px;
}
}
@media (max-width: 768px) {
h2 {
margin-bottom: 32px;
line-height: 1.1em;
font-size: 24px;
}
}
h2 span {
color: #0B3D96 !important;
font-family: "Noto Sans JP", sans-serif;
display: block;
font-size: 16px;
}
@media (min-width: 769px) {
h2 span {
margin-top: -6px;
}
}
.h2lower {
background-color: #0B3D96;
color: #ffffff;
padding: 16px 24px;
}
@media (min-width: 769px) {
.home h2 {
font-size: 48px;
}
}
@media (max-width: 768px) {
.home h2 {
font-size: 32px;
}
}
.h2-mark-black::before, .h2-mark-white::before {
content: "" !important;
background-image: url(https://www.siteworks.site/handy-graphics/wp-content/uploads/2023/05/h2-before-black.png);
background-repeat: no-repeat;
margin: auto 10px auto 0px;
display: inline-block;
padding: 15px;
}
.h2-mark-black::before {
background-image: url(https://www.siteworks.site/handy-graphics/wp-content/uploads/2023/05/h2-before-black.png);
}
.h2-mark-white::before {
background-image: url(https://www.siteworks.site/handy-graphics/wp-content/uploads/2023/05/h2-before-white.png);
}
@media (min-width: 769px) {
.h2-l {
font-size: 44px;
}
}
.c-full-h2-01 {
font-weight: 500;
margin-bottom: 0px;
}
@media (min-width: 769px) {
.c-full-h2-01 {
font-size: 50px !important;
line-height: 1.8em !important;
white-space: nowrap;
}
}
@media (max-width: 768px) {
.c-full-h2-01 {
font-size: 23px !important;
line-height: 1.5em !important;
}
}
h3 {
line-height: 1.6em;
font-weight: bold;
color: #444444;
}
@media (min-width: 769px) {
h3 {
font-size: 22px;
margin-bottom: 22px;
}
}
@media (max-width: 768px) {
h3 {
font-size: 22px;
margin-bottom: 24px;
text-align: center;
}
}
h4 {
font-weight: bold;
margin-bottom: 24px;
line-height: 0.1 0.6em;
}
@media (min-width: 769px) {
h4 {
font-size: 20px;
}
}
@media (max-width: 768px) {
h4 {
font-size: 20px !important;
text-align: center;
}
}
.c-fullwidth-wrp {
position: relative;
margin: 0 calc(50% - 50vw);
}
@media (max-width: 768px) {
.c-fullwidth-wrp {
padding-left: 15px !important;
padding-right: 15px !important;
}
}
.c-fullwidth-wrp-perfect {
position: relative;
margin: 0 calc(50% - 50vw);
}
/*
//コンテンツ幅全体
.c-fullwidth-wrp{
position:relative;
left: 50%;
transform: translateX(-50%);
@include pc {
width: 100vw;
min-width:1200px;};
@include sp {
width: 100vw;
padding-right:16px !important;
padding-left:16px !important;};}
//コンテンツ幅全体
.c-fullwidth-wrp-perfect{
position:relative;
left: 50%;
transform: translateX(-50%);
@include pc {
width: 101vw;
min-width:1200px;};
@include sp {width: 100vw;};}
*/
.c-fullwidth-cont {
margin: 0 auto;
}
@media (min-width: 769px) {
.c-fullwidth-cont {
max-width: 1080px;
width: 100%;
}
}
@media (max-width: 768px) {
.c-fullwidth-cont {
width: 95%;
}
}
.c-fullwidth-cont100 {
margin: 0 auto;
}
@media (min-width: 769px) {
.c-fullwidth-cont100 {
max-width: 1080px;
width: 100%;
}
}
@media (max-width: 768px) {
.c-fullwidth-cont100 {
width: 100%;
}
}
.c-cont {
margin: 0 auto;
}
@media (min-width: 769px) {
.c-cont {
max-width: 1080px;
width: 100%;
}
}
@media (max-width: 768px) {
.c-cont {
width: 95%;
}
}
.c-cont100 {
margin: 0 auto;
}
@media (min-width: 769px) {
.c-cont100 {
max-width: 1080px;
width: 100%;
}
}
@media (max-width: 768px) {
.c-cont100 {
width: 100%;
}
}
@media (max-width: 768px) {
.c-sp95-cont {
width: 95%;
margin: 0 auto;
}
}
@media (max-width: 768px) {
.c-sp100-cont {
width: 100%;
margin: 0 auto;
}
}
/*
.c-fullwidth-cont {
@include pc{
max-width: 1110px;
width: 95%;};
@include sp{width:100%;};
margin: 0 auto;
//padding-left:15px;
//padding-right:15px;
}*/
@media (min-width: 769px) {
.c-fullwidth-pd {
padding: 0 5%;
}
}
.c-bg-contain {
background-size: contain;
background-repeat: round;
}
.c-bg-cover {
background-size: cover;
background-repeat: no-repeat;
}
.c-bg-cover-pic {
background-size: cover;
background-repeat: no-repeat;
}
.c-pic-full {
background-size: contain;
background-repeat: no-repeat;
height: 81vw;
margin-bottom: -20px;
}
.bg2 {
width: 100vw;
background-size: contain;
background-image: url(http://siteworks.site/miroku-no-shizuku/wp-content/uploads/2021/03/wood-back-scaled.jpg);
background-repeat: repeat;
}
.c-bgimage01 {
background-image: url(https://www.siteworks.site/ssworks/wp-content/uploads/2022/11/tuyomi-back.jpg);
}
.c-bgimage02 {
background-image: url(https://www.siteworks.site/handy-graphics/wp-content/uploads/2022/01/hg-top-intro.png);
}
.c-bgimage03 {
background-image: url(https://www.siteworks.site/testsite/wp-content/uploads/2021/11/wood-back.jpg);
}
.c-bgimage04 {
background-image: url(https://www.siteworks.site/testsite/wp-content/uploads/2021/11/14-6.jpg);
}
.c-bgimage05 {
background-image: url(https://www.siteworks.site/testsite/wp-content/uploads/2021/11/21-4.jpg);
}
.c-bgimage06 {
background-image: url(https://www.siteworks.site/testsite/wp-content/uploads/2021/12/bg_hougan01.png);
}
.c-subhead-v {
position: relative;
}
@media (min-width: 769px) {
.c-subhead-v {
padding-top: 250px;
}
}
@media (max-width: 768px) {
.c-subhead-v {
padding-top: 150px;
}
}
.c-subhead-v::before {
content: "";
display: block;
height: 100%;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
overflow: hidden;
position: absolute;
right: 0;
top: 0;
z-index: -1;
}
@media (min-width: 769px) {
.c-subhead-v::before {
width: 100%;
}
}
@media (max-width: 768px) {
.c-subhead-v::before {
width: 100%;
}
}
.c-jirei::before {
background-image: url(https://www.siteworks.site/utsugikeiki/wp-content/uploads/2023/10/img-mv-salutation-1.jpg);
}
.c-jirei2::before {
background-image: url(https://www.siteworks.site/utsugikeiki/wp-content/uploads/2023/11/img-mv-voice.png);
}
.c-jirei3::before {
background-image: url(https://www.siteworks.site/utsugikeiki/wp-content/uploads/2023/11/submv-salutation.jpg);
}
.c-submv01::before {
background-image: url(https://www.siteworks.site/utsugikeiki/wp-content/uploads/2023/11/submv-company.jpg);
}
.c-submv02::before {
background-image: url(https://www.siteworks.site/utsugikeiki/wp-content/uploads/2023/12/submv-history2.jpg);
}
.c-submv03::before {
background-image: url(https://www.siteworks.site/utsugikeiki/wp-content/uploads/2023/11/submv-topmassage.jpg);
}
.c-submv04::before {
background-image: url(https://www.siteworks.site/utsugikeiki/wp-content/uploads/2023/11/submv-products.jpg);
}
.c-submv05::before {
background-image: url(https://www.siteworks.site/utsugikeiki/wp-content/uploads/2023/11/submv-product.jpg);
}
.c-submv06::before {
background-image: url(https://www.siteworks.site/utsugikeiki/wp-content/uploads/2023/11/submv-recruit.jpg);
}
.c-submv07::before {
background-image: url(https://www.siteworks.site/utsugikeiki/wp-content/uploads/2023/11/submv-contact.jpg);
}
.c-submv08::before {
background-image: url(https://www.siteworks.site/utsugikeiki/wp-content/uploads/2023/12/submvvoice3.jpg);
}
.c-subhead-v .cont {
position: absolute;
background-color: #ffffff;
}
@media (min-width: 769px) {
.c-subhead-v .cont {
bottom: 0px;
padding: 16px 24px;
margin-bottom: -36px;
}
}
@media (max-width: 768px) {
.c-subhead-v .cont {
bottom: -10px;
padding: 12px;
}
}
.c-subhead-v h1 {
display: flex;
align-items: center;
font-weight: bold;
margin-bottom: 0px;
line-height: 1em;
text-align: left;
}
@media (min-width: 769px) {
.c-subhead-v h1 {
font-size: 34px;
}
}
@media (max-width: 768px) {
.c-subhead-v h1 {
font-size: 24px;
}
}
.c-subhead-v h1::after {
content: "";
height: 1px;
flex-grow: 1;
background-color: #666;
margin-left: 8px;
}
@media (min-width: 769px) {
.c-subhead-v h1::after {
width: 100px;
}
}
@media (max-width: 768px) {
.c-subhead-v h1::after {
width: 30px;
}
}
.c-subhead-v h2 {
position: relative;
font-weight: bold;
margin-bottom: 0px;
line-height: 1em;
text-align: left;
}
@media (min-width: 769px) {
.c-subhead-v h2 {
font-size: 40px;
}
}
@media (max-width: 768px) {
.c-subhead-v h2 {
font-size: 32px;
}
}
.c-subhead-v h2::after {
content: '';
position: absolute;
top: 50%;
display: inline-block;
width: 50px;
height: 5px;
background-color: #666;
}
.c-subhead-v p {
font-weight: bold;
line-height: 1em;
}
@media (min-width: 769px) {
.c-subhead-v p {
font-size: 20px;
}
}
@media (max-width: 768px) {
.c-subhead-v p {
font-size: 16px;
line-height: 1.6em;
}
}
@media (max-width: 768px) {
.c-clm25-50 .wp-block-column:not(:only-child) {
flex-basis: 45% !important;
flex-grow: 1 !important;
margin-left: 8px;
}
}
.c-clm25-50-card li {
list-style-type: none;
}
@media (min-width: 769px) {
.c-clm25-50-card li {
margin-left: 16px;
}
}
@media (max-width: 768px) {
.c-clm25-50-card li {
margin-left: 8px;
}
}
.c-clm25-50-card li:first-child {
margin-left: 0px;
}
@media (max-width: 768px) {
.c-clm25-50-card ul li:nth-child(even) {
margin-left: 8px;
}
}
@media (max-width: 768px) {
.c-clm25-50-card ul li:nth-child(odd) {
margin-left: 0px;
}
}
@media (min-width: 769px) {
.c-clm25-50 {
flex-basis: 25%;
}
}
@media (max-width: 768px) {
.c-clm25-50 {
flex-basis: 44% !important;
flex-grow: 1 !important;
}
}
@media (max-width: 768px) {
.c-clm50 {
flex-basis: 47% !important;
flex-grow: 1 !important;
margin-left: 8px;
}
}
/*----------アコーディオンボックス----------*/
/* メニュー全体 */
/* チェックボックスは非表示にする（内部的な Off/On の機能だけ利用する） */
.c-aco01 input {
display: none;
}
/* 開いた状態のサブメニュー */
.c-aco01 input:checked + ul {
line-height: 1.5;
height: auto;
margin: 24px auto;
padding-inline-start: 0px;
}
/* 閉じた状態のサブメニュー */
.c-aco01 ul {
overflow: hidden;
line-height: 0;
transition: 0.9s;
height: 0px;
padding-inline-start: 0px;
/* 下記は開閉によらず共通の設定 */
list-style: none;
margin: 0;
}
.c-aco01 li {
/* 下記は開閉によらず共通の設定 */
list-style: none;
margin-bottom: 16px;
}
/* 親項目の装飾 */
.c-aco01 label {
display: block;
margin: 0;
padding: 0.5rem;
background: #0B3D96;
cursor: pointer;
width: 130px;
color: #fff;
border-radius: 8px;
text-align: center;
font-size: 18px;
background-color: #444444;
}
.c-aco-dsg01 label {
display: flex;
margin: 0;
padding: 28px;
background: #3c86a9;
cursor: pointer;
width: 100%;
color: #666666;
border-radius: 8px;
text-align: left;
font-size: 18px;
background-color: #ebf5f9;
align-items: center;
font-weight: bold;
}
.q-head {
background-color: #0B3D96;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
color: #ffffff;
margin: 0 8px;
font-size: 0.9em;
}
@media (min-width: 769px) {
.q-head {
height: 30px;
width: 30px;
border-radius: 15px;
padding: 15px;
}
}
@media (max-width: 768px) {
.q-head {
height: 36px;
width: 36px;
border-radius: 18px;
padding: 18px;
}
}
.c-aco01 label {
margin: 0 auto;
}
.c-aco01 label:hover {
background: #ccc;
transition: 0.5s;
}
.c-aco01 ol li {
list-style-type: disc;
}
/*--------------------モジュール関連--------------------*/
@media (min-width: 769px) {
.c-1c01 {
padding: 80px 0px;
}
}
@media (max-width: 768px) {
.c-1c01 {
padding: 80px 0px;
}
}
.c-1c01 h2 {
margin-bottom: 16px;
color: #0B3D96;
}
.c-1c01 img {
border-radius: 10px !important;
}
@media (max-width: 768px) {
.c-1c01 p {
margin-bottom: 8px !important;
}
}
.c-1c02-1 .title {
line-height: 1;
font-weight: 300;
}
@media (min-width: 769px) {
.c-1c02-1 .title {
font-size: 44px !important;
}
}
@media (max-width: 768px) {
.c-1c02-1 .title {
font-size: 32px !important;
text-align: center;
}
}
.c-1c02-1 h3 {
font-size: 36px;
line-height: 1.6em;
}
@media (min-width: 769px) {
.c-1c02-1 h4 {
font-size: clamp(16px, 2.2vw, 28px);
margin-bottom: 16px;
}
}
@media (max-width: 768px) {
.c-1c02-1 h4 {
font-size: 20px;
margin: 0 auto 16px auto;
}
}
@media (max-width: 768px) {
.c-1c02-1 p {
margin-bottom: 8px;
}
}
.c-1c02-1 img {
border-radius: 10px !important;
}
@media (min-width: 769px) {
.img-box {
max-width: 550px;
}
}
@media (min-width: 769px) {
.c-1c02-2 .l-cont {
max-width: 70%;
}
}
.c-1c02-2 .title {
line-height: 1;
font-weight: 300;
background-color: #0B3D96;
padding: 12px 24px;
text-align: center;
width: fit-content;
}
@media (min-width: 769px) {
.c-1c02-2 .title {
font-size: 24px !important;
margin-bottom: 24px;
}
}
@media (max-width: 768px) {
.c-1c02-2 .title {
font-size: 20px !important;
margin: 0 auto 24px auto;
text-align: center;
}
}
.c-1c02-2 h3 {
font-size: 36px;
line-height: 1.6em;
}
@media (min-width: 769px) {
.c-1c02-2 h4 {
font-size: 22px !important;
margin-bottom: 16px;
}
}
@media (max-width: 768px) {
.c-1c02-2 h4 {
font-size: 20px !important;
margin: 0 auto 16px auto;
}
}
@media (max-width: 768px) {
.c-1c02-2 p {
margin-bottom: 8px;
}
}
.c-1c02-2 img {
object-fit: cover;
display: block;
position: relative;
}
.c-1c02-3 .btn {
line-height: 1;
font-weight: 300;
background-color: #0B3D96;
padding: 16px 32px;
text-align: center;
width: fit-content;
border-radius: 0px;
}
@media (min-width: 769px) {
.c-1c02-3 .btn {
font-size: 24px !important;
margin-bottom: 24px;
}
}
@media (max-width: 768px) {
.c-1c02-3 .btn {
font-size: 20px !important;
margin: 0 auto 24px auto;
text-align: center;
}
}
.c-1c02-3 h3 {
font-size: 36px;
line-height: 1.6em;
}
@media (min-width: 769px) {
.c-1c02-3 h4 {
font-size: 22px !important;
margin-bottom: 16px;
}
}
@media (max-width: 768px) {
.c-1c02-3 h4 {
font-size: 20px !important;
margin: 0 auto 16px auto;
}
}
@media (max-width: 768px) {
.c-1c02-3 p {
margin-bottom: 8px;
}
}
@media (min-width: 769px) {
.c-1c02-4 .l-box {
height: 400px;
padding: 0px 40px 0 10%;
}
}
@media (max-width: 768px) {
.c-1c02-4 .l-box {
max-width: 95%;
margin: 0 auto;
padding-top: 40px;
}
}
@media (min-width: 769px) {
.c-1c02-4 .l-cont {
max-width: 70%;
}
}
.c-1c02-4 .title {
display: inline-block;
line-height: 1;
font-weight: 600;
padding: 0px;
text-align: center;
width: fit-content;
color: #0B3D96;
}
@media (min-width: 769px) {
.c-1c02-4 .title {
font-size: 36px;
margin-bottom: 24px;
margin-left: 8px;
}
}
@media (max-width: 768px) {
.c-1c02-4 .title {
display: block;
font-size: 28px;
margin: 0 auto 24px auto;
text-align: center;
}
}
.c-1c02-4 h3 {
background-color: #0B3D96;
font-size: 100px;
line-height: 1em;
width: fit-content;
padding: 6px 28px;
display: inline-block;
position: relative;
top: -18px;
margin-bottom: 8px;
font-weight: 100;
border-radius: 5px;
}
@media (max-width: 768px) {
.c-1c02-4 h3 {
padding: 0px 15px;
font-size: 65px;
top: -15px;
display: block;
margin: 0 auto;
}
}
@media (min-width: 769px) {
.c-1c02-4 h4 {
font-size: 22px;
margin-bottom: 16px;
}
}
@media (max-width: 768px) {
.c-1c02-4 h4 {
font-size: 20px;
}
}
@media (max-width: 768px) {
.c-1c02-4 p {
margin-bottom: 8px;
}
}
.c-1c02-4 img {
outline: 20px solid #c2e0ec;
object-fit: cover;
display: block;
position: relative;
}
@media (min-width: 769px) {
.c-1c02-4 img {
height: 400px;
}
}
@media (max-width: 768px) {
.c-1c02-4 img {
outline: 10px solid #c2e0ec;
outline-offset: -10px;
}
}
@media (min-width: 769px) {
.c-1c02-5 .l-cont-left {
padding: 0% 4% 10% 13%;
}
}
@media (min-width: 769px) {
.c-1c02-5 .l-cont-right {
padding: 0% 13% 10% 4%;
}
}
.c-1c02-5 .title {
line-height: 1;
font-weight: 300;
background-color: #0B3D96;
padding: 12px 24px;
text-align: center;
width: fit-content;
}
@media (min-width: 769px) {
.c-1c02-5 .title {
font-size: 24px !important;
margin-bottom: 24px;
}
}
@media (max-width: 768px) {
.c-1c02-5 .title {
font-size: 20px !important;
margin: 0 auto 24px auto;
text-align: center;
}
}
.c-1c02-5 h3 {
line-height: 1.4em;
font-weight: bold;
}
@media (min-width: 769px) {
.c-1c02-5 h3 {
font-size: clamp(20px, 22px, 22px);
}
}
@media (max-width: 768px) {
.c-1c02-5 h3 {
font-size: 24px;
}
}
@media (min-width: 769px) {
.c-1c02-5 h4 {
font-size: 22px !important;
margin-bottom: 16px;
}
}
@media (max-width: 768px) {
.c-1c02-5 h4 {
font-size: 20px !important;
margin: 0 auto 16px auto;
}
}
@media (max-width: 768px) {
.c-1c02-5 p {
margin-bottom: 8px;
}
}
.c-1c02-5 img {
object-fit: cover;
display: block;
position: relative;
min-height: 350px;
margin: 0 0 0 auto;
}
@media (min-width: 769px) {
.c-1c02-6 .l-cont-left {
padding: 0% 4% 10% 13%;
}
}
@media (min-width: 769px) {
.c-1c02-6 .l-cont-right {
padding: 0% 13% 10% 4%;
}
}
.c-1c02-6 .title {
line-height: 1;
font-weight: 300;
background-color: #0B3D96;
padding: 12px 24px;
text-align: center;
width: fit-content;
}
@media (min-width: 769px) {
.c-1c02-6 .title {
font-size: 24px !important;
margin-bottom: 24px;
}
}
@media (max-width: 768px) {
.c-1c02-6 .title {
font-size: 20px !important;
margin: 0 auto 24px auto;
text-align: center;
}
}
.c-1c02-6 h3 {
line-height: 1.4em;
font-weight: bold;
}
@media (min-width: 769px) {
.c-1c02-6 h3 {
font-size: clamp(20px, 22px, 22px);
}
}
@media (max-width: 768px) {
.c-1c02-6 h3 {
font-size: 24px;
}
}
@media (min-width: 769px) {
.c-1c02-6 h4 {
font-size: 22px !important;
margin-bottom: 16px;
}
}
@media (max-width: 768px) {
.c-1c02-6 h4 {
font-size: 20px !important;
margin: 0 auto 16px auto;
}
}
@media (max-width: 768px) {
.c-1c02-6 p {
margin-bottom: 8px;
}
}
.c-1c02-6 img {
object-fit: cover;
display: block;
position: relative;
min-height: 350px;
margin: 0 0 0 auto;
}
.c-1c03 {
margin-bottom: 32px;
}
.c-1c03 img {
border-radius: 10px;
border: solid 3px #333333;
}
@media (min-width: 769px) {
.c-1c03 img {
margin-bottom: 24px;
}
}
@media (min-width: 769px) {
.c-1c03 h4 {
text-align: left;
margin-left: 1em;
}
}
@media (max-width: 768px) {
.c-1c03 h4 {
text-align: center;
}
}
.c-1c03 .hr {
height: 1px;
background-color: #666666;
border: none;
margin-bottom: 16px;
}
@media (max-width: 768px) {
.c-1c03 p {
margin-bottom: 24px !important;
}
}
.c-1c04 {
position: relative;
}
.c-1c04 .block-r {
position: absolute;
background-color: #f2fdff;
width: 23vw;
z-index: -1;
}
@media (min-width: 769px) {
.c-1c04 .block-r {
width: 23vw;
right: 0px;
height: 450px;
top: 245px;
}
}
@media (max-width: 768px) {
.c-1c04 .block-r {
width: 27vw;
right: 5px;
height: 100px;
top: 540px;
}
}
@media (max-width: 768px) {
.c-1c04 .col-l {
margin-bottom: 24px !important;
}
}
@media (min-width: 769px) {
.c-1c04 .col-l p {
padding: 0px 24px;
}
}
@media (max-width: 768px) {
.c-1c04 .col-r {
margin-bottom: 24px !important;
}
}
.c-1c04 .col-r img {
border-radius: 10px;
}
.c-1c04 .col-r .mini-img {
position: relative;
}
@media (min-width: 769px) {
.c-1c04 .col-r .mini-img {
top: -15%;
left: -10%;
}
}
@media (max-width: 768px) {
.c-1c04 .col-r .mini-img {
top: -15%;
left: 4%;
max-width: 70%;
}
}
.c-1c05 {
display: flex;
align-items: center;
}
@media (min-width: 769px) {
.c-1c05 {
flex-wrap: nowrap;
}
}
@media (max-width: 768px) {
.c-1c05 {
flex-wrap: wrap;
}
}
@media (min-width: 769px) {
.c-1c05 figure {
min-width: 500px !important;
}
}
@media (min-width: 769px) {
.c-1c05 .box-r {
max-width: 35%;
margin: auto;
}
}
@media (max-width: 768px) {
.c-1c05 .box-r {
padding: 0 10%;
}
}
.c-1c05 h3 {
font-family: "Noto Sans JP", sans-serif;
}
@media (max-width: 768px) {
.c-1c05 h3 {
text-align: left;
}
}
.c-1c05::before {
display: block;
content: "";
position: absolute;
top: -55px;
right: 0;
width: 800px;
height: 220px;
background: url(https://www.siteworks.site/testsite/wp-content/uploads/2022/01/type-line-business.png) 0 0 no-repeat;
background-size: 1034px 220px;
z-index: -10;
opacity: 0;
transition: all 2s;
transform: translatex(80px);
transition: all 1s;
}
@media (max-width: 768px) {
.c-1c05::before {
display: none;
}
}
.c-1c05::after {
display: block;
content: "";
position: absolute;
top: -45px;
right: -210px;
width: 1000px;
height: 213px;
background: url(https://www.siteworks.site/testsite/wp-content/uploads/2022/01/type-fill-business.png) 0 0 no-repeat;
background-size: 1000px 213px;
z-index: -10;
opacity: 1;
opacity: 0;
transition: all 2s 0.4s;
transform: translateY(80px);
transition: all 1s;
}
@media (max-width: 768px) {
.c-1c05::after {
display: none;
}
}
.c-1c05.show::after {
opacity: 1;
transform: translateY(0px);
}
.c-1c05.show::before {
opacity: 1;
transform: translateX(0px);
}
.c-1c06 {
display: flex;
align-items: center;
background: url(https://www.siteworks.site/testsite/wp-content/uploads/2022/01/recruit-bg_pc.jpg) 0 0 no-repeat;
background-size: cover;
overflow: hidden;
}
@media (min-width: 769px) {
.c-1c06 {
flex-wrap: nowrap;
}
}
@media (max-width: 768px) {
.c-1c06 {
flex-wrap: wrap;
}
}
@media (min-width: 769px) {
.c-1c06 .box-l {
margin: auto;
padding: 0 10%;
box-sizing: border-box;
}
}
@media (max-width: 768px) {
.c-1c06 .box-l {
padding: 0 10%;
}
}
.c-1c06 h3 {
font-family: "Noto Sans JP", sans-serif;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
margin: 0 auto 32px auto;
}
@media (max-width: 768px) {
.c-1c06 h3 {
text-align: left;
}
}
.c-1c06::before {
display: block;
content: "";
position: absolute;
bottom: 30px;
right: -58px;
width: 1200px;
height: 220px;
background: url(https://www.siteworks.site/testsite/wp-content/uploads/2022/01/type-line-recruit.png) 0 0 no-repeat;
background-size: 1034px 220px;
z-index: 10;
opacity: 1;
transition: all 2s;
}
@media (max-width: 768px) {
.c-1c06::before {
display: none;
}
}
.c-1c06::after {
display: block;
content: "";
position: absolute;
bottom: 31px;
right: 115px;
width: 1000px;
height: 213px;
background: url(https://www.siteworks.site/testsite/wp-content/uploads/2022/01/type-fill-recruit.png) 0 0 no-repeat;
background-size: 1000px 213px;
z-index: 10;
opacity: 1;
transition: all 2s 0.4s;
}
@media (max-width: 768px) {
.c-1c06::after {
display: none;
}
}
.c-1c07 {
overflow: hidden;
display: flex;
}
@media (min-width: 769px) {
.c-1c07 {
position: relative;
}
}
@media (min-width: 769px) {
.c-1c07 {
flex-wrap: nowrap;
height: 100vh;
}
}
@media (max-width: 768px) {
.c-1c07 {
flex-wrap: wrap;
}
}
.c-1c07 .box-l {
background-image: url(https://www.siteworks.site/testsite/wp-content/uploads/2022/01/img_cover_platform.webp);
z-index: -5;
}
@media (min-width: 769px) {
.c-1c07 .box-l {
width: 85%;
background-size: cover;
height: 100%;
position: absolute;
}
}
@media (max-width: 768px) {
.c-1c07 .box-l {
width: 100vw;
background-size: cover;
background-repeat: no-repeat;
height: 65vh;
/* padding-top: min(100vh, 75%); */
background-position: center;
}
}
.c-1c07 .box-r {
z-index: 5;
}
@media (min-width: 769px) {
.c-1c07 .box-r {
position: absolute;
top: 0;
right: 0;
width: 35%;
height: 100vh;
box-sizing: border-box;
}
}
@media (max-width: 768px) {
.c-1c07 .box-r {
width: 100%;
position: relative;
}
}
.c-1c07 .rr {
position: relative;
background-color: #00c8c8;
}
@media (min-width: 769px) {
.c-1c07 .rr {
height: calc(100% - 140px);
padding: 80px 64px 1px 64px;
box-sizing: border-box;
}
}
@media (max-width: 768px) {
.c-1c07 .rr {
padding: 24px 16px;
}
}
.c-1c07 .rr::after {
background-color: #00c8c8;
content: '';
display: block;
position: absolute;
}
@media (min-width: 769px) {
.c-1c07 .rr::after {
height: 140px;
bottom: -140px;
right: 0;
width: calc(100% - 120px);
}
}
.c-1c07 svg {
position: absolute;
}
@media (min-width: 769px) {
.c-1c07 svg {
left: -54px;
bottom: 0;
}
}
@media (max-width: 768px) {
.c-1c07 svg {
right: 0;
top: -58px;
z-index: 20;
position: absolute;
}
}
.p-topContent {
margin-top: 160px;
position: relative;
overflow: hidden;
}
@media (max-width: 768px) {
.p-topContent {
margin-top: 80px;
}
}
.p-topContent__header {
position: relative;
}
.p-topContent.-reverse .p-topContent__headerInner {
bottom: 0;
}
@media (max-width: 768px) {
.p-topContent.-reverse .p-topContent__headerInner {
bottom: auto;
top: 0;
}
}
.p-topContent__headerInner {
position: absolute;
width: 100%;
max-width: 1040px;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
z-index: 1;
}
@media (min-width: 769px) {
.p-topContent__headerInner {
min-height: 71.06598985%;
}
}
@media (max-width: 768px) {
.p-topContent__headerInner {
min-height: 100%;
}
}
.p-topContent__title {
font-family: "SilkSerif", sans-serif;
font-size: 8rem;
letter-spacing: 0.05rem;
line-height: 1;
color: #ffffff !important;
text-align: right;
margin-top: -14px;
position: absolute;
right: 0;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
z-index: 0;
}
@media (min-width: 769px) {
.p-topContent__title {
top: 50%;
}
}
@media (max-width: 768px) {
.p-topContent__title {
font-size: 4rem;
line-height: 0.8;
color: #1f1f1f;
letter-spacing: -0.017rem;
text-align: right;
}
}
.p-topContent.-reverse .p-topContent__title {
right: auto;
left: 0;
margin-top: -13px;
}
@media (max-width: 768px) {
.p-topContent.-reverse .p-topContent__title {
left: 43px;
top: 17% !important;
}
}
@media (max-width: 768px) {
.bottom {
bottom: 0%;
right: -10px;
}
}
.p-topContent__title a {
line-height: 1;
display: block;
color: #fff;
transition: opacity 0.2s;
letter-spacing: 0.08rem;
}
@media (max-width: 768px) {
.p-topContent__title a {
color: #1f1f1f;
letter-spacing: -0.02rem;
line-height: 0.66666667;
}
}
.u-color.-primary {
color: #00c8c8;
}
.p-topContent__title .c-icon.-arrow {
margin-left: 20px;
position: relative;
top: 11px;
}
@media (max-width: 768px) {
.p-topContent__title .c-icon.-arrow {
width: 32px;
height: 32px;
background: url(../../../assets/img/icon/icon_arrow_black.svg) no-repeat;
background-size: 100% auto;
margin-left: 11px;
position: relative;
top: 4px;
}
}
.c-icon.-arrow {
width: 64px;
height: 64px;
background: url(https://mint-vc.com/wp-content/themes/mint/assets/img/icon/icon_arrow.svg) no-repeat;
background-size: 100% auto;
}
.c-icon {
display: inline-block;
}
/*
.c-clip {
position: relative;
width: 100%;
height: auto;
text-align: center;}
*/
.c-clip__path {
width: 0;
height: 0;
position: absolute;
top: 0;
left: 0;
}
.c-clip__image {
width: 100%;
height: auto;
position: relative;
}
.p-topContent.-reverse .p-topContent__inner {
top: -8px;
bottom: auto;
}
.p-topContent__inner {
display: flex;
align-items: center;
max-width: 1040px;
width: 100%;
height: 28.93401015%;
margin: 0 auto;
position: absolute;
bottom: -6px;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
@media (max-width: 768px) {
.p-topContent__inner {
position: static;
-webkit-transform: none;
transform: none;
display: block;
height: auto;
width: 95%;
}
}
.p-topContent.-reverse .p-topContent__subTitle {
width: 42.30769231%;
justify-content: flex-start;
}
@media (max-width: 768px) {
.p-topContent.-reverse .p-topContent__subTitle {
width: auto;
}
}
.p-topContent__subTitle {
width: 50%;
font-size: 3.2rem;
line-height: 1.8;
letter-spacing: 0.04rem;
text-align: justify;
display: flex;
justify-content: flex-end;
}
@media (max-width: 768px) {
.p-topContent__subTitle {
display: block;
font-size: 2.4rem;
color: #1f1f1f;
letter-spacing: 0.03rem;
width: auto;
margin-top: 25px;
}
}
.p-topContent__description {
width: 50%;
font-size: 1.4rem;
letter-spacing: 0.04rem;
text-align: justify;
line-height: 2;
}
@media (max-width: 768px) {
.p-topContent__description {
width: auto;
margin-top: 16px;
}
}
.p-topContent.-reverse .p-topContent__descriptionInner {
margin-left: 0;
margin-right: auto;
}
.p-topContent__descriptionInner {
max-width: 400px;
margin-right: 0;
margin-left: auto;
}
.c-c109 .title {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
font-size: 7.2rem;
color: #fff;
letter-spacing: 0.36px;
text-align: center;
line-height: 1.11111111;
z-index: 1;
margin-top: -12px;
}
@media (min-width: 769px) {
.c-c109 .title img {
max-width: 565px;
}
}
@media (max-width: 768px) {
.c-c109 .title img {
max-width: 85vw;
}
}
.c-c109 .list {
z-index: 50;
position: relative;
}
@media (min-width: 769px) {
.c-c109 .list {
margin: -120px auto 0 auto;
}
}
@media (max-width: 768px) {
.c-c109 .list {
margin: -80px auto 0 auto;
}
}
.c-c109 .list ul {
list-style-type: none;
}
.c-c109 .list ul h3 {
font-size: 24px;
}
.c-c109 .list li {
text-align: center;
}
.c-1c110 {
position: relative;
margin-top: 200px;
}
@media (min-width: 769px) {
.c-1c110 h3 {
font-size: 60px;
}
}
@media (max-width: 768px) {
.c-1c110 h3 {
font-size: 32px;
}
}
.c-1c110 .cont {
width: 94%;
z-index: -20;
position: relative;
}
.c-1c110 .head1 {
background-color: #0B3D96;
margin-left: -4%;
top: -130px;
position: relative;
display: flex;
align-items: center;
margin-bottom: -120px;
}
@media (min-width: 769px) {
.c-1c110 .head1 {
height: 320px;
width: 80%;
}
}
@media (max-width: 768px) {
.c-1c110 .head1 {
height: 120px;
width: 95%;
}
}
.c-1c110 .head1::after {
content: "";
z-index: -10;
background-color: #c2e0ec;
position: absolute;
top: 10px;
left: 0px;
width: calc((100% + 10px));
border-radius: 10px;
}
@media (min-width: 769px) {
.c-1c110 .head1::after {
height: 320px;
}
}
@media (max-width: 768px) {
.c-1c110 .head1::after {
height: 120px;
}
}
@media (min-width: 769px) {
.c-1c110 .head1 h2 {
font-size: 5vw;
margin-left: 20vw;
margin-bottom: 0px;
}
}
@media (max-width: 768px) {
.c-1c110 .head1 h2 {
font-size: 9vw;
margin-left: 6vw;
margin-bottom: 0px;
}
}
.c-1c110 .head1 p {
position: absolute;
margin-bottom: 0px;
font-weight: bold;
line-height: 0px;
color: #ffffff;
opacity: 0.5;
}
@media (min-width: 769px) {
.c-1c110 .head1 p {
font-size: 100px;
bottom: 45px;
right: 150px;
}
}
@media (max-width: 768px) {
.c-1c110 .head1 p {
font-size: 30px;
bottom: 15px;
right: 50px;
}
}
.c-1c110 .head1 i {
position: absolute;
display: block;
background: transparent url(https://www.siteworks.site/testsite/wp-content/uploads/2022/01/ico-dog-03.png) 50% 50% no-repeat;
-moz-background-size: contain;
-o-background-size: contain;
-webkit-background-size: contain;
background-size: contain;
z-index: 30;
bottom: 0;
}
@media (min-width: 769px) {
.c-1c110 .head1 i {
width: 250px;
height: 350px;
right: 5px;
}
}
@media (max-width: 768px) {
.c-1c110 .head1 i {
width: 84px;
height: 125px;
right: -16px;
background-position: 43% 30px;
}
}
.c-c111 {
position: relative;
}
@media (min-width: 769px) {
.c-c111 {
padding: 160px 0;
}
}
@media (max-width: 768px) {
.c-c111 {
padding: 0px 0 0 0;
}
}
.c-c111 h2 {
position: absolute;
}
@media (min-width: 769px) {
.c-c111 h2 {
font-size: 100px;
top: -10%;
left: 8%;
}
}
@media (max-width: 768px) {
.c-c111 h2 {
font-size: 44px;
top: -4%;
left: 8%;
}
}
.c-c111 .subtitle {
position: absolute;
font-weight: bold;
}
@media (min-width: 769px) {
.c-c111 .subtitle {
font-size: 26px;
top: -18%;
left: 9%;
}
}
@media (max-width: 768px) {
.c-c111 .subtitle {
font-size: 16px;
top: -8%;
left: 9%;
}
}
.c-c111 .cont {
background-color: #ffffff;
}
@media (min-width: 769px) {
.c-c111 .cont {
position: absolute;
top: 30%;
right: 10%;
max-width: 600px;
padding: 40px;
}
}
@media (max-width: 768px) {
.c-c111 .cont {
padding: 40px 24px;
}
}
.c-1c12 h4 {
margin-bottom: 4px;
font-size: 22px;
}
.c-1c12 img {
margin-bottom: 16px;
}
.c-list01 {
width: 100%;
}
.c-list01 ul {
overflow: auto;
}
@media (max-width: 768px) {
.c-list01 ul {
padding-inline-start: 0px;
}
}
.c-list01 li {
list-style-type: none;
float: left;
padding: 10px;
}
@media (min-width: 769px) {
.c-list01 li {
padding: 6px 24px;
display: inline-block;
}
}
@media (max-width: 768px) {
.c-list01 li {
width: 100%;
margin-left: 0px !important;
}
}
.c-list01 li:before {
font-family: "Font Awesome 5 Free";
margin-right: 8px;
font-weight: 900;
content: "";
color: #666666;
}
.c-list02 {
border-top: 3px solid #cccccc;
border-bottom: 3px solid #cccccc;
}
.c-list02 .border-b {
border-bottom: 1px solid #cccccc;
}
@media (max-width: 768px) {
.c-list02 .list {
padding: 8px 0px;
}
}
@media (min-width: 769px) {
.c-list02 .list-l, .c-list02 .list-r {
padding: 24px;
}
}
@media (max-width: 768px) {
.c-list02 .list-l, .c-list02 .list-r {
padding: 4px 24px;
}
}
.c-list03 ul {
padding: 0px 16px !important;
}
.c-list03 li {
list-style-type: none;
display: inline-block;
}
@media (min-width: 769px) {
.c-list03 li {
padding: 8px 24px;
min-width: 45%;
}
}
@media (max-width: 768px) {
.c-list03 li {
width: 100%;
margin-left: 0px !important;
border-bottom: 1px solid;
padding-bottom: 8px;
}
}
.c-list03 li .l-box {
display: inline-block;
}
@media (max-width: 768px) {
.c-list03 li .l-box {
width: 85%;
}
}
.c-list03 li .r-box {
display: inline-block;
text-align: end;
}
.c-list04 ul {
padding-left: 0px !important;
}
.c-list04 li {
list-style-type: none;
display: inline-block;
width: 100%;
border-bottom: 1px solid #cccccc;
padding-bottom: 8px;
font-size: 15px;
}
@media (min-width: 769px) {
.c-list04 li {
font-size: 15px;
}
}
@media (max-width: 768px) {
.c-list04 li {
margin-left: 0px !important;
border-bottom: 1px solid;
padding-bottom: 8px;
}
}
.c-list04 li .l-box {
display: inline-block;
width: 80%;
}
@media (max-width: 768px) {
.c-list04 li .l-box {
width: 100%;
margin-bottom: 8px;
}
}
.c-list04 li .r-box {
display: inline-block;
font-weight: bold;
width: 20%;
}
@media (min-width: 769px) {
.c-list04 li .r-box {
text-align: end;
}
}
@media (max-width: 768px) {
.c-list04 li .r-box {
width: 100%;
}
}
.c-listico-list05 li {
list-style-type: none;
text-indent: -1.8em;
padding-left: 1.8em;
}
.c-listico-list05 li span {
font-weight: bold;
color: #0B3D96;
}
.c-listico-list05 li::before {
font-family: "Font Awesome 5 Free";
margin-right: 8px;
font-weight: 900;
color: #0B3D96;
font-size: 1.5em;
position: relative;
top: 3px;
content: "";
}
.c-list06 li {
list-style: none;
text-align: center;
position: relative;
}
.c-list06 li span {
font-weight: bold;
color: #0B3D96;
}
.c-list06 li:after {
content: '';
border-right: 15px solid transparent;
border-top: 20px solid;
border-top-color: #EC4520;
border-left: 15px solid transparent;
position: relative;
left: 50%;
transform: translatex(-50%);
display: table;
margin: 12px 0px 16px 0px;
}
.c-list06 li:last-child::after {
content: none;
}
.c-list-works ul {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
@media (min-width: 769px) {
.c-list-works ul li {
width: 49%;
}
}
@media (max-width: 768px) {
.c-list-works ul li {
width: 100%;
}
}
.c-list-works .wp-block-latest-posts__featured-image a :hover {
display: inline;
}
.c-list-works .wp-block-latest-posts__featured-image a {
display: inline;
}
.c-list-works .wp-block-latest-posts__featured-image a {
display: inline;
}
.c-2c01 {
padding: 24px;
border-radius: 10px;
margin-bottom: 24px;
}
.c-2c01 h4 {
color: #ffffff;
margin-bottom: 24px;
}
.c-2c01 p {
color: #ffffff;
}
@media (max-width: 768px) {
.c-2c01 p {
margin-bottom: 24px;
}
}
@media (max-width: 768px) {
.c-2c01 p {
margin-bottom: 8px;
}
}
.c-2c01 ul {
margin: 16px 0px;
}
.c-2c01 li {
margin-bottom: 5px;
color: #ffffff;
margin-left: 33px;
}
.c-2c01 img {
border-radius: 10px !important;
margin-bottom: 16px;
}
.c-2c01 .box {
color: #0B3D96;
background-color: #ffffff;
padding: 8px;
font-weight: bold;
border-radius: 10px;
text-align: center;
}
.c-2c02 img {
margin-bottom: 24px;
}
.c-2c02 p {
padding: 16px;
background-color: #0B3D96;
color: white;
margin: 0px auto 24px auto;
max-width: 85%;
display: flex;
justify-content: center;
border-radius: 10px;
}
.c-2c02 span {
position: relative;
top: -20px;
left: 3em;
margin-left: 0.5em !important;
margin-top: 8px;
font-size: 14px;
}
.c-2c03 .zoom a:hover img {
opacity: 1 !important;
}
.c-2c03 .zoom a:hover {
opacity: 1 !important;
}
.c-2c03 ul {
display: flex;
list-style-type: none;
justify-content: space-between;
margin-bottom: 32px;
}
@media (min-width: 769px) {
.c-2c03 ul {
flex-wrap: nowrap;
}
}
@media (max-width: 768px) {
.c-2c03 ul {
flex-wrap: wrap;
}
}
.c-2c03 li {
position: relative;
}
@media (min-width: 769px) {
.c-2c03 li {
flex-basis: 46%;
}
}
@media (max-width: 768px) {
.c-2c03 li {
flex-basis: 47%;
}
}
.c-2c03 .bdg {
position: absolute;
font-weight: bold;
}
@media (min-width: 769px) {
.c-2c03 .bdg {
top: -32px;
left: -14px;
width: 66px;
height: 66px;
text-align: center;
font-size: 1rem;
color: #fff;
border-radius: 50%;
line-height: 66px;
}
}
@media (max-width: 768px) {
.c-2c03 .bdg {
top: -16px;
left: -7px;
width: 33px;
height: 33px;
text-align: center;
font-size: 0.9rem;
color: #fff;
border-radius: 50%;
line-height: 33px;
}
}
@media (min-width: 769px) {
.c-2c03 .info {
position: relative;
margin: -35px 0 0 16%;
padding: 35px 40px 25px;
border-top: 2px solid #0cb59b;
background-color: #fff;
z-index: 100;
}
}
@media (max-width: 768px) {
.c-2c03 .info {
padding-top: 10px;
border-top: 2px solid #0cb59b;
}
}
.c-2c03 .info .title {
font-family: 'Overpass', sans-serif;
font-weight: 600;
margin-bottom: 5px;
font-size: 1rem;
letter-spacing: 0.05em;
}
@media (min-width: 769px) {
.c-2c03 .info .cont {
font-size: 0.9rem;
}
}
@media (max-width: 768px) {
.c-2c03 .info .cont {
font-size: 1rem;
line-height: 1.2em;
}
}
.c-2c03 .link {
text-align: right;
font-size: 0.7em;
}
@media (min-width: 769px) {
.c-2c03 .link a {
display: inline;
position: relative;
padding-left: 57px;
font-size: 0.9rem;
transition: all 0.2s;
}
}
@media (max-width: 768px) {
.c-2c03 .link a {
display: none;
}
}
.c-2c03 .link a::before {
content: "";
display: block;
position: absolute;
top: 50%;
left: 0;
width: 35px;
height: 7px;
margin-top: -4px;
background: url(https://www.siteworks.site/testsite/wp-content/uploads/2022/01/icon-arrow.svg) 0 0 no-repeat;
background-size: 35px 7px;
transition: all 0.4s;
}
.c-2c03 .link a:hover::before {
left: 10%;
}
.c-2c-04 .wrp-back {
position: absolute;
top: 0px;
height: 100%;
width: 85%;
right: 0px;
z-index: -10;
}
.c-2c-04 .text-back {
background-image: url(https://www.siteworks.site/handy-graphics/wp-content/uploads/2023/05/PIACERE3.png);
position: absolute;
right: 3%;
background-size: contain;
background-repeat: no-repeat;
z-index: 50;
}
@media (min-width: 769px) {
.c-2c-04 .text-back {
height: 15%;
width: 60%;
min-width: 760px;
bottom: 50px;
}
}
@media (max-width: 768px) {
.c-2c-04 .text-back {
height: 5%;
bottom: 5%;
width: 90%;
}
}
.c-2c-04 .l-back {
background: url(https://www.siteworks.site/handy-graphics/wp-content/uploads/2023/05/about-pic01@2x.jpg);
display: flex;
align-items: center;
}
@media (min-width: 769px) {
.c-2c-04 .l-back {
padding: 40px 0px;
z-index: -1;
min-width: 500px;
min-height: 600px;
width: calc(100% + 60px);
}
}
@media (max-width: 768px) {
.c-2c-04 .l-back {
z-index: 1;
position: relative;
padding: 24px 0px;
top: 3%;
width: 95%;
margin: 0 auto;
}
}
.c-2c-04 .l-back::after {
content: '';
background-color: rgba(0, 61, 255, 0.1);
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 1;
}
.c-2c-04 .l-cont {
z-index: 50;
}
@media (min-width: 769px) {
.c-2c-04 .l-cont {
width: 85%;
padding: 40px;
}
}
@media (max-width: 768px) {
.c-2c-04 .l-cont {
width: 90%;
padding: 24px;
}
}
.c-2c-05 .wrp-back {
position: absolute;
height: 50%;
width: 80%;
z-index: -1;
margin-top: -50px;
}
.c-2c-05 .cont-wrp {
column-gap: 60px;
row-gap: 0px;
}
.c-2c-05 .cont {
width: 80%;
margin-top: -80px;
position: relative;
background-color: rgba(48, 54, 74, 0.95);
}
.c-2c-05 .cont h3 {
font-size: clamp(20px, 2.5vw, 44px);
font-weight: normal;
letter-spacing: 0.3em;
line-height: 1.3em;
margin-bottom: 28px;
}
.c-2c-05 .cont .cont-btn {
width: 80%;
border: 1px #ffffff solid;
font-size: 20px;
}
.c-2c-05 .cont .cont-btn:hover {
background-color: rgba(218, 218, 218, 0.5);
transition: 0.5s;
}
.c-2c-05 .cont .cont-btn a {
display: block;
padding: 8px 0px;
color: white;
text-decoration: none;
text-align: center;
}
.c-3c01 .list {
box-shadow: 0 0 0 3px #1486aa;
padding: 24px;
background-color: #ffffff;
}
.c-3c01 .title {
color: #0B3D96;
margin-bottom: 8px;
font-weight: bold;
}
.c-3c01 .wp-block-column:not(:first-child) {
margin-left: 0px !important;
}
@media (min-width: 769px) {
.c-3c02 {
margin-bottom: 32px;
}
}
@media (max-width: 768px) {
.c-3c02 {
margin-bottom: 0px;
}
}
.c-3c02 h3 {
margin-bottom: 0px;
}
.c-3c02 .pict img {
display: block;
width: 100%;
object-fit: cover;
}
.c-3c02 .cont, .c-3c02 .mini {
display: flex;
align-items: center;
flex-flow: column;
box-sizing: border-box;
}
@media (min-width: 769px) {
.c-3c02 .cont, .c-3c02 .mini {
padding: 12px;
}
}
@media (max-width: 768px) {
.c-3c02 .cont, .c-3c02 .mini {
padding: 12px;
}
}
.c-3c02 .cont h3 {
font-size: 16px;
font-weight: bold;
}
@media (min-width: 769px) {
.c-3c02 .mini {
width: 90%;
position: relative;
top: -32px;
}
}
.c-3c03 .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column:not(:first-child) {
margin-left: 0px !important;
}
.c-3c03 .title {
margin: 0 auto 16px auto;
padding: 16px 24px;
}
@media (min-width: 769px) {
.c-3c03 .title {
width: fit-content;
}
}
@media (max-width: 768px) {
.c-3c03 .title {
width: 80%;
}
}
.c-3c03 .title p {
line-height: 1.5em;
}
@media (min-width: 769px) {
.c-3c03 .cont {
margin: 0 auto;
}
}
@media (max-width: 768px) {
.c-3c03 .list {
margin: 0 auto;
}
}
.c-3c03 .mini-btn {
margin: 0 auto;
}
.c-3c03 ul {
width: fit-content;
}
@media (min-width: 769px) {
.c-3c03 ul {
height: 130px;
}
}
.c-3c03 li {
margin-bottom: 8px;
}
.c-3c03 .btn-cont {
margin: auto auto 0 auto;
}
@media (max-width: 768px) {
.c-3c04 .column {
flex-wrap: nowrap;
}
}
@media (max-width: 768px) {
.c-3c04 .l-box {
flex-basis: 25% !important;
}
}
.c-3c04 .r-box {
padding: 24px 16px;
}
@media (max-width: 768px) {
.c-3c04 .r-box {
flex-basis: 55% !important;
}
}
.c-3c04 h4 {
text-align: left;
font-size: 18px;
margin-bottom: 8px;
}
.c-3c04 p {
font-size: 14px;
}
.c-3c05 .card-wrp .title {
justify-content: center;
padding: 16px;
}
@media (max-width: 768px) {
.c-3c05 .card-wrp .title {
flex-wrap: nowrap !important;
}
}
.c-3c05 .card-wrp .title h4 {
margin-bottom: 0px !important;
}
.c-3c05 .card-wrp .title .l-box {
flex-basis: auto !important;
flex-grow: 0 !important;
}
.c-3c05 .card-wrp .title .r-box {
flex-basis: auto !important;
flex-grow: 0 !important;
}
@media (min-width: 769px) {
.c-3c05 .card-wrp .title .r-box {
margin-left: 4px !important;
}
}
@media (max-width: 768px) {
.c-3c05 .card-wrp .title .r-box {
margin-left: 4px !important;
}
}
.c-3c05 .card-wrp .cont {
padding: 40px;
}
.c-3c06 .wrp {
margin-bottom: 24px;
}
.c-3c06 .title {
text-align: center;
font-size: 18px;
font-weight: bold;
background-color: #f2fdff;
padding: 4px 32px;
margin: 0px auto 16px auto;
}
.c-3c06 .cont {
padding: 0 24px 24px 16px;
}
.c-3c06 p {
font-size: 14px;
}
.c-ico3c-01 h3 {
font-size: 20px !important;
text-align: left;
line-height: 1.4 !important;
}
.c-ico3c-01 figure {
text-align: left;
}
.c-ico3c-01 img {
margin-bottom: 0px;
}
.c-3img-list {
display: inline-flex;
justify-content: space-between;
flex-wrap: wrap;
padding-left: 0px;
}
@media (max-width: 768px) {
.c-3img-list {
padding-left: 0;
}
}
.c-3img-list li {
list-style-type: none;
}
@media (min-width: 769px) {
.c-3img-list li {
width: 32%;
}
}
@media (max-width: 768px) {
.c-3img-list li {
width: 48%;
}
}
.c-2img-list, .c-4img-list {
display: inline-flex;
justify-content: space-between;
flex-wrap: wrap;
padding-left: 0px;
}
@media (max-width: 768px) {
.c-2img-list, .c-4img-list {
padding-left: 0;
}
}
.c-2img-list li, .c-4img-list li {
list-style-type: none;
}
.c-2img-list li h3, .c-4img-list li h3 {
margin-bottom: 0px;
}
.c-2img-list li p, .c-4img-list li p {
margin-bottom: 24px !important;
}
.c-2img-list li {
width: 48%;
}
@media (min-width: 769px) {
.c-4img-list li {
width: 23%;
}
}
@media (max-width: 768px) {
.c-4img-list li {
width: 48%;
}
}
/*------------------カード関連------------------*/
.c-card01 .cardcont {
position: absolute;
top: 0;
width: 80%;
margin: auto;
bottom: 0;
right: 0;
left: 0;
height: 80%;
background-color: rgba(0, 0, 0, 0.5);
padding: 24px;
}
.c-card01 .cardcont h3 {
margin-bottom: 12px;
}
.c-card01 .cardcont p {
margin: 0 auto;
width: fit-content;
}
.c-card01 .marks img {
position: absolute;
margin: auto auto 10% auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 13%;
}
.c-card01 :hover .cardcont .marks img {
margin: auto auto 3% auto;
transition: 1s;
}
.c-flow01 ul {
display: flex;
flex-flow: wrap;
justify-content: space-between;
padding-inline-start: 0px;
}
.c-flow01 li {
position: relative;
font-weight: bold;
font-size: 18px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
border: solid 1px;
border-color: #cccccc;
border-top: solid 2px;
border-top-color: #0B3D96;
padding: 24px;
}
@media (min-width: 769px) {
.c-flow01 li {
width: calc(300 / 960 * 100%);
}
}
@media (max-width: 768px) {
.c-flow01 li {
width: 100%;
margin-bottom: 54px;
}
}
.c-flow01 li span {
background-color: #0B3D96;
position: absolute;
top: 0;
left: 0;
padding: 8px 12px;
font-size: 16px;
line-height: 1em;
color: #ffffff;
font-weight: normal;
}
.c-flow01 .listafter::after, .c-flow01 .listaftersp::after {
content: "▶︎";
display: flex;
position: absolute;
justify-content: center;
}
@media (min-width: 769px) {
.c-flow01 .listafter::after, .c-flow01 .listaftersp::after {
width: calc(30 / 300 * 100%);
height: 100%;
align-items: center;
margin-right: calc((-30 / 300 * 100%) - 1px);
right: 0;
top: 0;
}
}
@media (max-width: 768px) {
.c-flow01 .listafter::after, .c-flow01 .listaftersp::after {
content: "▼";
right: 0;
bottom: -42px;
width: 100%;
font-size: 30px;
}
}
@media (min-width: 769px) {
.listaftersp::after {
display: none !important;
}
}
@media (max-width: 768px) {
.c-blog li {
display: flex;
flex-wrap: nowrap;
}
}
@media (max-width: 768px) {
.c-blog li time {
margin-left: 12px;
}
}
/*----- Q&A -----*/
.blk-qa {
display: flex;
margin: 16px 0 0 0;
}
.blk-qa > div {
display: table-cell;
}
.blk-qa > div img {
width: 100px;
}
.blk-qa p {
margin-bottom: 1em;
}
.blk-qa p:last-child {
margin-bottom: 0;
}
.blk-qa > div:first-child {
z-index: 2;
}
.blk-qa > div:nth-child(2) {
display: inline-block;
position: relative;
padding: 32px;
width: 735px;
border-radius: 20px;
}
.blk-qa > div:nth-child(2)::after {
content: '';
position: absolute;
display: block;
width: 0;
height: 0;
top: 25px;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
}
@media screen and (max-width: 600px) {
.blk-qa {
position: relative;
display: block;
width: 100%;
margin: 2px 0 0 0;
}
blk-qa .body_img.is_mi .blk-qa > div:first-child {
width: 50px;
}
.blk-qa > div:nth-child(2) {
margin: 20px 0 0 0;
padding: 24px;
}
.blk-qa > div:nth-child(2)::after {
display: none;
}
}
/* Q&A - クエスチョン*/
.blk-q > div:first-child {
width: 100px;
padding-right: 20px;
}
.blk-q > div:nth-child(2) {
background: #dbf7ff;
}
.blk-q > div:nth-child(2)::after {
left: -10px;
border-right: 20px solid #dbf7ff;
}
@media screen and (max-width: 600px) {
.blk-q > div:first-child {
position: absolute;
left: -5px;
width: 50px;
padding: 0;
}
.blk-q > div:nth-child(2) {
width: calc(100% - 42px);
left: 20px;
}
}
/* Q&A - アンサー*/
.blk-a > div:first-child {
width: 100px;
padding-left: 20px;
}
.blk-a > div:first-child p {
position: relative;
}
.blk-a > div:first-child p span {
position: absolute;
display: block;
top: 100%;
width: 100%;
padding: 4px 2px;
background-color: #fff;
color: #000;
text-align: center;
line-height: 1.2;
letter-spacing: -0.02em;
}
@media (min-width: 769px) {
.blk-a > div:first-child p span {
font-size: 80%;
}
}
@media (max-width: 768px) {
.blk-a > div:first-child p span {
font-size: 10px;
}
}
.blk-a {
flex-direction: row-reverse;
}
.blk-a > div:nth-child(2) {
background: #fff2e0;
}
.blk-a > div:nth-child(2)::after {
right: -10px;
border-left: 20px solid #fff2e0;
}
@media screen and (max-width: 600px) {
.blk-a > div:first-child {
position: absolute;
right: -5px;
width: 50px;
padding: 0;
}
.blk-a > div:first-child p span {
padding-right: 0;
padding-left: 0;
font-size: 9px;
}
.blk-a > div:nth-child(2) {
width: calc(100% - 42px);
right: -20px;
}
}
.blk-q > div:first-child p span {
display: block;
top: 100%;
width: 100%;
padding: 4px 2px;
background-color: #fff;
color: #000;
text-align: center;
line-height: 1.2;
letter-spacing: -0.02em;
}
@media (min-width: 769px) {
.blk-q > div:first-child p span {
font-size: 80%;
}
}
@media (max-width: 768px) {
.blk-q > div:first-child p span {
font-size: 10px !important;
}
}
/*----------パーツ----------*/
/*----------強調系----------*/
.cp-emph01 {
font-weight: bold;
background-color: #0B3D96;
color: #ffffff;
padding: 16px;
border-radius: 0px;
font-size: 22px;
max-width: 750px;
position: relative;
margin: 40px auto 0px auto;
line-height: 1.8em;
text-align: center;
}
.cp-emph01::before {
content: "";
position: absolute;
display: block;
top: 4px;
bottom: 4px;
left: 4px;
right: 4px;
border: 1px solid white;
border-radius: 0px;
}
.cp-emph02 {
font-weight: bold;
max-width: 1110px;
position: relative;
}
.cp-emph02 p {
font-weight: bold;
color: #ffffff;
font-weight: bolder;
text-align: center;
line-height: 1.4em;
}
@media (min-width: 769px) {
.cp-emph02 p {
font-size: clamp(32px, 4vw, 48px);
}
}
@media (max-width: 768px) {
.cp-emph02 p {
line-height: 1.3em;
font-size: 21px;
}
}
/*----------ボタン----------*/
.cp-btn-r01 {
background-color: #609ed1;
filter: drop-shadow(2px 2px 2px rgba(30, 30, 30, 0.3));
border-radius: 50px;
max-width: 150px;
text-align: center;
margin: 0 auto;
font-size: 18px;
font-size: 18px;
}
.cp-btn-r01 a {
color: #ffffff !important;
display: block;
padding: 8px 20px;
}
.cp-btn-sr01 {
margin: 0 auto;
font-weight: bold;
filter: drop-shadow(4px 4px 0px #2a586e);
max-width: 350px;
border-radius: 5px;
}
@media (max-width: 768px) {
.cp-btn-sr01 {
font-size: 16px;
}
}
.cp-btn-sr01:hover {
opacity: 0.8;
transition: 0.5s;
}
.cp-btn-sr01 a {
color: #ffffff;
display: block;
text-decoration: none;
}
@media (min-width: 769px) {
.cp-btn-sr01 a {
padding: 16px;
}
}
@media (max-width: 768px) {
.cp-btn-sr01 a {
padding: 16px 0px;
}
}
.cp-btn-sr02 {
font-weight: bold;
/* filter: drop-shadow(4px 4px 0px #2a586e); */
border-radius: 5px;
text-align: center;
}
@media (min-width: 769px) {
.cp-btn-sr02 {
max-width: 250px;
}
}
@media (max-width: 768px) {
.cp-btn-sr02 {
max-width: 200px;
margin: 0 auto;
}
}
.cp-btn-sr02:hover {
opacity: 0.8;
transition: 0.5s;
}
.cp-btn-sr02 a {
color: #ffffff;
display: block;
text-decoration: none;
}
@media (min-width: 769px) {
.cp-btn-sr02 a {
padding: 16px 0px;
}
}
@media (max-width: 768px) {
.cp-btn-sr02 a {
padding: 12px 8px;
}
}
.cp-btn-sq01 {
background: linear-gradient(to right, #1749C8 0%, #6ECCE7 100%);
border-radius: 20em;
text-align: center;
}
@media (min-width: 769px) {
.cp-btn-sq01 {
margin-bottom: 80px !important;
max-width: 350px;
}
}
@media (max-width: 768px) {
.cp-btn-sq01 {
max-width: 280px;
width: 280px;
margin: 0 auto 32px auto;
}
}
.cp-btn-sq01:hover {
opacity: 0.8;
transition: 0.5s;
}
.cp-btn-sq01 a {
color: #ffffff;
letter-spacing: 1px;
display: block;
text-decoration: none;
}
@media (min-width: 769px) {
.cp-btn-sq01 a {
padding: 16px 0px;
}
}
@media (max-width: 768px) {
.cp-btn-sq01 a {
padding: 12px 8px;
}
}
.cp-btn-sq01-frame {
text-align: center;
background-color: #444444;
}
@media (min-width: 769px) {
.cp-btn-sq01-frame {
margin-bottom: 40px !important;
max-width: 280px;
padding: 0 20px;
}
}
@media (max-width: 768px) {
.cp-btn-sq01-frame {
margin-bottom: 40px !important;
max-width: 280px;
width: 280px;
margin: 0 auto;
}
}
.cp-btn-sq01-frame:hover {
opacity: 0.8;
transition: 0.5s;
}
.cp-btn-sq01-frame a {
letter-spacing: 1px;
display: block;
text-decoration: none;
}
@media (min-width: 769px) {
.cp-btn-sq01-frame a {
padding: 16px 0px;
}
}
@media (max-width: 768px) {
.cp-btn-sq01-frame a {
padding: 12px 8px;
}
}
.cp-btn-sq02 {
filter: drop-shadow(0px 1px 2px #8bbad0);
text-align: center;
}
@media (min-width: 769px) {
.cp-btn-sq02 {
max-width: 400px;
}
}
@media (max-width: 768px) {
.cp-btn-sq02 {
max-width: 350px;
margin: 0 auto;
}
}
.cp-btn-sq02:hover {
opacity: 0.8;
transition: 0.5s;
}
.cp-btn-sq02 a {
color: #ffffff;
letter-spacing: 1px;
display: block;
text-decoration: none;
}
@media (min-width: 769px) {
.cp-btn-sq02 a {
padding: 24px 0px;
}
}
@media (max-width: 768px) {
.cp-btn-sq02 a {
padding: 18px 8px;
}
}
.cp-btn-sq03 {
filter: drop-shadow(0px 1px 2px #8bbad0);
text-align: center;
}
.cp-btn-sq03:hover {
opacity: 0.8;
transition: 0.5s;
}
.cp-btn-sq03 a {
color: #ffffff;
font-size: 14px;
letter-spacing: 1px;
display: block;
text-decoration: none;
}
@media (min-width: 769px) {
.cp-btn-sq03 a {
padding: 16px 24px;
}
}
@media (max-width: 768px) {
.cp-btn-sq03 a {
padding: 8px 24px;
}
}
.cp-btn-home {
background-color: #0B3D96;
text-align: center;
max-width: 150px;
margin: 0 auto;
border-radius: 5px;
color: #ffffff;
filter: drop-shadow(1px 1px 2px #cfe9f7);
}
.cp-btn-home a {
color: #ffffff;
display: block;
box-sizing: border-box;
}
@media (min-width: 769px) {
.cp-btn-home a {
padding: 4px 0;
}
}
@media (max-width: 768px) {
.cp-btn-home a {
padding: 12px 0;
}
}
.cp-btn-home a::after {
font-family: "Font Awesome 5 Free";
margin-left: 8px;
font-weight: 900;
content: "";
}
.cp-btn-link1 {
position: relative;
margin-bottom: 24px;
}
.cp-btn-link1 a {
border: 1px solid #cccccc;
color: #444444;
display: block;
}
@media (min-width: 769px) {
.cp-btn-link1 a {
padding: 24px;
}
}
@media (max-width: 768px) {
.cp-btn-link1 a {
padding: 24px 14px;
text-align: center;
}
}
.cp-btn-link1 a:before {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
height: 40px;
width: 40px;
margin-right: 12px;
display: inline-block;
margin-bottom: -15px;
}
@media (max-width: 768px) {
.cp-btn-link1 a:before {
margin: 0 auto;
display: block;
}
}
.cp-btn-link1 a:after {
content: "";
background: url(https://www.siteworks.site/ssworks/wp-content/uploads/2022/08/arrow_02.svg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
height: 10px;
width: 30px;
display: inline-block;
position: absolute;
right: 30px;
top: 50%;
transform: translatey(-50%);
}
@media (max-width: 768px) {
.cp-btn-link1 a:after {
display: none;
}
}
#link-ico01 a:before {
content: "";
background: url(https://www.siteworks.site/ssworks/wp-content/uploads/2022/11/sol-icon1.png);
}
@media (max-width: 768px) {
#link-ico01 a:before {
margin-bottom: 8px;
}
}
#link-ico02 a:before {
content: "";
background: url(https://www.siteworks.site/ssworks/wp-content/uploads/2022/11/sol-icon2.png);
}
@media (max-width: 768px) {
#link-ico02 a:before {
margin-bottom: 8px;
}
}
/*----------バッジ----------*/
.cp-bdg-01 {
display: flex;
justify-content: center;
align-items: center;
height: 60px;
width: 60px;
border-radius: 50%;
position: relative;
}
.cp-bdg-01::before {
content: "";
position: absolute;
display: block;
top: 3px;
bottom: 3px;
left: 3px;
right: 3px;
border: 1px solid white;
border-radius: 50px;
}
.cp-bdg-01-txt {
line-height: 1em;
font-size: 16px;
}
.cp-bdg-01-num {
font-size: 22px;
font-weight: bold;
line-height: 1em;
}
.cp-bdg-square01 {
padding: 2px 20px;
width: 250px;
color: #ffffff;
font-size: 14px;
text-align: center;
z-index: 100;
}
@media (min-width: 769px) {
.cp-bdg-square01 {
position: absolute;
top: 0px;
left: 0px;
}
}
@media (max-width: 768px) {
.cp-bdg-square01 {
width: 100%;
padding: 2px 4px;
margin-bottom: 0px;
}
}
.cp-bdg-sqcent01 {
width: 140px;
height: 140px;
padding: 16px;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
color: #ffffff;
font-size: 22px;
display: flex;
justify-content: center;
align-items: center;
outline: 1px solid #ffffff;
outline-offset: -5px;
}
.cp-bdg-sqcent01:hover {
background-color: #cccccc;
transition: 1s;
}
.cp-bdg-sqcent01 a {
line-height: 140px;
text-align: center;
display: block;
color: #ffffff;
font-size: 22px;
}
.cp-bdg-sqcent01 p {
line-height: 140px;
text-align: center;
display: block;
color: #ffffff;
font-size: 22px;
}
.cp-bdg-comment01 {
padding: 8px 20px;
color: #666666;
font-size: 20px;
text-align: center;
position: absolute;
bottom: 0px;
left: 0px;
background-color: #ffffff;
opacity: 0.8;
width: 100%;
font-size: 22px;
}
@media (max-width: 768px) {
.cp-bdg-comment01 {
position: relative;
background-color: #efefef;
opacity: 1;
}
}
.cp-bdgmini-sq01 {
width: fit-content;
padding: 4px 12px;
font-size: 14px;
border-radius: 4px;
}
.u-bdg-notice01 {
position: relative;
}
.u-bdg-notice01::before {
content: "";
display: block;
width: 100%;
height: 2px;
background-color: #222;
position: absolute;
top: 0px;
left: 0;
z-index: -10;
}
.u-bdg-notice01 .back {
background-color: #ffffff;
width: 170px;
height: 2px;
margin: 0 auto;
}
.u-bdg-notice01 p {
background-color: #0B3D96;
padding: 2px 24px;
border-radius: 50px;
/* max-width: 150px; */
text-align: center;
position: absolute;
width: 150px;
left: 50%;
transform: translate(-50%, -50%);
}
.u-bdg-notice01 li::before {
font-family: "Font Awesome 5 Free";
margin-right: 8px;
font-weight: 900;
content: "";
color: #666;
}
/*----------図表----------*/
.cp-chart01 .title {
padding: 16px;
margin-bottom: 4px;
display: flex;
align-items: center;
flex-flow: wrap;
}
@media (max-width: 768px) {
.cp-chart01 .title {
justify-content: center;
}
}
.cp-chart01 .cont {
padding: 16px;
margin-left: 4px;
margin-bottom: 4px !important;
}
/*----------カード----------*/
.cp-card01 .card-cont {
border-radius: 10px;
background-color: #ffffff;
}
@media (max-width: 768px) {
.cp-card01 .card-cont {
margin-bottom: 24px;
}
}
.cp-card01 h4 {
margin-bottom: 0px;
}
.cp-card01 .wp-block-column {
flex-basis: auto !important;
flex-grow: 0;
}
@media (max-width: 768px) {
.cp-card01 .wp-block-column {
flex-grow: 0 !important;
}
}
.cp-card01 .title-base {
padding: 16px;
border-radius: 10px 10px 0 0;
flex-flow: wrap;
}
.cp-card01 .title {
align-items: center;
display: flex;
justify-content: center;
}
.cp-btn-r03 {
position: absolute;
width: 170px;
height: 170px;
margin: 0 -10px -10px 0;
background-color: #fff;
border-radius: 50%;
text-align: center;
z-index: 100;
transition: all 0.8s;
}
.cp-btn-r03:hover {
opacity: 1;
}
.cp-btn-r03 span {
display: block;
}
.cp-btn-r03::after {
content: "";
/* display: block; */
position: absolute;
top: 5px;
left: 5px;
width: 160px;
height: 160px;
background: url(../img/recruit-btn-frame.svg) 0 0 no-repeat;
background-size: 160px 160px;
transition: all 0.4s;
}
.cp-btn-r03:hover::after {
transform: rotate(180deg);
}
.cp-btn-r03-title {
position: relative;
margin-top: 38px;
}
.cp-btn-r03-title .eng {
color: #0B3D96;
font-size: 14px;
}
.cp-btn-r03-title .jpn {
font-size: 18px;
}
.cp-btn-r03-title::after {
content: "";
display: block;
position: absolute;
bottom: -25px;
left: 50%;
width: 15px;
height: 19px;
/* margin-left: -5px; */
background: url(../img/recruit-btn-arrow.svg) 0 0 no-repeat;
background-size: 15px 19px;
transition: all 0.4s;
margin-left: -5%;
}
.cp-btn-r03:hover .cp-btn-r03-title::after {
margin-left: 0;
}
/*-----見出し-------*/
.cp-h-pic {
text-align: center;
}
.cp-h-pic:before {
content: "";
display: inline-block;
width: 1.1em;
height: 1.1em;
background: url(../img/h2@2x.png) no-repeat;
background-size: contain;
}
/*------------------------------*/
.cp-under-dot {
border-bottom: dotted 5px;
border-bottom-color: #0B3D96;
display: table;
}
/*------------------------------*/
.cp-h-dotted {
background: #dfefff;
box-shadow: 0px 0px 0px 5px #dfefff;
border: dashed 2px white;
padding: 0.3em 0.5em;
}
/*------------------------------*/
.cp-h-square1 {
position: relative;
padding: 10px 5px 10px 42px;
background: #0B3D96;
font-size: 20px;
color: #ffffff;
margin-left: -33px;
line-height: 1.3;
z-index: 14;
}
.cp-h-square1:before {
position: absolute;
content: '';
left: -2px;
top: -2px;
border: none;
border-left: solid 40px white;
border-bottom: solid 79px transparent;
z-index: -2;
}
/*------------------------------*/
.cp-h-smallunder {
position: relative;
margin-bottom: 1.5em;
}
.cp-h-smallunder:before {
content: '';
position: absolute;
bottom: -15px;
display: inline-block;
width: 60px;
height: 5px;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
background-color: black;
border-radius: 2px;
}
/*------------------------------*/
.cp-h-circle {
color: #505050;
/*文字色*/
padding: 0.5em;
/*文字周りの余白*/
display: inline-block;
/*おまじない*/
line-height: 1.3;
/*行高*/
background: #dbebf8;
/*背景色*/
vertical-align: middle;
border-radius: 25px 0px 0px 25px;
/*左側の角を丸く*/
}
.cp-h-circle:before {
content: '●';
color: white;
margin-right: 8px;
}
/*------------------------------*/
.cp-h-curve {
position: relative;
color: #158b2b;
font-size: 32px;
padding: 17px 0;
text-align: center;
margin: 1.5em 0;
}
.cp-h-curve:before {
content: "";
position: absolute;
top: -8px;
left: 50%;
width: 150px;
height: 75px;
border-radius: 50%;
border: 5px solid #a6ddb0;
border-left-color: transparent;
border-right-color: transparent;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
/*------------------------------*/
.cp-h-kagikakko {
position: relative;
line-height: 1.4;
padding: 0.25em 1em;
display: inline-block;
}
.cp-h-kagikakko:before, .cp-h-kagikakko:after {
content: '';
width: 20px;
height: 30px;
position: absolute;
display: inline-block;
}
.cp-h-kagikakko:before {
border-left: solid 1px #ff5722;
border-top: solid 1px #ff5722;
top: 0;
left: 0;
}
.cp-h-kagikakko:after {
border-right: solid 1px #ff5722;
border-bottom: solid 1px #ff5722;
bottom: 0;
right: 0;
}
.cp-h-square01 {
display: table;
border-left: 16px solid;
margin-right: 12px;
border-left-color: #0B3D96;
padding: 0px 0px 0px 8px;
margin: 0;
margin-bottom: 16px;
}
@media (max-width: 768px) {
.cp-h-square01 {
border-left: 8px solid;
border-left-color: #0B3D96;
}
}
.cp-h-3dots::after {
display: block;
transform: scale(0.2);
margin-top: -10px;
content: url(https://www.siteworks.site/testsite/wp-content/uploads/2022/02/dots-1.png);
position: relative;
width: auto;
}
.cp-hr-botted {
border-width: 0 0 8px;
border-style: solid;
border-image: url('data:image/svg+xml,') 0 0 100% repeat;
width: 216px;
margin: 0 auto;
}
.cp-hr-dot {
border: none;
border-top: dotted 5px #f08437;
}
.cp-hr-black {
height: 2px;
background-color: #333333;
border: none;
}
.cp-hr-dot-gray {
border: none;
border-top: dotted 5px #cccccc;
}
/*-------カギカッコ-------*/
.cp-brc-in01 .top, .cp-brc-in01 .left, .cp-brc-in01 .bottom, .cp-brc-in01 .right {
position: absolute;
z-index: 50;
}
.cp-brc-in01 .top {
width: 100px;
height: 4px;
top: 30px;
left: 30px;
}
@media (max-width: 768px) {
.cp-brc-in01 .top {
width: 30px;
height: 2px;
top: 4px;
left: 5px;
}
}
.cp-brc-in01 .left {
width: 4px;
height: 100px;
top: 30px;
left: 30px;
}
@media (max-width: 768px) {
.cp-brc-in01 .left {
width: 2px;
height: 30px;
top: 5px;
left: 5px;
}
}
.cp-brc-in01 .bottom {
width: 100px;
height: 4px;
bottom: 30px;
right: 30px;
}
@media (max-width: 768px) {
.cp-brc-in01 .bottom {
width: 30px;
height: 2px;
bottom: 5px;
right: 5px;
}
}
.cp-brc-in01 .right {
width: 4px;
height: 100px;
bottom: 30px;
right: 30px;
}
@media (max-width: 768px) {
.cp-brc-in01 .right {
width: 2px;
height: 30px;
bottom: 5px;
right: 5px;
}
}
.cp-brc-in02 .top, .cp-brc-in02 .left, .cp-brc-in02 .bottom, .cp-brc-in02 .right {
position: absolute;
z-index: 50;
}
.cp-brc-in02 .top {
width: 50px;
height: 10px;
top: 5px;
left: 5px;
}
@media (max-width: 768px) {
.cp-brc-in02 .top {
width: 30px;
height: 6px;
}
}
.cp-brc-in02 .left {
width: 10px;
height: 50px;
top: 5px;
left: 5px;
}
@media (max-width: 768px) {
.cp-brc-in02 .left {
width: 6px;
height: 30px;
}
}
.cp-brc-in02 .bottom {
width: 50px;
height: 10px;
bottom: 5px;
right: 5px;
}
@media (max-width: 768px) {
.cp-brc-in02 .bottom {
width: 30px;
height: 6px;
}
}
.cp-brc-in02 .right {
width: 10px;
height: 50px;
bottom: 5px;
right: 5px;
}
@media (max-width: 768px) {
.cp-brc-in02 .right {
width: 6px;
height: 30px;
}
}
.cp-brc-in03 .top, .cp-brc-in03 .left {
position: absolute;
z-index: 50;
}
.cp-brc-in03 .top {
width: 50%;
height: 50px;
top: 0px;
left: 0px;
}
@media (max-width: 768px) {
.cp-brc-in03 .top {
width: 50%;
height: 20px;
}
}
.cp-brc-in03 .left {
width: 50px;
height: 500px;
top: 50px;
left: 9px;
}
@media (max-width: 768px) {
.cp-brc-in03 .left {
width: 20px;
height: 150px;
top: 20px;
left: 0px;
}
}
.cp-brc-out01 .top, .cp-brc-out01 .left, .cp-brc-out01 .bottom, .cp-brc-out01 .right {
position: absolute;
z-index: 50;
}
.cp-brc-out01 .top {
width: 100px;
height: 15px;
top: -40px;
left: -40px;
}
@media (max-width: 768px) {
.cp-brc-out01 .top {
width: 40px;
height: 6px;
top: -30px;
left: 0px;
}
}
.cp-brc-out01 .left {
width: 15px;
height: 100px;
top: -40px;
left: -40px;
}
@media (max-width: 768px) {
.cp-brc-out01 .left {
width: 6px;
height: 20px;
top: -30px;
left: 0px;
}
}
.cp-brc-out01 .bottom {
width: 100px;
height: 15px;
bottom: -40px;
right: -40px;
}
@media (max-width: 768px) {
.cp-brc-out01 .bottom {
width: 40px;
height: 6px;
bottom: -10px;
right: 0px;
}
}
.cp-brc-out01 .right {
width: 15px;
height: 100px;
bottom: -40px;
right: -40px;
}
@media (max-width: 768px) {
.cp-brc-out01 .right {
width: 6px;
height: 20px;
bottom: -10px;
right: 0px;
}
}
.cp-scroll-yoko1 {
display: flex;
overflow: hidden;
}
@keyframes infinity-scroll-left {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}
@media (min-width: 769px) {
.cp-scroll-yoko1 {
margin-top: -150px;
}
}
@media (max-width: 768px) {
.cp-scroll-yoko1 {
margin-top: -100px;
}
}
.cp-scroll-yoko1 .cont {
display: flex;
list-style: none;
}
.cp-scroll-yoko1 .list {
animation: infinity-scroll-left 15s infinite linear 0.5s both;
}
.cp-scroll-yoko1 .font {
font-weight: bold;
white-space: pre;
color: #ffffff;
filter: drop-shadow(0px 0px 1px black);
line-height: 0.6em;
font-style: italic;
}
@media (min-width: 769px) {
.cp-scroll-yoko1 .font {
font-size: 12.5vw;
}
}
@media (max-width: 768px) {
.cp-scroll-yoko1 .font {
font-size: 20.5vw;
}
}
/*----------Utilityscss---------*/
.u-display-none {
display: none !important;
}
.u-display-inline {
display: inline !important;
}
.u-display-block {
display: block !important;
}
@media (min-width: 769px) {
.u-pc-none {
display: none !important;
}
}
@media (max-width: 768px) {
.u-sp-none {
display: none !important;
}
}
@media (max-width: 768px) {
.u-sp-clm100 .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column:not(:only-child) {
flex-basis: 100% !important;
}
}
@media (max-width: 768px) {
.u-sp-clm100 .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column:nth-child(2n) {
margin-left: 0px !important;
}
}
/*【背景色】*/
.bg-main-c {
background-color: #0B3D96;
}
.bg-sub-c1 {
background-color: #f2fdff;
}
.bg-sub-c2 {
background-color: #c2e0ec;
}
.bg-sub-c3 {
background-color: #ddf1f9;
}
.bg-sub-c4 {
background-color: #ea6100;
}
.bg-accent-c1 {
background-color: #ed8207;
}
.bg-accent-c2 {
background-color: #ead800;
}
.bg-trueblack {
background-color: #000000;
}
.bg-white {
background-color: #ffffff !important;
}
.back-white {
background: #ffffff !important;
}
.bg-gray {
background-color: #cccccc;
}
.bg-lightgray {
background-color: #f8f8f8;
}
.bg-lightgray2 {
background-color: #efefef;
}
.bg-black {
background-color: #444444;
}
.bg-navy {
background-color: #003e92;
}
/*グラデーション*/
.bg-grad-c1 {
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#1486aa+0,136ba5+100 */
background: #609ed1;
/* Old browsers */
background: -moz-linear-gradient(left, #1749C8 0%, #6ECCE7 100%);
/* FF3.6-15 */
background: -webkit-linear-gradient(left, #1749C8 0%, #6ECCE7 100%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #1749C8 0%, #6ECCE7 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#609ed1', endColorstr='#18b4e6',GradientType=1);
/* IE6-9 */
}
* .bg_dot01 {
background-color: #fff;
background-image: radial-gradient(#c1c1c1 20%, transparent 50%);
background-size: 3px 3px;
}
.rgba09-white {
background-color: rgba(255, 255, 255, 0.9);
}
.opcity8 {
opacity: 0.8;
}
/*【テキスト色】*/
.txt-main-c {
color: #0B3D96;
}
.txt-sub-c4 {
color: #ea6100;
}
.txt-white {
color: #ffffff !important;
}
.txt-red {
color: #e60012;
}
.txt-gray {
color: #cccccc;
}
.txt-a-main-c a {
color: #0B3D96;
}
.txt-link-white a {
color: #ffffff;
}
.txt-a-white a {
color: #ffffff;
}
/*【罫線色】*/
.frame-mein-c-solid {
border: 2px solid;
border-color: #0B3D96;
}
.frame-main-c {
border: 2px solid;
border-color: #0B3D96;
}
.frame-main-c-dash {
border: 2px dashed;
border-color: #0B3D96;
}
@media (min-width: 769px) {
.frame-main-c-dash {
padding: 40px;
}
}
@media (max-width: 768px) {
.frame-main-c-dash {
padding: 24px 16px;
}
}
.frame-sub-c2 {
border: solid 8px;
border-color: #c2e0ec;
}
.frame-gray-c {
border: 1px solid;
border-color: #cccccc;
}
@media (min-width: 769px) {
.frame-r-lightgray-c {
border-right: 1px solid #cccccc;
}
}
@media (max-width: 768px) {
.frame-r-lightgray-c {
border-bottom: 1px solid #cccccc;
}
}
.frame-lightgray-c {
border: 1px solid;
border-color: #f8f8f8;
}
.frame-black {
border: solid 2px;
border-color: #212529;
}
.frame-white {
border: solid 3px;
border-color: #ffffff;
}
.border-white {
border: solid 3px #ffffff;
}
.u-color-change01 {
filter: invert(72%) sepia(26%) saturate(6428%) hue-rotate(170deg) brightness(105%) contrast(102%);
}
.u-txt-cent {
text-align: center !important;
}
@media (min-width: 769px) {
.u-txt-pccent {
text-align: center !important;
}
}
@media (max-width: 768px) {
.u-txt-spcent {
text-align: center !important;
}
}
.u-txt-light {
text-align: right;
}
.u-txt-right {
text-align: right;
}
.u-txt-left {
text-align: left;
}
.u-img-w60 {
width: 60%;
}
.u-img-w100 img {
width: 100%;
}
.u-font-s {
font-size: 14px !important;
}
@media (max-width: 768px) {
.u-font-sm {
font-size: 18px !important;
}
}
.u-font-ssm {
font-size: 18px !important;
}
@media (min-width: 769px) {
.u-font-m {
font-size: 24px !important;
}
}
@media (max-width: 768px) {
.u-font-m {
font-size: 20px;
}
}
@media (min-width: 769px) {
.u-font-sl {
font-size: 34px !important;
}
}
@media (max-width: 768px) {
.u-font-sl {
font-size: 22px !important;
}
}
@media (min-width: 769px) {
.u-font-l {
font-size: 40px !important;
}
}
@media (max-width: 768px) {
.u-font-l {
font-size: 20px !important;
}
}
@media (min-width: 769px) {
.u-font-el {
font-size: 66px;
}
}
@media (max-width: 768px) {
.u-font-el {
font-size: 40px;
}
}
@media (min-width: 769px) {
.u-font-xxl {
font-size: 100px;
}
}
@media (max-width: 768px) {
.u-font-xxl {
font-size: 40px;
}
}
.u-font-explan li {
font-size: 14px;
line-height: 1.2em;
}
.u-line-h1em {
line-height: 1em;
}
.u-line-h15em {
line-height: 1.5em;
}
.u-line-h2em {
line-height: 2em;
}
.u-line-h25em {
line-height: 2.5em;
}
.font-space02em {
letter-spacing: 0.2em;
}
.u-fcfont-m figcaption {
font-size: 24px;
line-height: 1.5;
}
.u-fc-box figcaption {
font-size: 20px;
line-height: 1.5;
background-color: #ffffff;
padding: 4px;
border-bottom: #1486aa solid 2px;
margin: -20px auto 0 auto;
position: relative;
width: 70%;
}
.u-supplement {
margin-left: 0.5em;
margin-top: 8px;
font-size: 14px;
line-height: 1.7em;
}
.u-font-explan li {
font-size: 14px;
line-height: 1.2em;
}
.u-bold {
font-weight: bold !important;
}
@media (min-width: 769px) {
.u-spbr br {
display: none;
}
}
@media (max-width: 768px) {
.u-pcbr br {
display: none;
}
}
.u-a-none a {
text-decoration: none;
}
.u-pos-relative {
position: relative;
}
@media (min-width: 769px) {
.u-ovf-hid {
overflow: hidden !important;
}
}
@media (min-width: 769px) {
.u-height01 {
height: 350px;
}
}
@media (min-width: 769px) {
.u-height01 img {
height: 350px;
}
}
/*---------------レイアウト位置調整---------------*/
.u-boxs-b {
box-sizing: border-box;
}
.u-flxrow-r {
flex-direction: row-reverse;
}
@media (min-width: 769px) {
.f-flxcol-r {
display: flex;
flex-flow: column;
flex-direction: column-reverse;
}
}
.u-just-cent {
justify-content: center;
}
.u-just-spbit {
justify-content: space-between;
}
.u-just-spard {
justify-content: space-around;
}
.u-align-start {
align-items: start !important;
}
.u-align-cent-clm .wp-block-columns {
align-items: center !important;
}
.u-centre {
display: flex;
align-items: center;
justify-content: center;
}
@media (max-width: 768px) {
.u-centre-sp {
display: flex;
align-items: center;
justify-content: center;
}
}
.u-centre100 {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.u-align-cent {
display: flex;
align-items: center;
flex-flow: wrap;
}
.u-z-ind-1000 {
z-index: 1000;
}
.u-z-ind-u1 {
z-index: -1;
}
.u-auto-pcglow0 {
flex-basis: auto !important;
}
@media (min-width: 769px) {
.u-auto-pcglow0 {
flex-grow: 0 !important;
}
}
.u-auto-pcglow1 {
flex-basis: auto !important;
}
@media (min-width: 769px) {
.u-auto-pcglow1 {
flex-grow: 1 !important;
}
}
@media (min-width: 769px) {
.u-pcauto-pcglow1 {
flex-basis: auto !important;
flex-grow: 1 !important;
}
}
@media (max-width: 768px) {
.u-pcauto-pcglow1 {
flex-basis: 100% !important;
}
}
/*コンテンツ位置調整 ミロクの対談の白バック部分で使った*/
.mein-pic-centre {
text-align: center;
}
@media (min-width: 769px) {
.mein-pic-centre {
padding-top: 20%;
}
}
@media (max-width: 768px) {
.mein-pic-centre {
padding-top: 45%;
}
}
@media (max-width: 768px) {
.text-back-white {
background-color: #ffffff;
padding: 5px;
width: 90%;
}
}
/*-----------罫線----------*/
@media (min-width: 769px) {
.u-border-pcl-none {
border-left: none;
}
}
@media (max-width: 768px) {
.u-border-spt-none {
border-top: none;
}
}
.u-border-t-none {
border-top: none;
}
@media (min-width: 769px) {
.u-border01::after, .u-border02::after {
content: "";
display: block;
position: relative;
bottom: 0px;
left: 50%;
width: 40px;
height: 2px;
margin-left: -20px;
}
}
@media (max-width: 768px) {
.u-border01::after, .u-border02::after {
content: "";
display: block;
position: relative;
bottom: 0;
left: 50%;
width: 40px;
height: 2px;
margin: 10px -20px;
}
}
.u-border01::after {
background-color: #444444;
}
.u-border02::after {
background-color: #ffffff;
}
/*------------文章揃え、装飾---------------*/
.u-m0auto {
margin: 0 auto;
display: block;
}
.u-m000auto {
margin: 0 0 0 auto;
display: block;
}
@media (max-width: 768px) {
.l {
margin: 0 auto;
display: block;
}
}
.u-m0auto-inline {
margin: 0 auto;
}
.u-hr-white {
height: 1px;
background-color: #ffffff;
border: none;
}
.u-hr-black {
height: 2px;
background-color: #666666;
border: none;
}
.u-hr-dot-brack {
border: none;
border-top: dotted 2px;
}
.u-hr-dot-gray {
border: none;
border-top: dotted 5px #cccccc;
}
.u-hrver-gray {
border-right: 1px solid;
border-right-color: #444444;
padding: 0px 10px 0px 0px;
margin-right: 8px;
}
@media (min-width: 769px) {
.u-pchrver-gray {
border-right: 1px solid;
border-right-color: #444444;
}
}
/*-------装飾関連---------*/
.d-shadow01 {
filter: drop-shadow(3px 3px 6px rgba(30, 30, 30, 0.8));
}
.u-d-shadow01 {
filter: drop-shadow(3px 3px 6px rgba(30, 30, 30, 0.8));
}
.u-r10 {
border-radius: 10px !important;
}
.u-r25 {
border-radius: 25px !important;
}
.u-r10img img {
border-radius: 10px !important;
}
.u-r-left10img img {
border-radius: 10px 0px 0px 10px !important;
}
@media (min-width: 769px) {
.u-r-right10img img {
border-radius: 0px 10px 10px 0px !important;
}
}
@media (min-width: 769px) {
.u-r-pc-left10img img {
border-radius: 10px 0px 0px 10px !important;
}
}
.u-r50 img {
border-radius: 50% !important;
}
.u-r-top10img img {
border-radius: 10px 10px 0 0 !important;
}
.u-r-top10 {
border-radius: 10px 10px 0 0 !important;
}
.u-r-btm10img img {
border-radius: 0 0 10px 10px !important;
}
.u-r-btm10 {
border-radius: 0 0 10px 10px !important;
}
.u-r20em {
border-radius: 20em;
}
.u-r20img img {
border-radius: 20em;
}
.u-marker-yellow {
background: linear-gradient(transparent 70%, #fee661 0%);
display: table;
}
.u-marker-yellow-left {
background: linear-gradient(transparent 70%, #fee661 0%);
}
@media (min-width: 769px) {
.u-marker-yellow-left {
display: inline-block;
}
}
@media (max-width: 768px) {
.u-marker-yellow-left {
display: table;
}
}
.u-ico-btn-anchor01 a:after {
font-family: "Font Awesome 5 Free";
margin-left: 8px;
font-weight: 900;
content: "";
}
.u-ico-btn-down01 a:after {
content: '';
background-image: url(https://www.siteworks.site/testsite/wp-content/uploads/2021/11/dl-icon-green.png);
display: inline-block;
width: 20px;
height: 20px;
margin-left: 3px;
background-size: contain;
background-repeat: no-repeat;
position: relative;
top: 2px;
}
.u-ico-btn-right01 a:after {
font-family: "Font Awesome 5 Free";
margin-left: 8px;
font-weight: 900;
content: "";
}
.u-ico-btn-check01::before {
font-family: "Font Awesome 5 Free";
margin-right: 8px;
font-weight: 900;
content: "";
}
/*---------------リスト---------------*/
.u-list-mark01 li {
margin-bottom: 1.5em !important;
}
.u-list-mark01 li:before {
position: absolute;
left: 0;
top: -5px;
counter-increment: number;
content: counter(number);
margin-left: -1.5em !important;
background: #222;
color: #fff;
text-indent: 0px;
display: inline-block;
font-weight: bold;
border-radius: 50%;
font-size: 1.5em !important;
line-height: 1.3em !important;
width: 35px !important;
height: 35px !important;
text-align: center;
margin-bottom: 1.5em !important;
color: #ffffff !important;
background-color: #1486aa !important;
}
.u-listico-check01 li {
list-style-type: none;
}
.u-listico-check01 li::before {
font-family: "Font Awesome 5 Free";
margin-right: 8px;
font-weight: 900;
content: "";
}
ul.list-icon01 {
counter-reset: num;
list-style-type: none !important;
padding: 0;
margin: 0;
}
ul.list-icon01 li {
position: relative;
padding-left: 30px;
line-height: 1.5em;
padding: 0.5em 0.5em 0.5em 40px;
margin-bottom: 8px;
}
ul.list-icon01 li:before {
position: absolute;
counter-increment: num;
content: counter(num);
display: inline-block;
background: #1486aa;
/* border: #555 1px solid; */
color: #ffffff;
font-family: 'Arial', sans-serif;
font-weight: bold;
font-size: 22px;
border-radius: 50%;
left: 0px;
width: 30px;
height: 30px;
line-height: 32px;
text-align: center;
top: 5px;
}
.cp-triangele-aft::after {
content: '';
border-right: 20px solid transparent;
border-bottom: 25px solid #ffffff;
border-left: 20px solid transparent;
position: absolute;
bottom: 0px;
left: 50%;
transform: translatex(-50%);
}
/*-----------------コンテンツ幅調整-------------------------------*/
.u-max60 {
max-width: 60px;
}
@media (min-width: 769px) {
.u-max1400-95 {
max-width: 1200px;
width: 95%;
}
}
@media (min-width: 769px) {
.u-max1110 {
margin: 0 auto;
max-width: 1110px;
}
}
@media (min-width: 769px) {
.umax1110 {
margin: 0 auto;
max-width: 1110px;
}
}
@media (min-width: 769px) {
.u-max960 {
margin: 0 auto;
max-width: 960px;
}
}
@media (min-width: 769px) {
.u-max850 {
margin: 0 auto;
max-width: 850px;
}
}
@media (min-width: 769px) {
.u-max769 {
margin: 0 auto;
max-width: 769px;
}
}
@media (min-width: 769px) {
.u-max500 {
margin: 0 auto;
max-width: 500px;
}
}
@media (min-width: 769px) {
.u-min960 {
margin: 0 auto;
min-width: 960px;
}
}
.u-wid70per {
width: 70%;
}
@media (min-width: 769px) {
.u-widpc70per {
width: 70%;
}
}
.u-wid75per {
width: 75%;
}
@media (min-width: 769px) {
.u-widpc75per {
width: 75%;
}
}
@media (min-width: 769px) {
.u-widpc80per {
width: 80%;
}
}
.u-wid90per {
width: 90%;
}
@media (min-width: 769px) {
.u-widpc90per {
width: 90%;
}
}
@media (max-width: 768px) {
.u-widsp80per {
width: 80%;
}
}
@media (max-width: 768px) {
.u-widsp90per {
width: 90%;
}
}
@media (min-width: 769px) {
.u-wid960 {
width: 960px;
}
}
@media (min-width: 769px) {
.u-wid1110 {
width: 1110px;
}
}
.u-wid-fit {
width: fit-content;
}
@media (min-width: 769px) {
.u-wid-pcfit {
width: fit-content;
}
}
@media (min-width: 769px) {
.u-wid-listpc-fit li {
width: fit-content;
}
}
/*背景関連*/
.u-nongrid-back1, .u-nongrid-back2 {
height: 100%;
position: absolute;
width: 75%;
z-index: -10;
}
.u-nongrid-back2 {
right: 0px;
z-index: -10;
}
.u-nong-txt01 span {
margin-bottom: 40px;
padding: 20px 24px 11px 24px;
font-size: 50px;
width: fit-content;
margin-left: 10vw;
line-height: 1em;
background: #ff8631;
/* Old browsers */
background: -moz-linear-gradient(left, #ff8631 0%, #ffbc00 100%);
/* FF3.6-15 */
background: -webkit-linear-gradient(left, #ff8631 0%, #ffbc00 100%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #ff8631 0%, #ffbc00 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff8631', endColorstr='#ffbc00',GradientType=1);
}
/*オパシティ*/
.u-opa0 {
opacity: 0;
}
/*--------------------アニメーション調整--------------------*/
.fadein {
opacity: 0;
transform: translateY(80px);
transition: all 1s;
}
.fadein-y {
opacity: 0;
transform: translateX(80px);
transition: all 1s;
}
/*1カラム*/
.zoom {
overflow: hidden;
}
.zoom img {
-moz-transition: -moz-transform 0.5s linear;
-webkit-transition: -webkit-transform 0.5s linear;
-o-transition: -o-transform 0.5s linear;
-ms-transition: -ms-transform 0.5s linear;
transition: transform 0.5s linear;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
width: 100%;
}
.zoom img:hover {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
.suiteki0 {
position: absolute;
width: 29vw;
top: -5vw;
right: -6%;
z-index: 999;
filter: brightness(340%) drop-shadow(2px 4px 5px rgba(45, 0, 80, 0.2)) saturate(5%);
opacity: 0.8;
}
.suiteki0-left {
position: absolute;
z-index: 999;
filter: brightness(340%) drop-shadow(2px 4px 5px rgba(45, 0, 80, 0.2)) saturate(5%);
opacity: 0.8;
}
@media (min-width: 769px) {
.suiteki0-left {
width: 29vw;
top: -5vw;
left: -3%;
}
}
@media (max-width: 768px) {
.suiteki0-left {
width: 50vw;
top: -10vw;
right: -15%;
}
}
.suiteki1 {
position: absolute;
z-index: 999;
filter: brightness(340%) drop-shadow(2px 4px 6px rgba(45, 0, 80, 0.6)) saturate(20%) hue-rotate(10deg);
opacity: 0.8;
}
@media (min-width: 769px) {
.suiteki1 {
width: 32vw;
top: -5vw;
left: -1%;
}
}
@media (max-width: 768px) {
.suiteki1 {
width: 70vw;
top: -12vw;
left: -32%;
}
}
.suiteki2 {
z-index: 999;
filter: brightness(340%) drop-shadow(2px 4px 6px rgba(45, 0, 80, 0.6)) saturate(20%) hue-rotate(10deg);
opacity: 0.8;
}
@media (min-width: 769px) {
.suiteki2 {
position: absolute;
width: 29vw;
top: -5vw;
right: -7%;
}
}
@media (max-width: 768px) {
.suiteki2 {
position: absolute;
width: 70vw;
top: -12vw;
right: -43%;
}
}
/*---------------パディング調整---------------*/
/*コンテンツ大枠*/
@media (min-width: 769px) {
.u-pd-section {
padding-top: 80px;
padding-bottom: 80px;
}
}
@media (max-width: 768px) {
.u-pd-section {
padding-top: 64px;
padding-bottom: 64px;
}
}
@media (min-width: 769px) {
.u-pd-section-half {
padding-top: 0px;
padding-bottom: 160px;
}
}
@media (max-width: 768px) {
.u-pd-section-half {
padding-top: 0px;
padding-bottom: 160px;
}
}
@media (min-width: 769px) {
.u-pd-section-top {
padding-top: 80px;
}
}
@media (max-width: 768px) {
.u-pd-section-top {
padding-top: 40px;
}
}
/*----------アンカーパディング調整---------*/
.anchor {
display: block;
padding-top: 160px;
margin-top: -160px !important;
}
.u-anchor {
padding-top: 80px;
margin-top: -80px !important;
}
@media (min-width: 769px) {
.u-pd-content {
padding: 80px 0px;
}
}
@media (max-width: 768px) {
.u-pd-content {
padding: 32px 0px;
}
}
@media (max-width: 768px) {
.u-pdsp-contfull {
padding: 16px !important;
}
}
.u-pdt0 {
padding-top: 0px !important;
}
.u-pdb0 {
padding-bottom: 0px;
}
.u-pdb12 {
padding-bottom: 12px;
}
@media (min-width: 769px) {
.u-pd-head {
padding: 120px 0px;
}
}
@media (max-width: 768px) {
.u-pd-head {
padding: 40px 0px;
}
}
@media (min-width: 769px) {
.u-pd-foot {
padding: 120px 0px;
}
}
@media (max-width: 768px) {
.u-pd-foot {
padding: 40px 0px;
}
}
.u-pd4 {
padding: 4px;
}
.u-pd8 {
padding: 8px;
}
@media (min-width: 769px) {
.u-pd16 {
padding: 16px;
}
}
@media (max-width: 768px) {
.u-pd16 {
padding: 8px;
}
}
.u-pd16-24 {
padding: 16px 24px;
}
.u-pd24 {
padding: 24px;
}
.u-pdtb24 {
padding: 24px 0px;
}
.u-pd32 {
padding: 32px;
}
@media (min-width: 769px) {
.u-pd40 {
padding: 40px;
}
}
@media (max-width: 768px) {
.u-pd40 {
padding: 24px 16px;
}
}
@media (min-width: 769px) {
.u-pd40_2416 {
padding: 40px;
}
}
@media (max-width: 768px) {
.u-pd40_2416 {
padding: 24px 16px;
}
}
@media (min-width: 769px) {
.u-pd-40-2416 {
padding: 40px;
}
}
@media (max-width: 768px) {
.u-pd-40-2416 {
padding: 24px 16px;
}
}
@media (min-width: 769px) {
.u-pd80-32 {
padding: 80px;
}
}
@media (max-width: 768px) {
.u-pd80-32 {
padding: 32px;
}
}
@media (min-width: 769px) {
.u-pd80-40 {
padding: 80px;
}
}
@media (max-width: 768px) {
.u-pd80-40 {
padding: 40px;
}
}
@media (min-width: 769px) {
.u-pdbpc80-0 {
padding-bottom: 80px;
}
}
.u-pd48 {
padding: 48px;
}
.u-pdlr-8 {
padding: 0px 8px;
}
.u-pdlr-20 {
padding: 0px 20px;
}
.u-pdlr-32 {
padding: 0px 32px;
}
.u-pdb40-20 {
padding: 40px 20px;
}
@media (min-width: 769px) {
.u-pd40-40sp20 {
padding: 40px 40px;
}
}
@media (max-width: 768px) {
.u-pd40-40sp20 {
padding: 20px 16px;
}
}
@media (min-width: 769px) {
.u-pd8-40sp8-16 {
padding: 8px 40px;
}
}
@media (max-width: 768px) {
.u-pd8-40sp8-16 {
padding: 8px 16px;
}
}
@media (min-width: 769px) {
.u-pd80-40sp20 {
padding: 80px 40px;
}
}
@media (max-width: 768px) {
.u-pd80-40sp20 {
padding: 20px 16px;
}
}
.u-pdt0 {
padding-top: 0px;
}
/*デバイス別*/
@media (min-width: 769px) {
.u-pd80_40 {
padding: 80px;
}
}
@media (max-width: 768px) {
.u-pd80_40 {
padding: 40px;
}
}
@media (min-width: 769px) {
.u-pd130_32 {
padding: 130px;
}
}
@media (max-width: 768px) {
.u-pd130_32 {
padding: 32px;
}
}
@media (min-width: 769px) {
.u-pd180_32 {
padding: 180px;
}
}
@media (max-width: 768px) {
.u-pd180_32 {
padding: 32px;
}
}
@media (min-width: 769px) {
.u-pd250_32 {
padding: 250px;
}
}
@media (max-width: 768px) {
.u-pd250_32 {
padding: 32px 16px;
}
}
.u-pdt8 {
padding-top: 8px;
}
.u-pdt32 {
padding-top: 32px;
}
.u-pdt40 {
padding-top: 40px;
}
@media (min-width: 769px) {
.u-pdlr-pc20 {
padding: 0px 20px;
}
}
@media (min-width: 769px) {
.u-pdlr-pc24 {
padding: 0px 24px;
}
}
@media (min-width: 769px) {
.u-pdlr-pc32 {
padding: 0px 32px;
}
}
@media (min-width: 769px) {
.u-pd-pc32 {
padding: 0px 32px;
}
}
@media (min-width: 769px) {
.u-pdlr-pc60 {
padding: 0px 60px;
}
}
@media (min-width: 769px) {
.u-pdtb-pc8040 {
padding: 80px 40px;
}
}
@media (min-width: 769px) {
.u-pdtb-pc80-sp32 {
padding: 80px 20px;
}
}
@media (max-width: 768px) {
.u-pdtb-pc80-sp32 {
padding: 32px 0px;
}
}
@media (min-width: 769px) {
.u-pd16-sp8 {
padding: 16px;
}
}
@media (max-width: 768px) {
.u-pd16-sp8 {
padding: 16px 8px;
}
}
@media (min-width: 769px) {
.u-pd32-24 {
padding: 32px;
}
}
@media (max-width: 768px) {
.u-pd32-24 {
padding: 24px;
}
}
@media (min-width: 769px) {
.u-pd32-30 {
padding: 32px;
}
}
@media (max-width: 768px) {
.u-pd32-30 {
padding: 30px;
}
}
@media (min-width: 769px) {
.u-pd48-32 {
padding: 48px;
}
}
@media (max-width: 768px) {
.u-pd48-32 {
padding: 32px;
}
}
@media (min-width: 769px) {
.u-pd80_20-24 {
padding: 80px 20px;
}
}
@media (max-width: 768px) {
.u-pd80_20-24 {
padding: 24px;
}
}
@media (min-width: 769px) {
.u-pd0_80_20-24 {
padding: 0px 20px 80px 20px;
}
}
@media (max-width: 768px) {
.u-pd0_80_20-24 {
padding: 24px;
}
}
@media (min-width: 769px) {
.u-pdtb80-24 {
padding: 80px 0px;
}
}
@media (max-width: 768px) {
.u-pdtb80-24 {
padding: 24px 0px;
}
}
@media (min-width: 769px) {
.u-pd-spmenu {
padding: 80px 20px;
}
}
@media (max-width: 768px) {
.u-pd-spmenu {
padding: 24px 24px 16vw 24px;
}
}
.u-pd32_0 {
padding: 32px 0px;
}
@media (min-width: 769px) {
.u-pd32-24 {
padding: 32px;
}
}
@media (max-width: 768px) {
.u-pd32-24 {
padding: 24px;
}
}
@media (min-width: 769px) {
.u-pd32_24-0 {
padding: 32px;
}
}
@media (max-width: 768px) {
.u-pd32_24-0 {
padding: 24px 0px;
}
}
@media (min-width: 769px) {
.u-pd64-24 {
padding: 64px;
}
}
@media (max-width: 768px) {
.u-pd64-24 {
padding: 24px;
}
}
/*変速*/
@media (min-width: 769px) {
.u-pdpc8088 {
padding: 80px 0px 80px 80px;
}
}
/*---------------マージン調整---------------*/
.u-m16 {
margin: 16px;
}
.u-mb0 {
margin-bottom: 0px !important;
}
.u-mb2 {
margin-bottom: 2px;
}
.u-mb4 {
margin-bottom: 4px;
}
.u-mb8 {
margin-bottom: 8px;
}
.u-mb16 {
margin-bottom: 16px;
}
.u-mb24 {
margin-bottom: 24px !important;
}
.u-mb32 {
margin-bottom: 32px !important;
}
.u-mb40 {
margin-bottom: 40px !important;
}
.u-mb48 {
margin-bottom: 48px !important;
}
.u-mb60 {
margin-bottom: 60px !important;
}
.u-mb72 {
margin-bottom: 72px;
}
.u-mb80 {
margin-bottom: 80px !important;
}
.u-mb90 {
margin-bottom: 90px;
}
.u-mr6 {
margin-right: 6px;
}
.u-mr32 {
margin-right: 32px;
}
.u-mb-u8 {
margin-bottom: -8px;
}
.u-mb-u16 {
margin-bottom: -16px;
}
@media (min-width: 769px) {
.u-mbpc-u100 {
margin-bottom: -100px;
}
}
/*トップ*/
.u-mt0 {
margin-top: 0px !important;
}
.u-mt4 {
margin-top: 4px;
}
.u-mt8 {
margin-top: 8px;
}
.u-mt16 {
margin-top: 16px;
}
.u-mt24 {
margin-top: 24px;
}
.u-mt32 {
margin-top: 32px;
}
.u-mt40 {
margin-top: 40px;
}
.u-mt48 {
margin-top: 48px;
}
.u-mt60 {
margin-top: 60px;
}
.u-mtb8 {
margin: 8px 0px;
}
.u-mtb24 {
margin: 24px 0px;
}
.u-mt-u2 {
margin-top: -3px;
}
.u-mt-u16 {
margin-top: -16px;
}
.u-mt-u24 {
margin-top: -24px;
}
.u-mt-u60 {
margin-top: -60px !important;
}
@media (max-width: 768px) {
.u-mt-spu24 {
margin-top: -24px;
}
}
.u-mr-6 {
margin-right: 6px;
}
.u-ml0 {
margin-left: 0px !important;
}
.u-mb4 {
margin-bottom: 4px !important;
}
@media (max-width: 768px) {
.u-mlsp4 {
margin-left: 4px !important;
}
}
@media (min-width: 769px) {
.u-ml4 {
margin-left: 4px !important;
}
}
.u-ml05em {
margin-left: 0.5em !important;
}
.u-ml1em {
margin-left: 1em !important;
}
@media (min-width: 769px) {
.u-mlpc2em {
margin-left: 2em !important;
}
}
@media (min-width: 769px) {
.u-mlpc4em {
margin-left: 4em !important;
}
}
@media (min-width: 769px) {
.u-mlpc40 {
margin-left: 40px !important;
}
}
.u-mtu52 {
margin-top: -52px;
}
@media (min-width: 769px) {
.u-mt-u52 {
margin-top: -52px;
}
}
.u-mtu105 {
margin-top: -105px;
}
.u-mtb24 {
margin: 24px 0px;
}
/*デバイス別*/
@media (min-width: 769px) {
.u-mbpc0 {
margin-bottom: 0px !important;
}
}
@media (min-width: 769px) {
.u-mbpc24 {
margin-bottom: 24px !important;
}
}
@media (min-width: 769px) {
.u-mbpc80-0 {
margin-bottom: 80px !important;
}
}
@media (min-width: 769px) {
.u-mbpc24-mrsp24 {
margin-bottom: 24px;
}
}
@media (max-width: 768px) {
.u-mbpc24-mrsp24 {
margin-right: 24px;
}
}
@media (min-width: 769px) {
.u-mb24-sp48 {
margin-bottom: 24px;
}
}
@media (max-width: 768px) {
.u-mb24-sp48 {
margin-top: 48px;
margin-bottom: 24px;
}
}
@media (min-width: 769px) {
.u-mb-u8-sp-u8 {
margin-bottom: -8px;
}
}
@media (max-width: 768px) {
.u-mb-u8-sp-u8 {
margin-bottom: -8px;
}
}
@media (max-width: 768px) {
.u-mbsp8 {
margin-bottom: 8px !important;
}
}
@media (max-width: 768px) {
.u-mbsp16 {
margin-bottom: 16px !important;
}
}
@media (max-width: 768px) {
.u-mbsp24 {
margin-bottom: 24px !important;
}
}
@media (max-width: 768px) {
.u-mbsp32 {
margin-bottom: 32px;
}
}
@media (max-width: 768px) {
.u-mbsp48 {
margin-bottom: 48px !important;
}
}
@media (max-width: 768px) {
.u-mbsp60 {
margin-bottom: 60px;
}
}
@media (max-width: 768px) {
.u-mbsp80 {
margin-bottom: 80px;
}
}
@media (max-width: 768px) {
.u-mtsp24 {
margin-top: 24px;
}
}
@media (min-width: 769px) {
.u-mtpc8 {
margin-top: 8px;
}
}
@media (min-width: 769px) {
.u-mtpc16 {
margin-top: 16px;
}
}
@media (min-width: 769px) {
.u-mtpc24 {
margin-top: 24px;
}
}
@media (min-width: 769px) {
.u-mtpc38 {
margin-top: 38px;
}
}
@media (min-width: 769px) {
.u-mtpc60 {
margin-top: 60px;
}
}
/*コンテンツ高さ*/
@media (min-width: 769px) {
.u-conth400 {
height: 400px;
}
}
@media (min-width: 769px) {
.u-conthimg400 img {
height: 400px;
}
}
/*フレックス幅*/
.u-flxwrp {
flex-basis: auto;
}
@media (min-width: 769px) {
.u-flx30 {
flex-basis: 30% !important;
flex-grow: 0 !important;
}
}
@media (min-width: 769px) {
.u-flx33 {
flex-basis: 33% !important;
flex-grow: 0 !important;
}
}
@media (min-width: 769px) {
.u-flx45 {
flex-basis: 45% !important;
flex-grow: 0 !important;
}
}
@media (min-width: 769px) {
.u-flx50 {
flex-basis: 50% !important;
flex-grow: 0 !important;
}
}
@media (min-width: 769px) {
.u-flex-dircol {
display: flex;
flex-direction: column;
}
}
@media (min-width: 769px) {
.u-flcol {
display: flex;
flex-direction: column;
}
}
@media (min-width: 769px) {
.u-glow1 {
flex-grow: 1;
}
}
/*フレックスのレフトマージン消す*/
.u-clmleft-out {
gap: 0px !important;
}
.u-clmleft-out .wp-block-column {
flex-grow: 1 !important;
}
.u-clmleft-out .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column:not(:first-child) {
margin-left: 0px;
}
.u-clmleft-out .wp-block-columns {
gap: 0px !important;
}
.u-gap0 .wp-block-columns {
gap: 0px !important;
}
.u-gap1 .wp-block-columns {
gap: 1em !important;
}
@media (max-width: 768px) {
.u-sp-gap0 .wp-block-columns {
gap: 0px !important;
}
}
.u-ml0 {
margin-left: 0px !important;
}
.loadfade {
animation-name: loadfad;
animation-duration: 2s;
animation-iteration-count: 1;
}
@keyframes loadfad {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/*--------------------アニメーション調整--------------------*/
.fadein {
opacity: 0;
transform: translateY(80px);
transition: all 1s;
}
.fadein-bottom {
opacity: 0;
top: 0;
transition: all 1.5s;
}
.fadein-bottom2 {
opacity: 0;
top: 60px;
transition: all 1.5s;
}
.fadein-y {
opacity: 0;
transform: translateX(80px);
transition: all 1s;
}
.fadein-y-l {
opacity: 0;
transform: translateX(-80px);
transition: all 1s;
}
.fadin {
animation-name: fad;
animation-duration: 2s;
animation-iteration-count: 1;
animation-delay: 1s;
animation-fill-mode: forwards;
}
@keyframes fad {
from {
opacity: 0;
transform: translateY(100px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.fadin2 {
animation-name: fad2;
animation-duration: 1s;
animation-iteration-count: 1;
animation-delay: 1s;
animation-fill-mode: forwards;
}
@keyframes fad2 {
from {
opacity: 0;
transform: translateY(30px) translateX(30px);
}
to {
opacity: 1;
transform: translateY(0) translateY(0px);
}
}
.fade-lag {
opacity: 0;
animation: fad-lag 1.5s ease forwards;
}
@keyframes fad-lag {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/*以下遅延の指定*/
.lag01 {
animation-delay: 0.2s;
}
.lag02 {
animation-delay: 0.4s;
}
.lag03 {
animation-delay: 0.6s;
}
.lag04 {
animation-delay: 0.8s;
}
.lag05 {
animation-delay: 1s;
}
.lag06 {
animation-delay: 1.2s;
}
/*以下遅延の指定*/
.a-delay-3s {
animation-delay: 3s;
}
.jj {
opacity: 0;
}
.jj.active {
opacity: 1;
transition: all 1s;
}
.a-fader-jojo, .a-fader-jojo-l, .fader-full, .fader-l-full {
opacity: 0;
}
.migikara, .migikara-full {
overflow: hidden;
position: relative;
opacity: 1 !important;
}
.migikara:before {
content: '';
position: absolute;
z-index: 1;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #fff;
pointer-events: none;
animation: migikara 2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes migikara {
100% {
transform: translateX(-100%);
}
}
.hidarikara, .hidarikara-full {
overflow: hidden;
position: relative;
opacity: 1 !important;
}
.hidarikara:before {
content: '';
position: absolute;
z-index: 1;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: #fff;
pointer-events: none;
animation: hidarikara 2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes hidarikara {
100% {
transform: translateX(100%);
}
}
.jojo-delay1s:before {
animation-delay: 1s;
}
.jojo-delay15s:before {
animation-delay: 1.5s;
}
.jojo-delay2s:before {
animation-delay: 2s;
}
.jojo-delay3s:before {
animation-delay: 3s;
}
.jojo-delay4s:before {
animation-delay: 4s;
}
.jojo-delay5s:before {
animation-delay: 5s;
}
.slide-animation {
animation: fadezoom 8s 0s forwards;
}
@keyframes fadezoom {
0% {
transform: scale(1);
}
100% {
transform: scale(1.2);
}
}
.single .siteContent, .single .breadSection {
padding-left: 5%;
padding-right: 5%;
}
@media (min-width: 769px) {
.single .siteContent, .single .breadSection {
max-width: 1080px;
margin: 0 auto;
}
}
.u-r20em {
border-radius: 20em;
}
.font-space02em {
letter-spacing: 0.2em;
}
.h2lower {
background-color: #0B3D96;
color: #ffffff;
padding: 16px 24px;
}
@media (min-width: 769px) {
.c-2c-06 {
min-height: 650px;
}
}
.c-2c-06 .right-cont {
display: flex;
justify-content: center;
}
.c-2c-06 .right-cont h2 {
font-family: YuMincho, 'Yu Mincho', serif;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
height: fit-content;
padding: 8px;
background-color: #ffffff;
position: relative;
top: 20px;
}
.c-2c-06 .left-cont figure {
position: absolute;
right: 0px;
z-index: -1;
}
@media (min-width: 769px) {
.c-2c-06 .left-cont figure {
max-width: 73%;
}
}
.c-2c-06 .left-cont img {
object-fit: cover;
}
@media (min-width: 769px) {
.c-2c-06 .left-cont img {
height: 650px;
}
}
@media (max-width: 768px) {
.c-2c-07 .wrap {
flex-direction: column-reverse;
}
}
.c-2c-07 .back01 {
position: absolute;
z-index: -1;
}
@media (min-width: 769px) {
.c-2c-07 .back01 {
width: calc(50% + 100px);
height: calc(100% + 80px);
left: 0px;
}
}
@media (max-width: 768px) {
.c-2c-07 .back01 {
width: 100%;
height: calc(100% + 80px);
top: -60px;
}
}
.c-2c-07 .back02 {
width: calc(50% + 50px);
height: 100%;
position: absolute;
z-index: -2;
right: 0px;
margin-top: -80px;
}
@media (min-width: 769px) {
.c-2c-07 .l-cont {
padding-top: 64px;
padding-bottom: 64px;
padding-left: 24px;
}
}
@media (max-width: 768px) {
.c-2c-07 .l-cont {
padding-top: 0px;
padding-bottom: 40px;
padding-left: 24px;
padding-right: 24px;
}
}
.c-2c-07 .r-cont img {
margin-top: -1px;
}
.c-2c-08 .back01 {
background: url(https://www.siteworks.site/utsugikeiki/wp-content/uploads/2023/11/back01.jpg);
display: flex;
align-items: center;
position: absolute;
z-index: -1;
left: 0px;
opacity: 0.9;
}
@media (min-width: 769px) {
.c-2c-08 .back01 {
width: calc(50% + 100px);
height: calc(100% + 80px);
}
}
@media (max-width: 768px) {
.c-2c-08 .back01 {
width: 100%;
height: calc(100% + 40px);
}
}
.c-2c-08 .back01::after {
content: '';
background-color: rgba(11, 61, 150, 0.1);
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 1;
}
.c-2c-08 .l-cont {
padding-top: 64px;
}
@media (min-width: 769px) {
.c-2c-08 .l-cont {
padding-bottom: 64px;
}
}
.c-2c-08 .r-cont {
overflow: hidden;
}
@media (min-width: 769px) {
.c-2c-08 .r-cont {
position: absolute;
right: 0px;
width: calc(50% - 2em);
}
}
@media (min-width: 769px) {
.c-2c-08 .r-cont figure {
max-height: 500px;
overflow: hidden;
min-height: 500px;
}
}
@media (max-width: 768px) {
.c-2c-08 .r-cont figure {
width: 100%;
}
}
@media (min-width: 769px) {
.c-2c-08 .r-cont img {
object-fit: cover;
min-height: 500px;
}
}
@media (max-width: 768px) {
.c-history .sec-years {
align-items: center !important;
}
}
.c-history .sec-years .l-cont {
flex-basis: auto;
flex-grow: 0;
}
.c-history .sec-years .l-cont p {
font-weight: bold;
line-height: 1em;
}
@media (min-width: 769px) {
.c-history .sec-years .l-cont p {
font-size: clamp(65px, 8vw, 85px);
}
}
@media (max-width: 768px) {
.c-history .sec-years .l-cont p {
font-size: 8vw;
}
}
.c-history .sec-years .r-cont p {
font-weight: bold;
border-bottom: 1px solid #333333;
}
@media (min-width: 769px) {
.c-history .sec-years .r-cont p {
font-size: 24px;
}
}
@media (max-width: 768px) {
.c-history .sec-years .r-cont p {
font-size: 20px;
line-height: 1.7em;
}
}
.c-history .sec-detail .right {
border-right: 3px solid;
}
.c-history .sec-detail .border1 {
border-color: #b70000;
}
.c-history .sec-detail .border2 {
border-color: #ff9000;
}
.c-history .sec-detail .border3 {
border-color: #c99c00;
}
.c-history .sec-detail .border4 {
border-color: #ffcd00;
}
.btn-history-side {
position: fixed;
right: 0.5%;
top: 40%;
z-index: 100;
}
.btn-history-side p {
writing-mode: tb-rl;
text-orientation: upright;
color: #ffffff;
line-height: 1em;
margin-bottom: 8px;
}
.btn-history-side .btn1 a, .btn-history-side .btn2 a, .btn-history-side .btn3 a, .btn-history-side .btn4 a {
display: block;
color: #ffffff;
}
.btn-history-side .btn1 {
background-color: #b70000;
}
.btn-history-side .btn2 {
background-color: #ff9000;
}
.btn-history-side .btn3 {
background-color: #c99c00;
}
.btn-history-side .btn4 {
background-color: #ffcd00;
}
@media (min-width: 769px) {
.u-mtpc80 {
margin-top: 80px;
}
}
@media (max-width: 768px) {
.u-mtpc80 {
margin-top: 40px;
}
}
@media (min-width: 769px) {
.u-mbpc80 {
margin-bottom: 80px;
}
}
@media (max-width: 768px) {
.u-mbpc80 {
margin-bottom: 40px;
}
}
@media (min-width: 769px) {
.u-mtpc160 {
margin-top: 160px;
}
}
@media (max-width: 768px) {
.u-mtpc160 {
margin-top: 80px;
}
}
@media (min-width: 769px) {
.u-mbpc160 {
margin-bottom: 160px;
}
}
@media (max-width: 768px) {
.u-mbpc160 {
margin-bottom: 80px;
}
}
@media (min-width: 769px) {
.u-mtpc240 {
margin-top: 240px;
}
}
@media (max-width: 768px) {
.u-mtpc240 {
margin-top: 80px;
}
}
@media (min-width: 769px) {
.u-mbpc240 {
margin-bottom: 240px;
}
}
@media (max-width: 768px) {
.u-mbpc240 {
margin-bottom: 60px;
}
}
@media (min-width: 769px) {
.u-pdtpc80 {
padding-top: 80px;
}
}
@media (max-width: 768px) {
.u-pdtpc80 {
padding-top: 40px;
}
}
@media (min-width: 769px) {
.u-pdbpc80 {
padding-bottom: 80px;
}
}
@media (max-width: 768px) {
.u-pdbpc80 {
padding-bottom: 40px;
}
}
@media (min-width: 769px) {
.u-pdtpc160 {
padding-top: 160px;
}
}
@media (max-width: 768px) {
.u-pdtpc160 {
padding-top: 80px;
}
}
@media (min-width: 769px) {
.u-pdbpc160 {
padding-bottom: 160px;
}
}
@media (max-width: 768px) {
.u-pdbpc160 {
padding-bottom: 80px;
}
}
@media (min-width: 769px) {
.u-pdtb160-80 {
padding-top: 160px;
padding-bottom: 160px;
}
}
@media (max-width: 768px) {
.u-pdtb160-80 {
padding-top: 80px;
padding-bottom: 80px;
}
}
@media (min-width: 769px) {
.u-pdtb240-80 {
padding-top: 160px;
padding-bottom: 240px;
}
}
@media (max-width: 768px) {
.u-pdtb240-80 {
padding-top: 80px;
padding-bottom: 80px;
}
}
.bg-darkgray {
background-color: #666666;
}
.bg-stripe1 {
background-image: linear-gradient(-45deg, #ccc 25%, #efefef 25%, #efefef 50%, #ccc 50%, #ccc 75%, #efefef 75%, #efefef);
background-size: 4px 4px;
}
.u-border01::after, .u-border100-x-bk::after, .u-border100-y-bk::after, .u-border100-xyoko-bk::after {
background-color: #444444;
}
.u-border02::after, .u-border100-x-wh::after, .u-border100-y-whk::after, .u-border100-xyoko-wh::after {
background-color: #ffffff;
}
.u-border100-x-wh::after, .u-border100-x-bk::after {
content: "";
height: 1px;
flex-grow: 1;
display: block;
}
@media (min-width: 769px) {
.u-border100-x-wh::after, .u-border100-x-bk::after {
width: 100px;
margin-top: 40px;
}
}
@media (max-width: 768px) {
.u-border100-x-wh::after, .u-border100-x-bk::after {
width: 30px;
margin-top: 12px;
}
}
.u-border100-y-wh::after, .u-border100-y-bk::after {
content: "";
width: 1px;
flex-grow: 1;
margin-top: 8px;
display: inline-block;
}
@media (min-width: 769px) {
.u-border100-y-wh::after, .u-border100-y-bk::after {
height: 100px;
}
}
@media (max-width: 768px) {
.u-border100-y-wh::after, .u-border100-y-bk::after {
height: 30px;
}
}
.u-border100-xyoko-wh::after, .u-border100-xyoko-bk::after {
content: "";
height: 1px;
flex-grow: 1;
display: inline-block;
position: absolute;
top: 50%;
margin-left: 12px;
}
@media (min-width: 769px) {
.u-border100-xyoko-wh::after, .u-border100-xyoko-bk::after {
width: 100px;
}
}
@media (max-width: 768px) {
.u-border100-xyoko-wh::after, .u-border100-xyoko-bk::after {
width: 30px;
}
}
.massage-box01 {
background-color: rgba(255, 255, 255, 0.8);
box-shadow: 4px 4px 7px #cccccc;
}
@media (min-width: 769px) {
.massage-box01 {
margin-top: -44px;
}
}
.bg-jigyo {
background-image: url(https://www.siteworks.site/utsugikeiki/wp-content/uploads/2023/12/jigyo-back5.png);
background-size: contain;
}
.sec-top-notice {
/*.notice2{
a{color:#ffffff;}
.wp-block-latest-posts li {
border-bottom: 1px dotted #ffffff;
a{color:#ffffff;}}
.wp-block-latest-posts li time {color: #ffffff;}
} */
}
.sec-top-notice .line {
display: block;
position: absolute;
width: 100%;
background: linear-gradient(to right, #ffffff 0%, #e6fffb 0%, #6bc7e6 30%, #0b3d96 70%);
bottom: 0px;
z-index: -1;
}
@media (min-width: 769px) {
.sec-top-notice .line {
height: 200px;
}
}
@media (max-width: 768px) {
.sec-top-notice .line {
height: 100px;
}
}
.sec-top-notice figure {
position: absolute;
display: block;
object-fit: contain;
right: -30px;
z-index: 5;
width: 33vw;
bottom: 3%;
}
@media (max-width: 768px) {
.sec-top-notice figure {
width: 55%;
}
}
.sec-top-notice .wp-block-latest-posts li {
padding: 12px 0;
font-size: 16px;
}
.sec-top-notice .notice1 .bdg, .sec-top-notice .notice2 .bdg {
border-radius: 20em;
padding: 16px;
width: fit-content;
color: #ffffff;
font-weight: bold;
line-height: 1em;
top: -25px;
position: absolute;
}
@media (min-width: 769px) {
.sec-top-our figure {
max-height: 700px !important;
min-height: 620px !important;
}
}
@media (min-width: 769px) {
.sec-top-our img {
min-height: 620px !important;
}
}
.under-pic {
max-height: 250px;
overflow: hidden;
}
@media (min-width: 769px) {
.under-pic {
margin-top: -100px;
}
}
@media (max-width: 768px) {
.under-pic {
margin-top: -20px;
}
}
.sec-top-outline .p1-1, .sec-top-outline .p1-2 {
font-family: YuMincho, 'Yu Mincho', serif;
font-weight: bold;
writing-mode: tb-rl;
padding: 16px 8px;
background-color: #ffffff;
position: absolute;
z-index: 10;
z-index: 100;
line-height: 1em;
}
@media (min-width: 769px) {
.sec-top-outline .p1-1, .sec-top-outline .p1-2 {
font-size: clamp(24px, 4vw, 80px);
}
}
@media (max-width: 768px) {
.sec-top-outline .p1-1, .sec-top-outline .p1-2 {
font-size: 28px;
}
}
@media (min-width: 769px) {
.sec-top-outline .p1-1 {
left: 16vw;
}
}
@media (max-width: 768px) {
.sec-top-outline .p1-1 {
left: 25vw;
}
}
@media (min-width: 769px) {
.sec-top-outline .p1-2 {
left: 10vw;
}
}
@media (max-width: 768px) {
.sec-top-outline .p1-2 {
left: 14vw;
}
}
.sec-top-outline .p2 {
z-index: 10;
border-radius: 0 10px 0 0;
width: fit-content;
position: absolute;
padding: 16px 24px;
background-color: #0B3D96;
bottom: 0px;
margin-bottom: 0;
line-height: 1em;
color: #ffffff;
}
.sec-top-illust {
margin-top: -300px;
}
.sec-top-illust .back-round {
border-top-right-radius: 100%;
border-top-left-radius: 100%;
position: relative;
z-index: -1;
padding-top: 450px;
}
@media (min-width: 769px) {
.sec-top-illust .back-round {
top: 280px;
width: 114%;
transform: translateX(-6%);
}
}
@media (max-width: 768px) {
.sec-top-illust .back-round {
top: 350px;
width: 160%;
transform: translateX(-19%);
}
}
.sec-top-illust .bird {
position: absolute;
}
@media (min-width: 769px) {
.sec-top-illust .bird {
top: 40%;
left: 13%;
}
}
@media (max-width: 768px) {
.sec-top-illust .bird {
top: 40%;
left: 7%;
}
}
@media (max-width: 768px) {
.sec-top-illust .bird img {
width: 50%;
}
}
.sec-top-illust .sun {
position: absolute;
}
@media (min-width: 769px) {
.sec-top-illust .sun {
top: 20%;
left: 10%;
}
}
@media (max-width: 768px) {
.sec-top-illust .sun {
top: 26%;
left: 7%;
}
}
@media (max-width: 768px) {
.sec-top-illust .sun img {
width: 55%;
}
}
.sec-top-illust .cloudy {
position: absolute;
}
@media (min-width: 769px) {
.sec-top-illust .cloudy {
top: 30%;
right: -15%;
width: 35vw;
}
}
@media (max-width: 768px) {
.sec-top-illust .cloudy {
top: 37%;
right: -51%;
width: 75vw;
}
}
.sec-top-illust h2 span {
color: #ffffff !important;
}
.sec-top-illust .c-fullwidth-cont {
width: 95% !important;
}
.sec-top-illust .u-border100-x-wh::after, .sec-top-illust .u-border100-x-bk::after {
margin: 40px auto;
}
.sec-top-product {
position: relative;
top: -40px;
z-index: 10;
}
.sec-top-product .wrap {
background-color: #fff;
}
@media (min-width: 769px) {
.sec-top-product .wrap {
border-radius: 0 20em 20em 0;
background-color: #ffffff;
width: 90%;
box-shadow: 12px 12px 12px #a9a9a9;
outline: solid 10px #2e8ef8;
}
}
.sec-top-product h2 {
margin-bottom: 24px;
line-height: 1.1em;
}
.sec-top-product .u-border100-x-wh::after, .sec-top-product .u-border100-x-bk::after {
margin-top: 12px;
}
@media (min-width: 769px) {
.sec-top-product .back01 {
box-shadow: 2px 2px 10px #cccccc;
background-color: #ffffff;
height: 100%;
width: calc(98%);
position: absolute;
z-index: -1;
max-width: calc(5% + 1080px + 40px);
}
}
.sec-top-product .cont {
position: relative;
}
@media (min-width: 769px) {
.sec-top-product .cont {
left: 5.5%;
padding: 80px 80px 80px 0px;
}
}
@media (max-width: 768px) {
.sec-top-product {
padding: 40px 24px;
width: 95%;
margin: 0 auto;
box-shadow: 2px 2px 10px #cccccc;
z-index: 10;
position: relative;
background-color: #ffffff;
}
}
.sec-top-recruit .block {
position: absolute;
right: 0;
z-index: -1;
}
@media (min-width: 769px) {
.sec-top-recruit .block {
top: -500px;
}
}
@media (max-width: 768px) {
.sec-top-recruit .block {
max-width: 50%;
top: -150px;
}
}
.sec-top-recruit .rec-btn {
max-width: 600px;
height: 100px;
font-size: 24px;
position: relative;
top: -50px;
}
@media (max-width: 768px) {
.sec-top-recruit .rec-btn {
width: 80%;
height: auto;
top: -20px;
}
}
.sec-top-recruit .rec-btn a {
display: block;
}
@media (min-width: 769px) {
.sec-top-recruit .rec-btn {
padding-top: 24px;
padding-bottom: 24px;
}
}
@media (max-width: 768px) {
.sec-top-recruit .rec-btn {
padding-top: 0px;
padding-bottom: 0px;
}
}
.sec-belmare {
background: linear-gradient(to right, #9efba2 0%, #ffffff 20%, #ffffff 80%, #aed8ff 100%);
}
@media (max-width: 768px) {
.sec-belmare {
margin-top: 240px;
}
}
@media (min-width: 769px) {
.sec-belmare {
height: 150px;
}
}
@media (max-width: 768px) {
.sec-belmare {
height: 120px;
}
}
.sec-belmare img {
position: absolute;
z-index: 1;
bottom: 0px;
}
@media (min-width: 769px) {
.sec-belmare img {
width: 34vw;
margin-left: 40px;
min-width: 200px;
max-width: 350px;
}
}
@media (max-width: 768px) {
.sec-belmare img {
left: 10%;
max-width: 60%;
top: -200%;
}
}
.sec-belmare .massage {
position: absolute;
}
@media (min-width: 769px) {
.sec-belmare .massage {
top: -135px;
}
}
@media (max-width: 768px) {
.sec-belmare .massage {
bottom: 10%;
}
}
@media (min-width: 769px) {
.c-3c02 .pict img {
width: 80%;
margin: 0 auto;
}
}
@media (min-width: 769px) {
.product-ol ol {
display: flex;
flex-wrap: wrap;
}
}
.product-ol ol li {
margin-right: 32px;
}
@media (min-width: 769px) {
.footerWidget {
position: absolute;
left: 10%;
}
}
#block-8 {
width: fit-content;
padding-top: 0px;
margin-bottom: 0px;
}
@media (max-width: 768px) {
#block-8 {
margin: 0 auto;
}
}
#block-8 p {
font-size: 14px;
margin-bottom: 0px;
border-left: 2px #ffffff solid;
border-right: 2px #ffffff solid;
padding: 0px 16px;
}
@media (min-width: 769px) {
.copySection p {
margin-left: auto;
margin-right: 10%;
}
}
@media (min-width: 769px) {
.sectionBox {
padding-top: 3em;
padding-bottom: 3em;
}
}
@media (max-width: 768px) {
.sectionBox {
padding-top: 2em;
padding-bottom: 1em;
}
}
div#top__fullcarousel:before {
content: "";
position: absolute;
width: 85vw;
height: 20vw;
top: -0.8vw;
z-index: 0;
right: 0px;
background: linear-gradient(to right, #b5efff 0%, #003bd1 100%);
border-radius: 10px 0px 0px;
}
.carousel {
overflow: unset;
}
.siteHeader {
background-color: transparent;
}
.lead .leadsent {
font-size: 24px;
text-align: center;
margin-bottom: 24px;
font-weight: bold;
}
.u-r25 {
border-radius: 25px !important;
}
@media (min-width: 769px) {
.u-wid1110 {
width: 1110px;
}
}
.u-wid-fit {
width: fit-content;
}
.u-mt-u100 {
margin-top: -100px;
}
.u--triangele-aft::after {
content: '';
border-right: 20px solid transparent;
border-bottom: 25px solid #ffffff;
border-left: 20px solid transparent;
position: absolute;
bottom: 0px;
left: 50%;
transform: translatex(-50%);
}
.sec-plan .bdg {
color: #666666;
font-size: 16px;
display: block;
position: absolute;
background-color: #ffffff;
top: 0px;
right: 0;
bottom: 0;
left: 0;
height: 32px;
text-align: center;
margin: auto !important;
width: fit-content;
padding: 0px 20px 0px 20px;
filter: drop-shadow(1px 1px 2px #c8c8c8);
}
.sec-project h3 {
background-color: #ffffff;
border: 1px solid #609ed1;
width: fit-content;
padding: 18px 36px;
border-top: 6px solid #609ed1;
margin: 0 auto;
margin-top: -70px !important;
margin-bottom: 24px;
}
.sec-ad-col {
position: relative;
}
.sec-ad-col::before {
content: "";
background-image: url(https://www.siteworks.site/ssworks/wp-content/uploads/2022/11/marker.png);
position: absolute;
top: -10px;
left: -10px;
width: 79px;
height: 61px;
background-repeat: no-repeat;
}
@media (max-width: 768px) {
.sec-ad-col::before {
width: 60px;
height: 46px;
background-repeat: no-repeat;
background-size: contain;
}
}
.sec-contact {
background-image: url(https://www.siteworks.site/ssworks/wp-content/uploads/2022/11/contact-01.jpg);
background-size: cover;
background-position: right;
}
.sec-contact h2, .sec-contact h3, .sec-contact p, .sec-contact li {
color: #ffffff;
}
.sec-contact .u-border01:after {
background-color: #ffffff !important;
}
.sec-contact p {
margin-bottom: 0px;
text-align: center;
line-height: 1.5em;
}
.sec-contact .l-box {
padding: 0 40px !important;
}
@media (min-width: 769px) {
.sec-contact .l-box {
border-right: solid 1px #ffffff;
}
}
.sec-contact .head {
font-size: 20px;
}
.sec-contact .tel {
font-size: clamp(20px, 2.3em, 40px);
font-weight: bold;
}
.page-solve h3 {
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#1486aa+0,136ba5+100 */
background: #609ed1;
/* Old browsers */
background: -moz-linear-gradient(left, #609ed1 0%, #18b4e6 100%);
/* FF3.6-15 */
background: -webkit-linear-gradient(left, #609ed1 0%, #18b4e6 100%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #609ed1 0%, #18b4e6 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#609ed1', endColorstr='#18b4e6',GradientType=1);
/* IE6-9 */
padding: 8px 16px;
color: #ffffff;
border-radius: 5px;
}
.page-solve h4 {
font-size: 22px;
border-bottom: solid 2px #444444;
padding-bottom: 20px;
}
.bbb {
width: 250px;
height: 250px;
background-color: #cccccc;
display: block;
border-radius: 50%;
}
.kaiten {
padding: 10px;
transition: 0.5s;
transform: rotateZ(0deg);
}
.kaiten:hover {
transform: rotateZ(190deg);
}