@charset "UTF-8";
/* =====================================
reset
------------------------------------- */
* {
margin: 0;
border: none;
padding: 0;
}
/* =====================================
base
------------------------------------- */
*,
*:before,
*:after {
box-sizing: inherit;
}
*:before,
*:after {
text-decoration: inherit;
vertical-align: inherit;
}
html {
position: relative;
box-sizing: border-box;
overflow-y: scroll;
background-color: #fff;
color: #000;
font-size: 10px;
font-family: "Yu Gothic", YuGothic, "游ゴシック体", "游ゴシック", Meiryo, "メイリオ", "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body {
line-height: 1.75;
font-size: 1.6rem;
word-wrap: break-word;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary,
svg {
display: block;
}
button,
input,
optgroup,
select,
textarea {
color: inherit;
font: inherit;
text-shadow: inherit;
}
button {
background-color: transparent;
}
input[type="submit"],
input[type="button"],
input[type="image"],
input[type="reset"],
input[type="radio"],
input[type="checkbox"],
button,
select,
option,
label,
[role="button"] {
cursor: pointer;
}
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
table {
border-collapse: collapse;
}
table td,
table th {
word-break: break-all;
}
h1,
h2,
h3,
h4,
h5,
h6,
th,
dt {
font-weight: normal;
}
ul,
ol {
list-style: none;
}
p,
ul,
ol,
dl,
table {
margin-bottom: .75em;
}
img {
vertical-align: top;
max-width: 100%;
height: auto;
border: none;
}
table img {
max-width: inherit;
}
strong,
em,
b,
i {
font-style: normal;
}
strong,
em,
b {
font-weight: bold;
}
strong {
color: #52a127;
}
h1,
h2,
h3,
h4,
h5,
h6,
small {
font-size: 100%;
}
code,
var {
font-family: Menlo, Consolas, monospace;
}
a {
color: #52a127;
text-decoration: underline;
}
a:visited {
color: #000;
}
a:hover, a:focus, a:active {
text-decoration: none;
}
/* =====================================
structure
------------------------------------- */
.gtm-noscript {
display: none;
visibility: hidden;
width: 0;
height: 0;
}
/* ===========================
page
--------------------------- */
#footer.erea-list {
position: relative;
margin-top: 45px;
}
#page {
position: relative;
overflow: hidden;
border-top-width: 0;
border-top-style: solid;
}
@media only screen and (max-width: 1024px) {
#page {
border-top-style: double;
}
}
@media only screen and (max-width: 768px) {
#page {
border-top-style: dotted;
}
}
@media only screen and (max-width: 480px) {
#page {
border-top-style: dashed;
}
}
/* ===========================
header
--------------------------- */
#header {
z-index: 998;
border-bottom: 1px solid #ccc;
background-color: #fff;
}
#header > .inner {
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
max-width: 1440px;
height: 110px;
margin: 0 auto;
}
#header .logo {
position: absolute;
top: 50%;
left: 80px;
line-height: 1.5;
transform: translateY(-50%);
font-size: 2rem;
font-weight: bold;
}
#header .logo > a {
display: flex;
align-items: center;
color: #000;
text-decoration: none;
}
#header .logo > a > .img {
margin: -.875em 20px 0 0;
}
#header .logo > a > .text {
font-size: 1.4rem;
font-feature-settings: "kern", "palt";
}
#header .logo > a > .text > span {
display: block;
}
#header .logo > a:hover, #header .logo > a:focus, #header .logo > a:active {
text-decoration: underline;
}
#header .search {
position: fixed;
top: 110px;
z-index: 999;
max-width: 1440px;
width: 100%;
color: #fff;
}
.static #header .search,
.form #header .search,
.cts #header .search {
position: absolute;
}
#header .search > .ui {
position: absolute;
top: -110px;
right: 0;
display: flex;
justify-content: center;
align-items: center;
width: 180px;
height: 110px;
background: transparent linear-gradient(-45deg, rgba(27, 163, 35, .95) 0, rgba(27, 163, 35, .95) 3px, rgba(69, 180, 76, .95) 3px, rgba(69, 180, 76, .95) 4px, rgba(27, 163, 35, .95) 4px, rgba(27, 163, 35, .95) 5px) repeat 0 0;
background-size: 5px 5px;
color: #fff;
font-size: 1.6rem;
font-weight: bold;
text-decoration: none;
}
#header .search > .ui:hover, #header .search > .ui:focus, #header .search > .ui:active {
text-decoration: underline;
}
#header .search > .ui > span {
position: relative;
display: inline-block;
padding-left: 26px;
}
#header .search > .ui > span::before, #header .search > .ui > span::after {
content: "";
position: absolute;
display: block;
}
#header .search > .ui > span::before {
top: 5px;
left: 0;
width: 15px;
height: 15px;
border-radius: 50%;
border: 2px solid #fff;
}
#header .search > .ui > span::after {
top: 19px;
left: 11px;
width: 9px;
height: 2px;
border-radius: 1px;
background-color: #fff;
transform: rotate(45deg);
}
#header .search > .ui[aria-expanded="true"] > span::before, #header .search > .ui[aria-expanded="true"] > span::after {
top: 50%;
left: 2px;
width: 18px;
height: 2px;
margin-top: -1px;
border-radius: 1px;
background-color: #fff;
}
#header .search > .ui[aria-expanded="true"] > span::before {
border: none;
transform: rotate(45deg);
}
#header .search > .ui[aria-expanded="true"] > span::after {
transform: rotate(-45deg);
}
#header .search > .content {
position: absolute;
display: none;
width: 100%;
max-height: calc(100vh - 110px);
height: 0;
overflow: hidden;
box-shadow: 0 0 0 rgba(0, 0, 0, 0);
background: transparent linear-gradient(-45deg, rgba(27, 163, 35, .95) 0, rgba(27, 163, 35, .95) 3px, rgba(69, 180, 76, .95) 3px, rgba(69, 180, 76, .95) 4px, rgba(27, 163, 35, .95) 4px, rgba(27, 163, 35, .95) 5px) repeat 0 0;
background-size: 5px 5px;
transition: height .4s, box-shadow .4s;
}
#header .search > .content[aria-expanded="true"] {
display: block;
box-shadow: 0 .25em .5em rgba(0, 0, 0, .125);
}
.static #header .search > .content {
display: none;
height: auto;
}
#header .search > .content > .inner {
padding: 35px 40px;
}
#header .list-01,
#header .list-02 {
display: flex;
justify-content: flex-end;
margin: 0 180px 0 0;
}
#header .list-01 > li,
#header .list-02 > li {
margin-right: 40px;
}
#header .list-01 > li > a,
#header .list-02 > li > a {
color: #000;
text-decoration: none;
}
#header .list-01 {
margin-top: 1em;
font-size: 1.4rem;
}
#header .list-01 > li > a {
display: inline-block;
}
#header .list-01 > li > a:hover, #header .list-01 > li > a:focus, #header .list-01 > li > a:active {
text-decoration: underline;
}
#header .list-02 {
font-size: 1.6rem;
font-weight: bold;
}
#header .list-02 > li.know > a,
#header .list-02 > li.event > a {
padding-left: 32px;
padding-top: .5em;
}
#header .list-02 > li.movie > a {
padding-left: 35px;
padding-top: .5em;
}
#header .list-02 > li.know > a::before,
#header .list-02 > li.event > a::before,
#header .list-02 > li.movie > a::before {
content: "";
display: block;
background-size: cover;
background-repeat: no-repeat;
position: absolute;
left: 0;
top: 50%;
}
#header .list-02 > li.know > a::before {
background-image: url(/common/images/icon-know-01.png);
width: 17px;
height: 31px;
margin-top: -22px;
}
#header .list-02 > li.event > a::before {
background-image: url(/common/images/icon-event-02.png);
width: 23px;
height: 25px;
margin-top: -15px;
}
#header .list-02 > li.movie > a::before {
background-image: url(/common/images/icon-movie-02.png);
width: 28px;
height: 22px;
margin-top: -13px;
}
#header .list-02 > li.movie > a .sub {
font-size: 1.4rem;
}
#header .list-02 > li.none > a {
padding-top: 8px;
}
#header .list-02 > li > a {
position: relative;
display: block;
overflow: hidden;
padding-bottom: 10px;
transition: color .2s;
}
#header .list-02 > li > a::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -3px;
display: block;
height: 3px;
background-color: #52a127;
transition: bottom .2s;
}
#header .list-02 > li > a br.ad-sp {
display: none;
}
#header .list-02 > li > a:hover::after, #header .list-02 > li > a:focus::after, #header .list-02 > li > a:active::after {
bottom: 0;
}
#header .list-02 > li > a[aria-current]::after {
bottom: 0;
}
.top #header {
border-bottom: none;
background-color: rgba(255, 255, 255, .8);
}
.do-not-fixed #header .search {
position: absolute;
}
.do-not-fixed #header .search > .content {
max-height: inherit;
}
@media only screen and (max-width: 1440px) {
#header .logo {
left: 20px;
}
}
@media only screen and (max-width: 1280px) {
#header .list-01 > li,
#header .list-02 > li {
margin-right: 30px;
}
}
@media only screen and (max-width: 1024px) {
#header .search > .ui {
width: 160px;
}
#header .list-01,
#header .list-02 {
margin-right: 160px;
}
}
@media only screen and (max-width: 980px) {
#header .logo > a {
align-items: flex-start;
flex-direction: column;
}
#header .logo > a > .img {
margin: 0 0 .25em 0;
}
#header .logo > a > .text {
font-size: 1.3rem;
}
#header .list-02 {
font-size: 1.5rem;
}
#header .list-02 > li.movie {
max-width: 200px;
}
#header .list-02 > li > a {
line-height: 1.4;
text-align: center;
}
#header .list-02 > li > a br.ad-sp {
display: inline-block;
}
}
@media only screen and (max-width: 840px) {
#header .list-01 > li,
#header .list-02 > li {
margin-right: 15px;
}
}
@media only screen and (max-width: 768px) {
#header {
border-bottom: none;
}
#header > .inner {
height: auto;
}
#header .logo {
position: absolute;
top: 38px;
left: 15px;
font-size: 1.8rem;
}
#header .logo > a > .img {
width: 100px;
}
#header .logo > a > .text {
font-size: 1rem;
}
#header .search {
top: 77px;
}
#header .search > .ui {
top: -77px;
width: 84px;
height: 77px;
font-size: 1rem;
}
#header .search > .ui > span {
padding-top: 30px;
padding-left: 0;
}
#header .search > .ui > span::before {
top: 2px;
left: 50%;
width: 18px;
height: 18px;
margin-left: -12px;
}
#header .search > .ui > span::after {
top: 20px;
left: 50%;
width: 11px;
height: 2px;
margin-left: 1px;
}
#header .search > .ui[aria-expanded="true"] > span::before, #header .search > .ui[aria-expanded="true"] > span::after {
top: 0;
left: 50%;
width: 24px;
margin-top: 12px;
margin-left: -12px;
}
#header .search > .content {
max-height: calc(100vh - 77px);
}
#header .search > .content > .inner {
padding: 30px 35px;
}
#header .list-01,
#header .list-02 {
margin-right: 0;
border-bottom: 1px solid #ccc;
}
#header .list-01 > li,
#header .list-02 > li {
margin-right: 0;
}
#header .list-01 {
flex-direction: column;
justify-content: center;
height: 78px;
margin-top: 0;
padding-right: 94px;
font-size: 1.1rem;
text-align: right;
}
#header .list-01 > li {
margin: 0;
}
#header .list-02 {
flex-direction: row;
justify-content: space-around;
margin-top: 0;
font-size: 1.4rem;
text-align: center;
}
#header .list-02 > li {
display: flex;
flex-grow: 1;
flex-basis: 0%;
justify-content: center;
}
#header .list-02 > li.know > a,
#header .list-02 > li.event > a {
display: flex;
align-items: center;
padding-top: 1.2em;
padding-left: 18px;
height: 100%;
}
#header .list-02 > li.movie > a {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
padding: 1.2em 5px 1.2em 30px;
}
#header .list-02 > li.movie > a .sub {
font-size: 1.2rem;
}
#header .list-02 > li.know > a::before {
width: 10px;
height: 18px;
margin-top: -12px;
}
#header .list-02 > li.event > a::before {
width: 15px;
height: 17px;
margin-top: -10px;
}
#header .list-02 > li.movie > a::before {
width: 17px;
height: 13px;
margin-top: -8px;
margin-left: 7px;
}
#header .list-02 > li.none > a {
padding: 1.2em 0;
}
#header .list-02 > li + li {
position: relative;
}
#header .list-02 > li + li::before {
content: "";
display: block;
width: 1px;
height: 32px;
background-color: #ccc;
position: absolute;
left: 0;
top: 50%;
margin-top: -16px;
}
#header .list-02 > li > a {
padding: 1.885em 0;
}
#header .list-02 > li > a::after {
bottom: -2px;
height: 2px;
}
.top #header {
position: static;
background-color: #fff;
}
}
@media only screen and (max-width: 480px) {
#header .list-02 {
font-size: 1.3rem;
font-feature-settings: "kern", "palt";
}
}
/* ===========================
main
--------------------------- */
#main {
padding-bottom: 40px;
background-color: #fff;
}
.top #main {
background-image: url(/common/images/bg-pattern-01.png);
background-repeat: repeat-y;
background-position: 50% 50%;
background-size: 100% auto;
display: flex;
flex-direction: column;
}
.top #main .lyt-event-01 ~ .area-content.senior {
order: 1;
}
.top #main .lyt-event-01 ~ .area-content.howto {
order: 2;
margin-top: 0;
}
.top #main .area-content.senior {
order: 0;
}
.top #main .area-content.howto {
margin-top: 60px;
}
.live #main {
padding-bottom: 0;
}
@media only screen and (max-width: 480px) {
#main {
padding-bottom: 20px;
}
.top #main {
background-image: url(/common/images/bg-pattern-02.webp);
}
}
/* ===========================
footer
--------------------------- */
#footer {
background-color: #000;
color: #fff;
}
.lyt-footer-01,
.lyt-footer-02 {
padding-left: 20px;
padding-right: 20px;
}
.lyt-footer-01 > .inner,
.lyt-footer-02 > .inner {
max-width: 1280px;
margin: 0 auto;
}
.lyt-footer-01 {
padding-top: 230px;
padding-bottom: 60px;
background: #4f624b url(/common/images/bg-footer-01.webp) no-repeat 32.5% 50%;
background-size: cover;
}
.lyt-footer-01 > .inner {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30px;
background-color: rgba(0, 0, 0, .3);
}
.lyt-footer-01 .list-01 {
display: flex;
max-width: 686px;
margin: 0 35px 0 0;
}
.lyt-footer-01 .list-01 > li {
width: 100%;
}
.lyt-footer-01 .list-01 > li + li {
margin-left: 10px;
}
.lyt-footer-01 .list-01 > li > a {
display: block;
}
.lyt-footer-01 .list-02 {
flex-shrink: 0;
display: flex;
flex-wrap: wrap;
width: 500px;
margin-bottom: 0;
font-size: 1.4rem;
font-feature-settings: "kern", "palt";
letter-spacing: .025em;
}
.lyt-footer-01 .list-02 > li {
margin-top: .5em;
}
.lyt-footer-01 .list-02 > li:nth-child(2n+1) {
width: 47.5%;
padding-right: 5px;
}
.lyt-footer-01 .list-02 > li:nth-child(2n+2) {
width: 52.5%;
padding-left: 5px;
}
.lyt-footer-01 .list-02 > li:nth-child(1), .lyt-footer-01 .list-02 > li:nth-child(2) {
margin-top: 0;
}
.lyt-footer-01 .list-02 > li > a {
color: #fff;
text-decoration: none;
}
.lyt-footer-01 .list-02 > li > a:hover, .lyt-footer-01 .list-02 > li > a:focus, .lyt-footer-01 .list-02 > li > a:active {
text-decoration: underline;
}
.lyt-footer-02 > .inner {
display: flex;
justify-content: space-between;
padding: .75em 0;
}
.lyt-footer-02 .list {
align-self: center;
display: flex;
flex-wrap: wrap;
justify-content: center;
max-width: calc(100% - 400px);
margin: 0 -15px;
font-size: 1.4rem;
font-feature-settings: "kern", "palt";
letter-spacing: .025em;
}
.lyt-footer-02 .list > li {
margin: 0 15px;
}
.lyt-footer-02 .list > li > a {
color: #fff;
text-decoration: none;
}
.lyt-footer-02 .list > li > a:hover, .lyt-footer-02 .list > li > a:focus, .lyt-footer-02 .list > li > a:active {
text-decoration: underline;
}
.lyt-footer-02 .copyright {
align-self: flex-end;
margin-bottom: 0;
font-size: 1.3rem;
text-align: right;
}
@media only screen and (max-width: 1024px) {
.lyt-footer-01 {
padding-top: 200px;
padding-bottom: 50px;
}
.lyt-footer-01 > .inner {
display: block;
padding: 30px;
}
.lyt-footer-01 .list-01 {
margin: 0 auto 30px auto;
}
.lyt-footer-01 .list-02 {
width: auto;
}
.lyt-footer-01 .list-02 > li {
margin-top: 1em;
}
.lyt-footer-01 .list-02 > li:nth-child(2n+1) {
width: auto;
padding-right: inherit;
}
.lyt-footer-01 .list-02 > li:nth-child(2n+2) {
width: auto;
padding-left: inherit;
}
.lyt-footer-01 .list-02 > li:nth-child(3n+1) {
width: calc((100% - .1px) / 3);
padding-right: calc(10px / 1.5);
}
.lyt-footer-01 .list-02 > li:nth-child(3n+2) {
width: calc((100% - .1px) / 3);
padding-left: calc(10px / 3);
padding-right: calc(10px / 3);
}
.lyt-footer-01 .list-02 > li:nth-child(3n+3) {
width: calc((100% - .1px) / 3);
padding-left: calc(10px / 1.5);
}
.lyt-footer-01 .list-02 > li:nth-child(1), .lyt-footer-01 .list-02 > li:nth-child(2), .lyt-footer-01 .list-02 > li:nth-child(3) {
margin-top: 0;
}
.lyt-footer-02 > .inner {
display: block;
}
.lyt-footer-02 .list {
justify-content: space-around;
max-width: inherit;
margin-bottom: 1em;
}
.lyt-footer-02 .list > li {
margin-top: .75em;
}
.lyt-footer-02 .copyright {
text-align: center;
}
}
@media only screen and (max-width: 768px) {
.lyt-footer-01,
.lyt-footer-02 {
padding-left: 15px;
padding-right: 15px;
}
.lyt-footer-01 > .inner {
padding: 30px 20px;
}
.lyt-footer-01 .list-02 {
font-size: 1.3rem;
}
.lyt-footer-02 .list {
font-size: 1.3rem;
}
.lyt-footer-02 .copyright {
font-size: 1.1rem;
}
}
@media only screen and (max-width: 480px) {
.lyt-footer-01 {
padding-top: 180px;
padding-bottom: 40px;
}
.lyt-footer-01 > .inner {
padding: 35px 20px;
}
.lyt-footer-01 .list-01 {
flex-wrap: wrap;
margin: 0 -5px 35px -5px;
}
.lyt-footer-01 .list-01 > li {
width: 50%;
padding: 5px;
}
.lyt-footer-01 .list-01 > li + li {
margin-left: 0;
}
.lyt-footer-01 .list-02 > li {
margin-top: 1.5em;
}
.lyt-footer-01 .list-02 > li:nth-child(3n+1), .lyt-footer-01 .list-02 > li:nth-child(3n+2), .lyt-footer-01 .list-02 > li:nth-child(3n+3) {
width: auto;
padding-left: inherit;
padding-right: inherit;
}
.lyt-footer-01 .list-02 > li:nth-child(2n+1) {
width: 50%;
padding-right: 5px;
}
.lyt-footer-01 .list-02 > li:nth-child(2n+2) {
width: 50%;
padding-left: 5px;
}
.lyt-footer-01 .list-02 > li:nth-child(3) {
margin-top: 1.5em;
}
.lyt-footer-02 .list {
margin-left: -10px;
margin-right: -10px;
}
.lyt-footer-02 .list > li {
margin-left: 10px;
margin-right: 10px;
}
}
/* =====================================
module
------------------------------------- */
.area-content {
display: flow-root;
max-width: 1320px;
margin-left: auto;
margin-right: auto;
padding: .1px 20px;
width: 100%;
}
.area-content::after {
content: "";
clear: both;
display: block;
}
@media only screen and (max-width: 768px) {
.area-content {
padding-left: 15px;
padding-right: 15px;
}
}
.area-contact {
background-color: #f6fbf6;
}
.area-contact > .inner {
max-width: 1320px;
margin: 0 auto;
padding: .1px 20px;
}
.area-contact > .inner > .hdg {
margin: 50px 0;
font-size: 3rem;
font-weight: bold;
text-align: center;
font-feature-settings: "kern", "palt";
}
@media only screen and (max-width: 768px) {
.area-contact > .inner {
padding-left: 15px;
padding-right: 15px;
}
}
.area-gallery {
background-color: #f6fbf6;
}
.area-gallery > .inner {
max-width: 1320px;
margin: 0 auto;
padding: .1px 20px;
}
.area-gallery > .inner > .hdg {
position: relative;
line-height: 1.5;
margin-bottom: 30px;
border-top: 1px dotted #ccc;
padding-top: 50px;
font-size: 3rem;
font-weight: bold;
text-align: center;
}
.area-gallery > .inner > .hdg:first-child {
border-top: none;
}
.area-gallery > .inner > .hdg > span {
position: relative;
display: inline-block;
padding-top: 50px;
}
.area-gallery > .inner > .hdg > span::before {
content: "";
position: absolute;
top: 0;
left: 50%;
display: block;
width: 40px;
height: 40px;
margin-left: -20px;
background: transparent none no-repeat 50% 50%;
background-size: cover;
}
.area-gallery > .inner > .hdg.movie > span {
padding-top: 40px;
}
.area-gallery > .inner > .hdg.movie > span::before {
height: 30px;
background-image: url(/common/images/icon-movie-01.png);
}
.area-gallery > .inner > .hdg.photo > span::before {
background-image: url(/common/images/icon-photo-01.png);
}
.area-gallery > .inner > .hdg + p {
margin: -30px 0 30px 0;
text-align: center;
}
@media only screen and (max-width: 768px) {
.area-gallery > .inner {
padding-left: 15px;
padding-right: 15px;
}
.area-gallery > .inner > .hdg {
margin-bottom: 25px;
padding-top: 40px;
font-size: 2.4rem;
}
.area-gallery > .inner > .hdg + p {
margin: -25px 0 25px 0;
text-align: center;
}
}
.area-lead {
background-repeat: no-repeat;
background-size: cover;
}
.area-lead > .inner {
max-width: 1320px;
margin: 0 auto;
padding: .1px 20px;
}
.area-lead.know-about {
background-color: #e3f1f9;
background-image: url(/common/images/bg-landscape-01.jpg);
background-position: 100% 100%;
}
.area-lead.know-about > .inner {
padding-top: 40px;
padding-bottom: 140px;
}
.area-lead.know-about-production, .area-lead.know-about-training {
background-position: 50% 100%;
}
.area-lead.know-about-production > .inner, .area-lead.know-about-training > .inner {
padding-bottom: 110px;
}
.area-lead.know-about-production {
background-color: #f0f7f9;
background-image: url(/common/images/bg-landscape-02.jpg);
}
.area-lead.know-about-training {
background-color: #e9f2fa;
background-image: url(/common/images/bg-landscape-03.jpg);
}
.area-lead .photo-wrap-01 {
display: flex;
justify-content: space-between;
}
.area-lead .photo-wrap-01 > * {
width: calc(50% - 5px);
}
.area-lead .photo-wrap-01 img {
width: 100%;
}
.area-lead .photo-wrap-02 {
display: flex;
flex-direction: column;
justify-content: space-between;
}
@media only screen and (max-width: 768px) {
.area-lead {
background-size: 720px auto;
}
.area-lead > .inner {
padding-top: 5px;
}
.area-lead.know-about > .inner {
padding-bottom: 100px;
}
.area-lead.know-about-production > .inner, .area-lead.know-about-training > .inner {
padding-bottom: 50px;
}
.area-lead .photo-wrap-01 {
display: block;
}
.area-lead .photo-wrap-01 > * {
width: auto;
}
.area-lead .photo-wrap-01 .photo-wrap-01 {
display: flex;
justify-content: space-between;
}
.area-lead .photo-wrap-01 .photo-wrap-01 > * {
width: calc(50% - 5px);
}
.area-lead .photo-wrap-02 {
display: block;
}
.area-lead .photo-01,
.area-lead .photo-02 {
margin-bottom: 10px;
}
}
.area-form-01 .certificate {
display: flex;
align-items: center;
margin: 50px 0 100px 0;
}
.area-form-01 .certificate > .text {
flex-grow: 1;
margin: 0 20px 0 0;
}
.area-form-01 .certificate > .seal {
flex-shrink: 0;
}
@media only screen and (max-width: 768px) {
.area-form-01 .certificate {
flex-direction: column;
margin: 30px 0 60px 0;
}
.area-form-01 .certificate > .text {
flex-grow: 1;
margin: 0 0 10px 0;
}
}
/* ===========================
layout
--------------------------- */
.lyt-img-01 {
display: flow-root;
margin-bottom: .75em;
}
.lyt-img-01::after {
content: "";
display: block;
clear: both;
}
.lyt-img-01 > .img {
max-width: calc(50% - 20px);
margin: .325em 0 .75em 0;
text-align: center;
}
.lyt-img-01 > .img > .caption {
display: block;
line-height: 1.375;
margin-top: 1em;
font-size: 1.4rem;
}
.lyt-img-01 > .content {
overflow: hidden;
}
.lyt-img-01 > .content .btn-link-01 > a,
.lyt-img-01 > .content .btn-link-01 > button,
.lyt-img-01 > .content .btn-link-01 > span,
.lyt-img-01 > .content .btn-link-02 > a,
.lyt-img-01 > .content .btn-link-02 > button,
.lyt-img-01 > .content .btn-link-02 > span,
.lyt-img-01 > .content .btn-more-01 > a,
.lyt-img-01 > .content .btn-more-01 > button,
.lyt-img-01 > .content .btn-more-01 > span {
min-width: 100%;
}
.lyt-img-01.img-r > .img {
float: right;
margin-left: 40px;
}
.lyt-column-01 .lyt-img-01.img-r > .img,
.lyt-flow-01 .lyt-img-01.img-r > .img,
.lyt-season-01 .lyt-img-01.img-r > .img,
.lyt-schedule-01 .lyt-img-01.img-r > .img {
margin-left: 30px;
}
.lyt-img-01.img-l > .img {
float: left;
margin-right: 40px;
}
.lyt-column-01 .lyt-img-01.img-l > .img,
.lyt-flow-01 .lyt-img-01.img-l > .img,
.lyt-season-01 .lyt-img-01.img-l > .img,
.lyt-schedule-01 .lyt-img-01.img-l > .img {
margin-right: 30px;
}
@media only screen and (max-width: 1024px) {
.lyt-img-01 > .img {
max-width: calc(50% - 15px);
}
.lyt-img-01.img-r > .img {
margin-left: 30px;
}
.lyt-column-01 .lyt-img-01.img-r > .img,
.lyt-flow-01 .lyt-img-01.img-r > .img,
.lyt-season-01 .lyt-img-01.img-r > .img,
.lyt-schedule-01 .lyt-img-01.img-r > .img {
margin-left: 20px;
}
.lyt-img-01.img-l > .img {
margin-right: 30px;
}
.lyt-column-01 .lyt-img-01.img-l > .img,
.lyt-flow-01 .lyt-img-01.img-l > .img,
.lyt-season-01 .lyt-img-01.img-l > .img,
.lyt-schedule-01 .lyt-img-01.img-l > .img {
margin-right: 20px;
}
}
@media only screen and (max-width: 768px) {
.lyt-img-01 {
display: flex;
flex-direction: column;
width: 100%;
}
.lyt-flow-01 .lyt-img-01,
.lyt-season-01 .lyt-img-01,
.lyt-schedule-01 .lyt-img-01 {
display: block;
}
.lyt-img-01::after {
content: none;
}
.lyt-img-01 > .img {
order: 2;
max-width: inherit;
margin-top: 0;
}
.lyt-img-01 > .content {
order: 1;
}
.lyt-img-01.inverse {
flex-direction: column-reverse;
}
.lyt-img-01.inverse > .content {
margin-top: .75em;
}
.lyt-img-01.img-r > .img {
float: none;
margin-left: 0;
}
.lyt-column-01 .lyt-img-01.img-r > .img,
.lyt-flow-01 .lyt-img-01.img-r > .img,
.lyt-season-01 .lyt-img-01.img-r > .img,
.lyt-schedule-01 .lyt-img-01.img-r > .img {
margin-left: 0;
}
.lyt-img-01.img-l > .img {
float: none;
margin-right: 0;
}
.lyt-column-01 .lyt-img-01.img-l > .img,
.lyt-flow-01 .lyt-img-01.img-l > .img,
.lyt-season-01 .lyt-img-01.img-l > .img,
.lyt-schedule-01 .lyt-img-01.img-l > .img {
margin-right: 0;
}
}
.lyt-img-02 {
text-align: center;
}
.lyt-img-02 > .caption {
display: block;
line-height: 1.375;
margin-top: 1em;
font-size: 1.4rem;
}
.lyt-lead-01 {
line-height: 1.5;
margin: 60px 0 50px 0;
text-align: center;
}
.lyt-lead-01 .lead {
color: #52a127;
font-size: 2.8rem;
font-weight: bold;
}
@media only screen and (max-width: 768px) {
.lyt-lead-01 {
margin: 40px 0;
}
.lyt-lead-01 .lead {
font-size: 2.4rem;
}
.lyt-lead-01 p:not(.lead) {
text-align: left;
}
}
@media only screen and (max-width: 480px) {
.lyt-lead-01 {
margin: 30px 0 35px 0;
}
.lyt-lead-01 .lead {
font-size: 2.2rem;
}
}
.lyt-column-01 {
display: flex;
flex-wrap: wrap;
margin: 0 -20px;
}
.lyt-column-01 > .column {
padding: 0 20px;
}
.lyt-column-01.col2 > .column {
width: 50%;
}
.lyt-column-01.col3 > .column {
width: calc((100% - .1px) / 3);
}
.lyt-column-01.col4 > .column {
width: 25%;
}
.lyt-column-01.stretch > .column {
display: flex;
}
.lyt-column-01.stretch > .column > *:first-child {
width: 100%;
}
.lyt-column-01.stretch > .column > *:not(:first-child) {
display: none;
}
.lyt-column-01 .btn-link-01 > a,
.lyt-column-01 .btn-link-01 > button,
.lyt-column-01 .btn-link-01 > span,
.lyt-column-01 .btn-link-02 > a,
.lyt-column-01 .btn-link-02 > button,
.lyt-column-01 .btn-link-02 > span,
.lyt-column-01 .btn-more-01 > a,
.lyt-column-01 .btn-more-01 > button,
.lyt-column-01 .btn-more-01 > span {
min-width: 100%;
}
@media only screen and (max-width: 960px) {
.lyt-column-01 {
margin: 0 -15px;
}
.lyt-column-01 > .column {
padding: 0 15px;
}
.lyt-column-01.col4 > .column {
width: calc((100% - .1px) / 3);
}
}
@media only screen and (max-width: 720px) {
.lyt-column-01 {
margin: 0 -10px;
}
.lyt-column-01 > .column {
padding: 0 10px;
}
.lyt-column-01.col3 > .column, .lyt-column-01.col4 > .column {
width: 50%;
}
}
@media only screen and (max-width: 480px) {
.lyt-column-01 {
margin: 0;
}
.lyt-column-01 > .column {
padding: 0;
}
.lyt-column-01.col2 > .column, .lyt-column-01.col3 > .column, .lyt-column-01.col4 > .column {
width: 100%;
}
.lyt-column-01.stretch > .column {
display: block;
}
.lyt-column-01.stretch > .column > *:first-child {
width: auto;
}
}
.lyt-column-01.blog {
margin: 0 -15px;
}
.lyt-column-01.blog > .column {
padding: 0 15px 30px;
}
.lyt-column-01.blog > .column > a {
display: flex;
flex-direction: column-reverse;
text-decoration: none;
}
.lyt-column-01.blog > .column > a > .img {
height: 240px;
display: flex;
align-items: center;
justify-content: center;
}
.lyt-column-01.blog > .column > a > .img img {
max-height: 100%;
max-width: 100%;
}
.lyt-column-01.blog > .column > a > .text {
margin: 13px 0 0;
line-height: 1.6;
}
.lyt-column-01.blog > .column > a > .text > .title {
color: #000;
margin-bottom: 10px;
}
.lyt-column-01.blog > .column > a > .text > .date {
display: block;
color: #999;
font-size: 1.5rem;
}
.lyt-column-01.blog > .column > a:hover .text .date {
text-decoration: none;
}
.lyt-column-01.blog > .column > .label {
display: inline-block;
width: auto;
max-width: 100%;
padding: 5px 10px;
margin-top: 10px;
border: 1px solid #aaa;
border-radius: 25px;
font-size: 14px;
font-weight: bold;
color: #000;
}
.lyt-column-01.blog > .column > .label > .wrap {
display: flex;
}
.lyt-column-01.blog > .column > .label > .wrap img {
display: flex;
align-self: center;
max-height: 20px;
margin-right: 10px;
}
.lyt-column-01.blog > .column > .label:hover {
text-decoration: underline;
}
.lyt-column-01.blog + .btn-link-01 {
margin-bottom: 10rem;
}
.lyt-column-01.blog > .column > a > .img.-none .icon {
margin: 0 5px 0 0;
width: 100%;
max-width: 55px;
}
.lyt-column-01.blog > .column > a > .img.-none .name {
font-family: "Hiragino Kaku Gothic Pro", "\30d2\30e9\30ae\30ce\89d2\30b4 Pro", Meiryo, "\30e1\30a4\30ea\30aa", Arial, sans-serif;
font-style: italic;
font-size: 2.8rem;
font-weight: bold;
max-width: 70%;
margin: 0;
color: #000;
}
@media only screen and (max-width: 960px) {
.lyt-column-01.blog {
margin: 0 -15px;
}
}
@media only screen and (max-width: 768px) {
.lyt-column-01.blog {
margin: 0 -10px;
}
.lyt-column-01.blog > .column {
padding: 0 10px 30px;
}
.lyt-column-01.blog + .btn-link-01 {
margin-bottom: 50px;
}
}
@media only screen and (max-width: 480px) {
.lyt-column-01.blog {
margin: 0;
}
.lyt-column-01.blog > .column {
padding: 0 0 30px;
}
}
.lyt-map-01 {
display: flex;
margin-bottom: 70px;
}
.lyt-map-01 > .content > .hdg-section-04 {
margin-top: 0;
}
.lyt-map-01.map-r > .map {
margin-left: 30px;
}
.lyt-map-01.map-l {
flex-direction: row-reverse;
}
.lyt-map-01.map-l > .map {
margin-right: 30px;
}
.lyt-map-01 > .map {
width: 50%;
padding-top: 25%;
overflow: hidden;
position: relative;
flex-shrink: 0;
}
.lyt-map-01 > .map > iframe {
border: 0;
bottom: 0;
height: 100%;
left: 0;
position: absolute;
right: 0;
top: 0;
width: 100%;
}
.lyt-map-01 > .content {
flex-grow: 1;
}
@media only screen and (max-width: 768px) {
.lyt-map-01 {
display: block;
}
.lyt-map-01 > .content > .hdg-section-04 {
margin-top: 35px;
}
.lyt-map-01.map-r > .map, .lyt-map-01.map-l > .map {
margin: 0;
}
.lyt-map-01 > .map {
width: 100%;
height: auto;
padding-top: 50%;
}
}
.lyt-box-01 {
margin-bottom: 40px;
border: 1px solid #52a127;
padding: 26px 29px;
background-color: #fff;
}
.lyt-box-01 > *:last-child {
margin-bottom: 0;
}
.lyt-box-01 > .lyt-img-01:last-child > .img {
margin-bottom: 0;
}
.lyt-box-01 > .lyt-img-01:last-child > .content > *:last-child {
margin-bottom: 0;
}
.lyt-box-01 > .hdg {
line-height: 1.5;
margin: -26px -29px 26px -29px;
padding: 13px 29px;
background-color: #52a127;
color: #fff;
font-size: 2.2rem;
font-weight: bold;
}
@media only screen and (max-width: 768px) {
.lyt-box-01 {
margin-bottom: 30px;
padding: 16px 19px;
}
.lyt-box-01 > .hdg {
margin: -16px -19px 16px -19px;
padding: 13px 19px;
font-size: 1.8rem;
}
.lyt-box-01 > .lyt-img-01:last-child > .content > *:last-child {
margin-bottom: .75em;
}
}
.lyt-box-02,
.lyt-box-03,
.lyt-box-05 {
margin-bottom: 20px;
padding: 20px 25px;
background-color: #eee;
}
.lyt-box-02 > *:last-child,
.lyt-box-03 > *:last-child,
.lyt-box-05 > *:last-child {
margin-bottom: 0;
}
.lyt-box-02 > *.lyt-img-01 > .img,
.lyt-box-03 > *.lyt-img-01 > .img,
.lyt-box-05 > *.lyt-img-01 > .img {
margin-bottom: 0;
}
.lyt-box-02 > .hdg,
.lyt-box-03 > .hdg,
.lyt-box-05 > .hdg {
line-height: 1.5;
margin-top: .125em;
margin-bottom: .75em;
font-size: 2rem;
font-weight: bold;
}
.lyt-box-02 > .hdg > b,
.lyt-box-03 > .hdg > b,
.lyt-box-05 > .hdg > b {
color: #52a127;
}
.lyt-box-02 > p >.icn::after,
.lyt-box-03 > p >.icn::after,
.lyt-box-05 > p >.icn::after {
position: absolute;
content: '';
width: 25px;
height: 25px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
top: 0;
right: 0;
background-image: url('/common/images/icon-kanko-01.png');
}
.lyt-box-02 > p >.icn,
.lyt-box-03 > p >.icn,
.lyt-box-05 > p >.icn {
position: relative;
display: inline-block;
padding-right: 30px;
}
.lyt-box-03 {
background-color: #edf7ed;
}
.lyt-box-05 {
background-color: #d0e5f4;
background-image: url(/common/images/bg-box-05-01.jpg);
background-position: bottom right;
background-repeat: no-repeat;
background-size: 100% auto;
padding-bottom: 13.5%;
position: relative;
}
.lyt-box-05::before {
content: "";
display: block;
position: absolute;
top: 3px;
left: 3px;
right: 3px;
bottom: 3px;
border: solid 1px #fff;
}
@media only screen and (max-width: 768px) {
.lyt-box-02,
.lyt-box-03,
.lyt-box-05 {
padding: 15px 20px;
}
.lyt-box-02 > .hdg,
.lyt-box-03 > .hdg,
.lyt-box-05 > .hdg {
font-size: 1.8rem;
}
.lyt-box-05 {
background-size: 150% auto;
padding-bottom: 17.5%;
}
}
@media only screen and (max-width: 480px) {
.lyt-box-05 {
background-image: url(/common/images/bg-box-05-02.jpg);
background-color: #e7f1fa;
background-size: 100% auto;
padding-bottom: 55%;
}
}
.lyt-box-04 {
padding: 50px 25px;
background-color: #fff;
}
.lyt-box-04 + .lyt-box-04 {
padding-top: 0;
}
.lyt-box-04 + .lyt-box-04::before {
content: "";
display: block;
width: 100%;
height: 50px;
border-top: 1px dotted #ccc;
}
.lyt-box-04 > [class^="hdg-"]:first-child {
margin-top: 0;
}
.lyt-box-04 > *:last-child {
margin-bottom: 0;
}
.lyt-box-04 > *.lyt-img-01 > .img {
margin-bottom: 0;
}
@media only screen and (max-width: 768px) {
.lyt-box-04 {
padding: 15px 20px;
}
}
.lyt-senior-01 {
display: flex;
align-items: center;
line-height: 1.5;
margin: 25px 0 50px 0;
padding: 30px;
background: #edf7ed url(/common/images/bg-senior-01.png) no-repeat 100% 100%;
background-size: cover;
}
.lyt-senior-01 > .img {
min-width: 210px;
width: 35.59322%;
text-align: center;
}
.lyt-senior-01 > .text {
flex-grow: 1;
margin-left: 40px;
}
.lyt-senior-01 > .text > *:last-child {
margin-bottom: 0;
}
.lyt-senior-01 > .text .lead {
margin-bottom: 1em;
font-size: 2.8rem;
font-weight: bold;
}
.lyt-senior-01 > .text .lead b,
.lyt-senior-01 > .text .lead em {
background-image: linear-gradient(to bottom, transparent 0%, transparent 62.5%, #bde0aa 62.5%, #bde0aa 100%);
}
.lyt-senior-01 > .text .name {
font-size: 1.6rem;
}
.lyt-senior-01 > .text .name .label {
position: relative;
top: -.25em;
display: inline-block;
min-width: 90px;
margin-right: 10px;
padding: .25em 5px;
background-color: #999;
color: #fff;
font-size: 1.4rem;
font-weight: bold;
text-align: center;
}
.lyt-senior-01 > .text .name .label.type-01 {
background-color: #4fb8d3;
}
.lyt-senior-01 > .text .name .label.type-02 {
background-color: #eb8ab6;
}
.lyt-senior-01 > .text .name .label.type-03 {
background-color: #ecaa1c;
}
.lyt-senior-01 > .text .name .label.type-04 {
background-color: #a4c520;
}
.lyt-senior-01 > .text .name b {
display: inline-block;
margin-right: 5px;
font-size: 2.2rem;
font-weight: normal;
}
@media only screen and (max-width: 1024px) {
.lyt-senior-01 > .text .lead {
font-size: 2.6rem;
}
}
@media only screen and (max-width: 768px) {
.lyt-senior-01 {
display: block;
margin-bottom: 40px;
padding: 20px;
background-position: 0 50%;
}
.lyt-senior-01 > .img {
min-width: inherit;
width: 100%;
}
.lyt-senior-01 > .text {
margin-top: 15px;
margin-left: 0;
}
.lyt-senior-01 > .text .lead {
margin-bottom: .5em;
font-size: 2.4rem;
}
.lyt-senior-01 > .text .lead b,
.lyt-senior-01 > .text .lead em {
background-image: none;
}
.lyt-senior-01 > .text .name .label {
top: -.2em;
min-width: 66px;
font-size: 1.2rem;
}
.lyt-senior-01 > .text .name b {
font-size: 2rem;
}
}
@media only screen and (max-width: 480px) {
.lyt-senior-01 > .text .lead {
font-size: 2.2rem;
}
}
.lyt-senior-02 {
line-height: 1.5;
margin: 40px 0 70px 0;
padding: 30px;
background-color: #edf7ed;
}
.lyt-senior-02 > .hdg {
display: flow-root;
margin-bottom: 1.25em;
border-bottom: 1px dotted #ccc;
padding-bottom: 30px;
}
.lyt-senior-02 > .hdg::after {
content: "";
display: block;
clear: both;
}
.lyt-senior-02 > .hdg > .img {
float: left;
width: 150px;
height: 150px;
overflow: hidden;
margin-right: 30px;
border-radius: 50%;
}
.lyt-senior-02 > .hdg > .text {
overflow: hidden;
}
.lyt-senior-02 > .hdg > .text > *:last-child {
margin-bottom: 0;
}
.lyt-senior-02 > .hdg > .text .subhdg {
margin-top: .75em;
font-size: 1.8rem;
font-style: italic;
}
.lyt-senior-02 > .hdg > .text .lead {
font-size: 2.2rem;
font-weight: bold;
}
.lyt-senior-02 > .hdg > .text .lead b,
.lyt-senior-02 > .hdg > .text .lead em {
background-image: linear-gradient(to bottom, transparent 0%, transparent 62.5%, #bde0aa 62.5%, #bde0aa 100%);
}
.lyt-senior-02 .list-desc-01 {
margin-bottom: 0;
}
.lyt-senior-02 .list-desc-01 dt {
font-size: 1.8rem;
}
@media only screen and (max-width: 768px) {
.lyt-senior-02 {
margin-bottom: 40px;
padding: 20px;
background-color: #edf7ed;
}
.lyt-senior-02 > .hdg > .img {
float: none;
margin: 0 auto;
}
.lyt-senior-02 > .hdg > .text {
text-align: center;
}
.lyt-senior-02 > .hdg > .text .subhdg {
font-size: 1.6rem;
}
.lyt-senior-02 > .hdg > .text .lead {
font-size: 2rem;
}
}
.lyt-faq-01 {
line-height: 1.5;
}
.lyt-faq-01 > .question {
position: relative;
display: flex;
align-items: center;
border: 1px solid #ccc;
padding: 25px 15px 25px 70px;
background-color: #fff;
color: #000;
}
.lyt-faq-01 > .question > .mark {
position: absolute;
top: 50%;
left: 15px;
display: flex;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
margin-top: -20px;
background-color: #52a127;
color: #fff;
font-size: 2.2rem;
font-weight: bold;
}
.lyt-faq-01 > .question[aria-expanded] {
padding-right: 50px;
transition: background-color .2s, color .2s;
}
.lyt-faq-01 > .question[aria-expanded] > .mark {
transition: background-color .2s, color .2s;
}
.lyt-faq-01 > .question[aria-expanded]::before, .lyt-faq-01 > .question[aria-expanded]::after {
content: "";
position: absolute;
top: 50%;
right: 15px;
display: block;
width: 25px;
height: 3px;
margin-top: -1.5px;
background-color: #52a127;
transition: background-color .2s, opacity .2s;
}
.lyt-faq-01 > .question[aria-expanded]::after {
transform: rotate(90deg);
}
.lyt-faq-01 > .question[aria-expanded]:hover, .lyt-faq-01 > .question[aria-expanded]:focus, .lyt-faq-01 > .question[aria-expanded]:active {
text-decoration: underline;
}
.lyt-faq-01 > .question[aria-expanded="true"] {
background-color: #52a127;
color: #fff;
}
.lyt-faq-01 > .question[aria-expanded="true"] > .mark {
background-color: #fff;
color: #52a127;
}
.lyt-faq-01 > .question[aria-expanded="true"]::before, .lyt-faq-01 > .question[aria-expanded="true"]::after {
background-color: #fff;
}
.lyt-faq-01 > .question[aria-expanded="true"]::after {
opacity: 0;
}
.lyt-faq-01 > .answer {
position: relative;
display: none;
align-items: center;
border: 1px solid #ccc;
border-top: none;
padding: 25px 15px 25px 70px;
background-color: #eee;
}
.static .lyt-faq-01 > .answer {
display: flex;
}
.lyt-faq-01 > .answer[aria-expanded="true"] {
display: flex;
}
.lyt-faq-01 > .answer > .mark {
position: absolute;
top: 50%;
left: 15px;
display: flex;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
margin-top: -20px;
border: 1px solid #52a127;
background-color: #fff;
color: #52a127;
font-size: 2.2rem;
font-weight: bold;
}
.lyt-faq-01 > .answer > .text > *:last-child {
margin-bottom: 0;
}
.lyt-guardian-01 {
display: flex;
margin: 50px 0;
border: 1px solid #ccc;
padding: 19px;
background: #fff url(/common/images/bg-guardian-01.jpg) no-repeat 100% 62.5%;
}
.lyt-guardian-01 > .hdg {
flex-shrink: 0;
display: flex;
align-items: center;
line-height: 1.5;
padding: .5em 20px;
background-color: #52a127;
color: #fff;
font-size: 2rem;
font-weight: bold;
text-align: center;
}
.lyt-guardian-01 > .hdg > span {
white-space: nowrap;
}
.lyt-guardian-01 > .text {
margin: 0 20px;
}
.lyt-guardian-01 > .text > *:last-child {
margin-bottom: 0;
}
.lyt-guardian-01 > .link {
flex-shrink: 0;
display: flex;
align-items: center;
}
.lyt-guardian-01 > .link .btn-link-01,
.lyt-guardian-01 > .link .btn-link-02,
.lyt-guardian-01 > .link .btn-more-01 {
margin-bottom: 0;
}
@media only screen and (max-width: 1024px) {
.lyt-guardian-01 {
display: block;
}
.lyt-guardian-01 > .hdg {
display: block;
padding: 15px 5px;
}
.lyt-guardian-01 > .hdg > span {
white-space: inherit;
}
.lyt-guardian-01 > .text {
margin: 20px 0 0 0;
}
.lyt-guardian-01 > .link {
display: block;
margin-top: 20px;
}
}
@media only screen and (max-width: 768px) {
.lyt-guardian-01 {
background-position: 100% 100%;
}
.lyt-guardian-01 > .hdg {
font-size: 1.8rem;
}
.lyt-guardian-01 > .text,
.lyt-guardian-01 > .link {
margin-top: 15px;
}
}
@media only screen and (max-width: 480px) {
.lyt-guardian-01 {
background-position: 75% 100%;
}
}
.area-news-01 {
display: flow-root;
margin-bottom: 50px;
background: #f0f8f0;
}
.area-news-01::after {
content: "";
clear: both;
display: block;
}
.area-news-01 > .inner {
max-width: 1280px;
padding: 0 15px;
margin: 0 auto;
}
.area-news-01 > .inner > .hdg {
margin: 80px 0 32px;
font-size: 3rem;
font-weight: bold;
text-align: center;
line-height: 1.25;
}
.area-news-01 > .inner > .list {
max-width: 1024px;
margin: 0 auto 40px;
font-size: 1.6rem;
font-weight: bold;
}
.area-news-01 > .inner > .list > li > a,
.area-news-01 > .inner > .list > li > span {
width: 100%;
padding: 20px 15px;
border-top: 2px solid #dde1dd;
transition: border-color .2s, box-shadow .2s;
}
.area-news-01 > .inner > .list > li:last-child > a {
border-bottom: 2px solid #dde1dd;
transition: border-color .2s;
}
.area-news-01 > .inner > .list > li > a,
.area-news-01 > .inner > .list > li > span {
display: inline-flex;
color: #000;
text-decoration: none;
}
.area-news-01 > .inner > .list > li > a > .date,
.area-news-01 > .inner > .list > li > span > .date {
flex-shrink: 0;
width: 130px;
color: #52a127;
}
.area-news-01 > .inner > .list > li > a > .text,
.area-news-01 > .inner > .list > li > span > .text {
position: relative;
transition: color .2s;
}
.area-news-01 > .inner > .list > li > a > .text {
padding-left: 25px;
}
.area-news-01 > .inner > .list > li > a > .text::before {
content: "";
position: absolute;
top: .625em;
left: 2px;
display: block;
width: 8px;
height: 8px;
border-top: 2px solid #52a127;
border-right: 2px solid #52a127;
transform: translateX(-50%) rotate(45deg);
}
.area-news-01 > .inner > .list > li > a:hover, .area-news-01 > .inner > .list > li > a:focus, .area-news-01 > .inner > .list > li > a:active {
border-color: #f0f8f0;
box-shadow: 0 0 .5em rgba(0, 0, 0, .25);
}
.area-news-01 > .inner > .list > li > a:hover > .text, .area-news-01 > .inner > .list > li > a:focus > .text, .area-news-01 > .inner > .list > li > a:active > .text {
color: #52a127;
}
@media only screen and (max-width: 768px) {
.area-news-01 > .inner > .hdg {
float: none;
width: auto;
margin: 65px auto 40px;
font-size: 2.4rem;
}
.area-news-01 > .inner > .list {
margin-left: 0;
font-size: 1.6rem;
}
.area-news-01 > .inner > .list > li > a {
padding: 20px 0;
}
.area-news-01 > .inner > .list > li > a > .date,
.area-news-01 > .inner > .list > li > span > .date {
width: 100px;
}
.area-news-01 > .inner > .list > li > a > .text::before,
.area-news-01 > .inner > .list > li > span > .text::before {
top: .6em;
width: 7px;
height: 7px;
}
.area-news-01 > .inner > .list > li > a > .text {
padding-left: 18px;
}
}
@media only screen and (max-width: 480px) {
.area-news-01 > .inner > .list > li > a,
.area-news-01 > .inner > .list > li > span {
flex-direction: column;
}
}
.lyt-youtube-01 {
position: relative;
width: 100%;
padding-top: 56.25%;
}
.lyt-youtube-01 > iframe {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
}
.lyt-youtube-02 {
width: 100%;
max-width: 800px;
margin: 0 auto;
}
.lyt-youtube-02 > .movie {
position: relative;
padding-top: 56.25%;
}
.lyt-youtube-02 > .movie > iframe {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
}
.lyt-flow-01 {
position: relative;
margin: 50px 0;
padding: .1px 0 .1px 165px;
}
.lyt-flow-01 + .lyt-flow-01 {
margin-top: -50px;
}
.lyt-flow-01 .stage {
position: absolute;
top: 0;
left: 0;
bottom: 0;
z-index: 1;
width: 120px;
line-height: 1.5;
background-color: #eee;
}
.lyt-flow-01 .stage > span {
position: absolute;
top: 28px;
left: 50%;
display: block;
color: #999;
font-size: 2.4rem;
font-weight: bold;
white-space: nowrap;
-ms-writing-mode: tb-rl;
-webkit-writing-mode: vertical-rl;
writing-mode: vertical-rl;
transform: translateX(-50%);
}
.lyt-flow-01 .phase {
position: relative;
line-height: 1.5;
margin: 28px 0 16px 0;
border: 2px solid #52a127;
padding: 12px 18px;
background-color: #fff;
color: #52a127;
font-size: 2rem;
font-weight: bold;
}
.lyt-flow-01 .phase::before, .lyt-flow-01 .phase::after {
content: "";
position: absolute;
top: 50%;
display: block;
}
.lyt-flow-01 .phase::before {
left: -18px;
width: 0;
height: 0;
margin-top: -6px;
border-width: 6px 18px 6px 0;
border-style: solid;
border-color: transparent #52a127 transparent transparent;
}
.lyt-flow-01 .phase::after {
left: -13px;
width: 0;
height: 0;
margin-top: -6px;
border-width: 6px 18px 6px 0;
border-style: solid;
border-color: transparent #fff transparent transparent;
}
.lyt-flow-01 .phase > span {
position: relative;
top: -.15em;
display: inline-block;
margin-left: 5px;
padding: .25em .5em;
background-color: #eee;
font-size: 1.4rem;
}
.lyt-flow-01 .method {
margin: 20px 0 16px 0;
color: #52a127;
font-size: 2.4rem;
font-weight: bold;
}
.lyt-flow-01.flow-01 .stage {
background-color: #fce1ed;
}
.lyt-flow-01.flow-01 .stage > span {
color: #eb8ab6;
}
.lyt-flow-01.flow-02 .stage {
background-color: #e8e9f3;
background-image: linear-gradient(to bottom, #fce1ed 0%, #d3f1f8 62.5%, #d3f1f8 100%);
}
.lyt-flow-01.flow-02 .stage > span {
color: #9da1c5;
}
.lyt-flow-01.flow-03 .stage {
background-color: #d3f1f8;
}
.lyt-flow-01.flow-03 .stage > span {
color: #4fb8d3;
}
.lyt-flow-01.flow-04 .stage {
background-color: #e7f2e4;
background-image: linear-gradient(to bottom, #d3f1f8 0%, #faf2cf 62.5%, #faf2cf 100%);
}
.lyt-flow-01.flow-04 .stage > span {
color: #9eb178;
}
.lyt-flow-01.flow-05 .stage {
background-color: #faf2cf;
}
.lyt-flow-01.flow-05 .stage > span {
color: #ecaa1c;
}
.lyt-flow-01.flow-03 .stage::before, .lyt-flow-01.flow-05 .stage::before {
content: "";
position: absolute;
top: -60px;
left: 50%;
z-index: 2;
display: block;
width: 60px;
height: 60px;
border-right: 3px solid #fff;
border-bottom: 3px solid #fff;
transform: translateX(-50%) rotate(45deg) skew(-30deg, -30deg);
}
.lyt-flow-01.flow-05 .stage::after {
content: "";
position: absolute;
bottom: -36px;
left: 50%;
z-index: 2;
display: block;
width: 90px;
height: 90px;
border-right: 30px solid #fff;
border-bottom: 30px solid #fff;
transform: translateX(-50%) rotate(45deg) skew(-30deg, -30deg);
}
@media only screen and (max-width: 1024px) {
.lyt-flow-01 {
padding-left: 145px;
}
.lyt-flow-01 .stage {
width: 100px;
}
.lyt-flow-01 .stage > span {
font-size: 2.2rem;
}
.lyt-flow-01 .method {
font-size: 2.2rem;
}
}
@media only screen and (max-width: 768px) {
.lyt-flow-01 {
margin: 40px 0;
padding-left: 90px;
}
.lyt-flow-01 + .lyt-flow-01 {
margin-top: -40px;
}
.lyt-flow-01 .stage {
width: 70px;
}
.lyt-flow-01 .stage > span {
top: 20px;
font-size: 2rem;
}
.lyt-flow-01 .phase {
margin: 20px 0 12px 0;
padding: 8px 14px;
font-size: 1.8rem;
}
.lyt-flow-01 .phase::before, .lyt-flow-01 .phase::after {
margin-top: -5px;
border-width: 5px 16px 5px 0;
}
.lyt-flow-01 .phase::before {
left: -16px;
}
.lyt-flow-01 .phase::after {
left: -10px;
}
.lyt-flow-01 .phase > span {
top: -.15em;
margin-left: 5px;
padding: .25em .5em;
font-size: 1.2rem;
}
.lyt-flow-01 .method {
margin: 12px 0;
font-size: 2rem;
}
.lyt-flow-01.flow-03 .stage::before, .lyt-flow-01.flow-05 .stage::before {
top: -55px;
width: 50px;
height: 50px;
transform: translateX(-50%) rotate(45deg) skew(-20deg, -20deg);
}
.lyt-flow-01.flow-05 .stage::after {
bottom: -30px;
width: 70px;
height: 70px;
transform: translateX(-50%) rotate(45deg) skew(-20deg, -20deg);
}
.lyt-flow-01 .lyt-img-01 {
display: block;
}
.lyt-flow-01 .lyt-img-01 > .img {
max-width: inherit;
}
.lyt-flow-01 .lyt-img-01.img-r > .img {
float: none;
margin-left: 0;
}
.lyt-flow-01 .lyt-img-01.img-l > .img {
float: none;
margin-right: 0;
}
}
@media only screen and (max-width: 480px) {
.lyt-flow-01 {
padding-left: 60px;
}
.lyt-flow-01 .stage {
width: 40px;
}
.lyt-flow-01 .stage > span {
font-size: 1.8rem;
}
.lyt-flow-01 .method {
font-size: 1.8rem;
}
.lyt-flow-01.flow-03 .stage::before, .lyt-flow-01.flow-05 .stage::before {
top: -45px;
width: 30px;
height: 30px;
border-width: 2px;
transform: translateX(-50%) rotate(45deg) skew(-10deg, -10deg);
}
.lyt-flow-01.flow-05 .stage::after {
bottom: -10px;
width: 45px;
height: 45px;
border-width: 15px;
transform: translateX(-50%) rotate(45deg) skew(-10deg, -10deg);
}
}
.lyt-season-01 {
position: relative;
margin: 40px 0;
padding: .1px 0 30px 165px;
}
.lyt-season-01 + .lyt-season-01 {
margin-top: -40px;
}
.lyt-season-01::before {
content: "";
position: absolute;
top: 0;
left: 60px;
bottom: 0;
z-index: 1;
display: block;
width: 3px;
background-color: #ccc;
transform: translateX(-50%);
}
.lyt-season-01 .season {
position: absolute;
top: 0;
left: 0;
z-index: 2;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 120px;
height: 120px;
line-height: 1.2;
border-radius: 50%;
background-color: #eee;
color: #999;
font-size: 3.6rem;
font-weight: bold;
text-align: center;
}
.lyt-season-01 .season > span {
font-size: 1.6rem;
}
.lyt-season-01 .work {
line-height: 1.5;
margin: 16px 0;
font-weight: bold;
}
.lyt-season-01 .work .label {
position: relative;
top: -.125em;
display: inline-block;
margin-right: .5em;
border: 1px solid #999;
padding: .125em 5px;
font-size: 1.6rem;
}
.lyt-season-01 .work .text {
font-size: 2.4rem;
}
.lyt-season-01.spring .season {
background-color: #fdf0f6;
color: #eb8ab6;
}
.lyt-season-01.spring .work {
color: #eb8ab6;
}
.lyt-season-01.spring .work .label {
border-color: #eb8ab6;
}
.lyt-season-01.summer .season {
background-color: #f2f8ef;
color: #52a127;
}
.lyt-season-01.summer .work {
color: #52a127;
}
.lyt-season-01.summer .work .label {
border-color: #52a127;
}
.lyt-season-01.autumn .season {
background-color: #fcf8e7;
color: #ecaa1c;
}
.lyt-season-01.autumn .work {
color: #ecaa1c;
}
.lyt-season-01.autumn .work .label {
border-color: #ecaa1c;
}
.lyt-season-01.winter .season {
background-color: #e9f8fb;
color: #4fb8d3;
}
.lyt-season-01.winter .work {
color: #4fb8d3;
}
.lyt-season-01.winter .work .label {
border-color: #4fb8d3;
}
@media only screen and (max-width: 1024px) {
.lyt-season-01 {
padding: .1px 0 25px 135px;
}
.lyt-season-01::before {
left: 50px;
}
.lyt-season-01 .season {
width: 100px;
height: 100px;
font-size: 3.2rem;
}
.lyt-season-01 .season > span {
font-size: 1.4rem;
}
}
@media only screen and (max-width: 768px) {
.lyt-season-01 {
margin: 30px 0;
padding: .1px 0 20px 100px;
}
.lyt-season-01 + .lyt-season-01 {
margin-top: -30px;
}
.lyt-season-01::before {
left: 40px;
width: 2px;
}
.lyt-season-01 .season {
width: 80px;
height: 80px;
font-size: 2.8rem;
}
.lyt-season-01 .season > span {
font-size: 1.2rem;
}
.lyt-season-01 .work {
margin-top: 12px;
}
.lyt-season-01 .work .label {
position: static;
margin-right: 0;
font-size: 1.4rem;
}
.lyt-season-01 .work .text {
display: block;
margin-top: .125em;
font-size: 2rem;
}
}
@media only screen and (max-width: 480px) {
.lyt-season-01 {
margin: 20px 0;
padding: .1px 0 15px 75px;
}
.lyt-season-01 + .lyt-season-01 {
margin-top: -20px;
}
.lyt-season-01::before {
left: 30px;
}
.lyt-season-01 .season {
width: 60px;
height: 60px;
font-size: 2.4rem;
}
.lyt-season-01 .season > span {
font-size: 1rem;
}
.lyt-season-01 .work {
margin-top: 8px;
}
.lyt-season-01 .work .label {
font-size: 1.2rem;
}
.lyt-season-01 .work .text {
font-size: 1.8rem;
}
}
.lyt-schedule-01 {
position: relative;
margin: 40px 0;
padding: .1px 0 30px 165px;
}
.lyt-schedule-01 + .lyt-schedule-01 {
margin-top: -40px;
}
.lyt-schedule-01::before {
content: "";
position: absolute;
top: 0;
left: 60px;
bottom: 0;
z-index: 1;
display: block;
width: 3px;
background-color: #ccc;
transform: translateX(-50%);
}
.lyt-schedule-01 .time {
position: absolute;
top: 0;
left: 0;
z-index: 2;
display: block;
width: 120px;
line-height: 1.5;
padding: .3125em 5px;
background-color: #52a127;
color: #fff;
text-align: center;
}
.lyt-schedule-01 .time > span {
position: relative;
display: inline-block;
padding-left: 24px;
font-size: 2rem;
font-weight: bold;
}
.lyt-schedule-01 .time > span::before, .lyt-schedule-01 .time > span::after {
content: "";
position: absolute;
display: block;
}
.lyt-schedule-01 .time > span::before {
top: 50%;
left: 0;
width: 17px;
height: 17px;
margin-top: -8px;
border-radius: 50%;
background-color: #fff;
}
.lyt-schedule-01 .time > span::after {
top: 50%;
left: 7px;
width: 6px;
height: 7px;
margin-top: -5px;
border-left: 2px solid #52a127;
border-bottom: 2px solid #52a127;
}
.lyt-schedule-01 .work {
position: relative;
line-height: 1.5;
margin: .08333em 0 .75em 0;
padding-left: 16px;
font-size: 2.4rem;
font-weight: bold;
}
.lyt-schedule-01 .work + .work {
margin-top: -.5em;
}
.lyt-schedule-01 .work::before {
content: "";
position: absolute;
top: .625em;
left: 0;
display: block;
width: 6px;
height: 6px;
border-radius: 50%;
background-color: #52a127;
}
.lyt-schedule-01 .work > .label {
position: relative;
top: -.125em;
display: inline-block;
border: 1px solid #52a127;
padding: 0 5px;
color: #52a127;
font-size: 1.6rem;
}
@media only screen and (max-width: 1024px) {
.lyt-schedule-01 {
padding: .1px 0 25px 135px;
}
.lyt-schedule-01::before {
left: 50px;
}
.lyt-schedule-01 .time {
width: 100px;
}
.lyt-schedule-01 .time > span {
font-size: 1.8rem;
}
.lyt-schedule-01 .work {
font-size: 2.2rem;
}
.lyt-schedule-01 .work::before {
top: .6em;
}
}
@media only screen and (max-width: 768px) {
.lyt-schedule-01 {
margin: 30px 0;
padding: .1px 0 20px 100px;
}
.lyt-schedule-01 + .lyt-schedule-01 {
margin-top: -30px;
}
.lyt-schedule-01::before {
left: 40px;
width: 2px;
}
.lyt-schedule-01 .time {
width: 80px;
padding: .625em 5px;
}
.lyt-schedule-01 .time > span {
padding-top: 13px;
padding-left: 0;
font-size: 1.6rem;
}
.lyt-schedule-01 .time > span::before {
top: 0;
left: 50%;
width: 13px;
height: 13px;
margin-top: 0;
margin-left: -6px;
}
.lyt-schedule-01 .time > span::after {
top: 0;
left: 50%;
width: 5px;
height: 6px;
margin-top: 2px;
margin-left: -1px;
}
.lyt-schedule-01 .work {
margin: .625em 0 1.5em 0;
font-size: 2rem;
}
.lyt-schedule-01 .work + .work {
margin-top: -1.125em;
}
.lyt-schedule-01 .work > .label {
top: -.2em;
padding: 0 3px;
font-size: 1.4rem;
}
}
@media only screen and (max-width: 480px) {
.lyt-schedule-01 {
margin: 20px 0;
padding: .1px 0 15px 75px;
}
.lyt-schedule-01 + .lyt-schedule-01 {
margin-top: -20px;
}
.lyt-schedule-01::before {
left: 30px;
}
.lyt-schedule-01 .time {
width: 60px;
}
.lyt-schedule-01 .time > span {
padding-top: 15px;
font-size: 1.4rem;
}
.lyt-schedule-01 .work {
margin-top: .75em;
font-size: 1.8rem;
}
.lyt-schedule-01 .work > .label {
top: -.15em;
font-size: 1.2rem;
}
}
.lyt-schedule-02 {
background-color: #fff;
margin-bottom: 40px;
}
.lyt-schedule-02 > div {
display: flex;
}
.lyt-schedule-02 > div + div {
border-top: 1px dotted #ccc;
}
.lyt-schedule-02 > div > .month {
background-color: #52a127;
color: #fff;
font-size: 1.6rem;
font-weight: bold;
flex-shrink: 0;
width: 120px;
text-align: center;
padding: 50px 0;
}
.lyt-schedule-02 > div > .month > b {
font-size: 5.4rem;
line-height: 1;
display: block;
}
.lyt-schedule-02 > div > .month.undecide > b {
font-size: 4rem;
}
.lyt-schedule-02 > div > dd {
flex-grow: 1;
padding: 20px 48px;
}
.lyt-schedule-02 > div > dd .day {
color: #52a127;
font-size: 3.4rem;
margin-bottom: 0;
}
.lyt-schedule-02 > div > dd > .wrap-01 {
display: flex;
align-items: center;
padding: 30px 0;
}
.lyt-schedule-02 > div > dd > .wrap-01 + .wrap-01 {
border-top: 1px dotted #ccc;
}
.lyt-schedule-02 > div > dd > .wrap-01 > .img {
margin-left: 40px;
max-width: 50%;
flex-shrink: 0;
}
.lyt-schedule-02 > div > dd > .wrap-01 > .content {
flex-grow: 1;
}
.lyt-schedule-02 > div > dd > .wrap-01 .pgh-lead-04 {
margin: .2em 0;
}
@media only screen and (max-width: 768px) {
.lyt-schedule-02 > div > .month {
width: 60px;
font-size: 1rem;
padding: 30px 0;
}
.lyt-schedule-02 > div > .month > b {
font-size: 3.6rem;
}
.lyt-schedule-02 > div > dd {
padding: 16px;
}
.lyt-schedule-02 > div > dd .day {
font-size: 2.6rem;
margin-bottom: 8px;
}
.lyt-schedule-02 > div > dd > .wrap-01 {
padding: 16px 0 28px;
display: block;
}
.lyt-schedule-02 > div > dd > .wrap-01:first-child {
padding-top: 0;
}
.lyt-schedule-02 > div > dd > .wrap-01:last-child {
padding-bottom: 0;
}
.lyt-schedule-02 > div > dd > .wrap-01 > .img {
margin: 0 0 0;
max-width: none;
text-align: center;
}
}
.lyt-schedule-03 {
position: relative;
overflow: hidden;
}
.lyt-schedule-03::before {
content: "";
display: block;
width: 3px;
height: 100%;
background-color: #ccc;
position: absolute;
top: .5em;
left: 60px;
bottom: 0;
}
.lyt-schedule-03 > .hdg {
display: flex;
align-items: center;
font-size: 2.4rem;
font-weight: bold;
}
.lyt-schedule-03 > .hdg > .label {
font-size: 2rem;
font-weight: bold;
color: #fff;
background-color: #52a127;
display: inline-block;
position: relative;
flex-shrink: 0;
padding: 2.5px 20px 2.5px 50px;
}
.lyt-schedule-03 > .hdg > .label::before {
content: "";
display: block;
width: 20px;
height: 20px;
background: url(/common/images/icon-sunny-01.png) center no-repeat;
position: absolute;
left: 22px;
top: 50%;
margin-top: -10px;
}
.lyt-schedule-03 > .hdg > span {
margin-left: 32px;
padding-left: 1em;
position: relative;
}
.lyt-schedule-03 > .hdg > span::before {
content: "";
display: block;
width: 6px;
height: 6px;
background-color: #52a127;
border-radius: 50%;
position: absolute;
left: .4em;
top: .7em;
}
.lyt-schedule-03 > dd {
padding: 20px 0 20px 166px;
}
.lyt-schedule-03 > dd .lyt-img-01 > .img {
margin-top: 0;
}
@media only screen and (max-width: 768px) {
.lyt-schedule-03::before {
left: 28px;
}
.lyt-schedule-03 > .hdg {
font-size: 1.8rem;
}
.lyt-schedule-03 > .hdg > .label {
font-size: 1.4rem;
padding: 30px 12px 2px;
}
.lyt-schedule-03 > .hdg > .label::before {
top: 8px;
margin-top: 0;
margin-left: -10px;
left: 50%;
}
.lyt-schedule-03 > .hdg > span {
margin-left: 10px;
}
.lyt-schedule-03 > dd {
padding: 10px 0 10px 75px;
}
}
.lyt-contact-01 {
display: flex;
justify-content: center;
margin-bottom: 60px;
}
.lyt-contact-01 > .column {
width: calc(50% - 20px);
box-shadow: 0 0 .5em rgba(0, 0, 0, .25);
border-top: 3px solid #1db525;
padding: 5px 50px 20px 50px;
background-color: #fff;
}
.lyt-contact-01 > .column:nth-child(2n+2) {
margin-left: 40px;
}
.lyt-contact-01 > .column > dt {
margin-bottom: 30px;
border-bottom: 1px dotted #ccc;
padding: 24px 0;
font-size: 2.2rem;
font-weight: bold;
font-feature-settings: "kern", "palt";
text-align: center;
}
.lyt-contact-01 > .column > dt > span {
position: relative;
display: inline-block;
padding-left: 50px;
}
.lyt-contact-01 > .column > dt > span::before {
content: "";
position: absolute;
top: 50%;
left: 0;
display: block;
width: 40px;
height: 30px;
margin-top: -15px;
background: transparent none no-repeat 50% 50%;
background-size: cover;
}
.lyt-contact-01 > .column.web > dt > span::before {
background-image: url(/common/images/icon-pc-01.png);
}
.lyt-contact-01 > .column.tel-fax > dt > span::before {
background-image: url(/common/images/icon-tel-01.png);
}
.lyt-contact-01 > .column .btn > a {
display: block;
line-height: 1.25;
padding: 30px 18px;
background-color: #1db525;
color: #fff;
font-size: 2rem;
font-weight: bold;
text-decoration: none;
text-align: center;
}
.lyt-contact-01 > .column .btn > a > span {
position: relative;
display: inline-block;
padding-left: 20px;
}
.lyt-contact-01 > .column .btn > a > span::before {
content: "";
position: absolute;
top: .625em;
left: 2px;
display: block;
width: 8px;
height: 8px;
border-top: 2px solid #52a127;
border-right: 2px solid #52a127;
transform: translateX(-50%) rotate(45deg);
}
.lyt-contact-01 > .column .btn > a > span::before {
top: .4375em;
border-color: #fff;
}
.lyt-contact-01 > .column .btn > a:hover > span, .lyt-contact-01 > .column .btn > a:focus > span, .lyt-contact-01 > .column .btn > a:active > span {
text-decoration: underline;
}
.lyt-contact-01 > .column .tel,
.lyt-contact-01 > .column .fax {
line-height: 1;
text-align: center;
}
.lyt-contact-01 > .column .tel > b,
.lyt-contact-01 > .column .fax > b {
color: #1db525;
font-weight: bold;
}
.lyt-contact-01 > .column .tel {
margin-bottom: .5em;
font-size: 2.4rem;
}
.lyt-contact-01 > .column .tel > b {
font-size: 4.6rem;
}
.lyt-contact-01 > .column .tel > b a {
color: #1db525;
text-decoration: none;
}
.lyt-contact-01 > .column .tel > b a[href] {
text-decoration: underline;
}
.lyt-contact-01 > .column .fax {
margin-bottom: 1em;
font-size: 1.8rem;
}
.lyt-contact-01 > .column .fax > b {
font-size: 2.4rem;
}
.lyt-contact-01 > .column .reception {
font-size: 1.4rem;
text-align: center;
}
.lyt-contact-01 > .column .reception a {
text-decoration: none;
color: #1db525;
}
.lyt-contact-01 > .column .reception a[href] {
text-decoration: underline;
}
@media only screen and (max-width: 1024px) {
.lyt-contact-01 > .column {
padding-left: 25px;
padding-right: 25px;
}
.lyt-contact-01 > .column .tel {
font-size: 2.2rem;
}
.lyt-contact-01 > .column .tel > b {
font-size: 4rem;
}
.lyt-contact-01 > .column .fax > b {
font-size: 2.2rem;
}
}
@media only screen and (max-width: 768px) {
.lyt-contact-01 {
display: block;
margin-bottom: 50px;
}
.lyt-contact-01 > .column {
width: auto;
padding-top: 0;
padding-bottom: 20px;
}
.lyt-contact-01 > .column + .column {
margin-top: 20px;
}
.lyt-contact-01 > .column:nth-child(2n+2) {
margin-left: 0;
}
.lyt-contact-01 > .column > dt {
margin-bottom: 25px;
padding: 20px 0;
font-size: 2rem;
}
.lyt-contact-01 > .column > dt > span {
padding-top: 35px;
padding-left: 0;
}
.lyt-contact-01 > .column > dt > span::before {
top: 0;
left: 50%;
margin-top: 0;
margin-left: -20px;
}
.lyt-contact-01 > .column .btn > a {
padding: 24px 12px;
font-size: 1.8rem;
}
.lyt-contact-01 > .column .btn > a > span {
padding-left: 18px;
}
.lyt-contact-01 > .column .btn > a > span::before {
top: .425em;
}
.lyt-contact-01 > .column .tel {
font-size: 2.2rem;
}
.lyt-contact-01 > .column .tel > b {
font-size: 3.2rem;
}
.lyt-contact-01 > .column .fax {
font-size: 1.6rem;
}
.lyt-contact-01 > .column .fax > b {
font-size: 1.8rem;
}
}
@media only screen and (max-width: 480px) {
.lyt-contact-01 {
margin-bottom: 40px;
}
.lyt-contact-01 > .column > dt {
margin-bottom: 20px;
padding: 15px 0;
font-size: 1.8rem;
}
.lyt-contact-01 > .column .btn > a {
font-size: 1.6rem;
}
.lyt-contact-01 > .column .btn > a > span {
padding-left: 16px;
}
.lyt-contact-01 > .column .tel {
margin-bottom: .75em;
font-size: 1.6rem;
}
.lyt-contact-01 > .column .tel > b {
font-size: 2.4rem;
}
.lyt-contact-01 > .column .fax {
font-size: 1.6rem;
}
.lyt-contact-01 > .column .fax > b {
font-size: 1.6rem;
}
}
.lyt-detail-01 {
display: flex;
justify-content: space-between;
}
.lyt-detail-01 > .column {
width: 50%;
}
.lyt-detail-01 > .column:nth-child(1) {
width: calc(50% - 40px);
padding-top: .375em;
}
@media only screen and (max-width: 768px) {
.lyt-detail-01 {
display: block;
}
.lyt-detail-01 > .column {
width: auto;
}
.lyt-detail-01 > .column:nth-child(1) {
width: auto;
padding-top: 0;
}
.lyt-detail-01 > .column + .column {
margin-top: 30px;
}
}
.lyt-search-01 {
max-width: 1020px;
margin: 0 auto;
}
.lyt-search-01 > .inner {
min-width: inherit;
margin: 0;
}
.lyt-search-01 > .inner > .hdg {
margin-bottom: 35px;
color: #fff;
font-size: 1.8rem;
font-weight: bold;
text-align: center;
}
.lyt-search-01 > .inner > .input {
display: flex;
flex-wrap: wrap;
margin: 0 -5px 15px -5px;
}
.lyt-search-01 > .inner > .input > li {
flex-shrink: 0;
display: flex;
margin-bottom: 10px;
padding: 0 5px;
}
.static .lyt-search-01 > .inner > .input > li {
align-items: flex-start;
}
.lyt-search-01 > .inner > .input > li > .inner {
position: relative;
display: flex;
flex-direction: column;
width: 100%;
background-color: #fff;
color: #000;
}
.lyt-search-01 > .inner > .input > li > .inner > * {
width: 100%;
font-size: 1.6rem;
}
.lyt-search-01 > .inner > .input > li > .inner > label {
position: relative;
overflow: hidden;
}
.lyt-search-01 > .inner > .input > li > .inner > label > span {
position: absolute;
top: -999em;
left: -999em;
}
.lyt-search-01 > .inner > .input > li > .inner > label > input {
width: 100%;
padding: 1em 20px;
}
.lyt-search-01 > .inner > .input > li > .inner > label > input::-webkit-input-placeholder {
color: #999;
opacity: 1;
}
.lyt-search-01 > .inner > .input > li > .inner > label > input::-moz-placeholder {
color: #999;
opacity: 1;
}
.lyt-search-01 > .inner > .input > li > .inner > label > input:-ms-input-placeholder {
color: #999;
opacity: 1;
}
.lyt-search-01 > .inner > .input > li > .inner > label > input:placeholder-shown {
color: #999;
opacity: 1;
}
.lyt-search-01 > .inner > .input > li > .inner > button {
padding: 1em 38px 1em 20px;
background-color: #fff;
font-feature-settings: "kern", "palt";
text-align: left;
letter-spacing: .0375em;
}
.lyt-search-01 > .inner > .input > li > .inner > button[aria-expanded] {
position: relative;
}
.lyt-search-01 > .inner > .input > li > .inner > button[aria-expanded]::before {
content: "";
position: absolute;
top: 0;
right: 0;
width: 38px;
height: 100%;
background-color: #edaa1d;
}
.lyt-search-01 > .inner > .input > li > .inner > button[aria-expanded]::after {
content: "";
position: absolute;
top: 50%;
right: 15px;
display: block;
width: 8px;
height: 8px;
margin-top: -6px;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
transform: rotate(45deg);
}
.lyt-search-01 > .inner > .input > li > .inner > button[aria-expanded="true"]::after {
margin-top: -2px;
transform: rotate(225deg);
}
.lyt-search-01 > .inner > .input > li > .inner > button > span {
display: block;
width: 100%;
overflow: hidden;
color: #d18c0c;
font-weight: bold;
text-overflow: ellipsis;
white-space: nowrap;
}
.lyt-search-01 > .inner > .input > li > .inner > button > span > span {
display: inline-block;
overflow: hidden;
margin-left: .5em;
color: #000;
text-overflow: ellipsis;
vertical-align: bottom;
white-space: nowrap;
}
.lyt-search-01 > .inner > .input > li > .inner > button + .checkboxes {
position: absolute;
top: calc(100% + 1px);
left: 0;
right: 0;
z-index: 2;
display: none;
max-height: 50vh;
overflow: auto;
box-shadow: 0 0 .5em rgba(0, 0, 0, .25);
background-color: #fff;
}
.lyt-search-01 > .inner > .input > li > .inner > button + .checkboxes[aria-expanded] {
display: none;
}
.lyt-search-01 > .inner > .input > li > .inner > button + .checkboxes[aria-expanded="true"] {
display: block;
}
.static .lyt-search-01 > .inner > .input > li > .inner > button + .checkboxes {
position: static;
display: block;
max-height: 200px;
}
.lyt-search-01 > .inner > .input > li > .inner > button + .checkboxes ul {
margin-bottom: 0;
}
.lyt-search-01 > .inner > .input > li > .inner > button + .checkboxes ul > li {
margin: .25em 0;
}
.lyt-search-01 > .inner > .input > li > .inner > button + .checkboxes ul > li > label {
position: relative;
display: inline-block;
overflow: hidden;
outline: 1px dotted transparent;
vertical-align: bottom;
transition: outline-color .2s;
}
.lyt-search-01 > .inner > .input > li > .inner > button + .checkboxes ul > li > label:focus-within {
outline-color: #999;
}
.lyt-search-01 > .inner > .input > li > .inner > button + .checkboxes ul > li > label.focus-within {
outline-color: #999;
}
.lyt-search-01 > .inner > .input > li > .inner > button + .checkboxes ul > li > label > input {
position: absolute;
left: -2em;
}
.lyt-search-01 > .inner > .input > li > .inner > button + .checkboxes ul > li > label > input + span {
position: relative;
display: inline-block;
line-height: 1.25;
padding-left: 26px;
vertical-align: bottom;
}
.lyt-search-01 > .inner > .input > li > .inner > button + .checkboxes ul > li > label > input + span::before, .lyt-search-01 > .inner > .input > li > .inner > button + .checkboxes ul > li > label > input + span::after {
content: "";
position: absolute;
top: .625em;
display: block;
}
.lyt-search-01 > .inner > .input > li > .inner > button + .checkboxes ul > li > label > input + span::before {
left: 0;
width: 18px;
height: 18px;
margin-top: -9px;
border: 1px solid #ccc;
background-color: #fff;
}
.lyt-search-01 > .inner > .input > li > .inner > button + .checkboxes ul > li > label > input + span::after {
left: 6px;
width: 7px;
height: 11px;
margin-top: -7px;
border-right: 2px solid #52a127;
border-bottom: 2px solid #52a127;
opacity: 0;
transition: opacity .2s;
transform: rotate(45deg) skew(10deg);
transition: opacity .2s;
}
.lyt-search-01 > .inner > .input > li > .inner > button + .checkboxes ul > li > label > input:checked + span::after {
opacity: 1;
}
.lyt-search-01 > .inner > .input > li > .inner > button + .checkboxes > ul {
padding: .25em 5px .75em 15px;
}
.lyt-search-01 > .inner > .input > li > .inner > button + .checkboxes > ul ul {
padding-left: 26px;
}
.lyt-search-01 > .inner > .input > li.keyword {
width: 44.66019%;
}
.lyt-search-01 > .inner > .input > li.location, .lyt-search-01 > .inner > .input > li.employment {
width: 27.6699%;
}
.lyt-search-01 > .inner > .input > li.type, .lyt-search-01 > .inner > .input > li.experience, .lyt-search-01 > .inner > .input > li.dwelling {
width: calc((100% - .1px) / 3);
}
.lyt-search-01 > .inner > .btn {
position: relative;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.lyt-search-01 > .inner > .btn button {
display: inline-block;
color: #fff;
font-weight: bold;
text-align: center;
}
.lyt-search-01 > .inner > .btn button > span {
position: relative;
display: inline-block;
}
.lyt-search-01 > .inner > .btn button > span::before, .lyt-search-01 > .inner > .btn button > span:after {
content: "";
position: absolute;
display: block;
}
.lyt-search-01 > .inner > .btn button:hover > span, .lyt-search-01 > .inner > .btn button:focus > span, .lyt-search-01 > .inner > .btn button:active > span {
text-decoration: underline;
}
.lyt-search-01 > .inner > .btn > .submit {
min-width: 250px;
border: 2px solid #fff;
padding: .875em 8px;
background-color: #1db525;
font-size: 1.6rem;
}
.lyt-search-01 > .inner > .btn > .submit > span {
padding-left: 26px;
}
.lyt-search-01 > .inner > .btn > .submit > span::before, .lyt-search-01 > .inner > .btn > .submit > span::after {
content: "";
position: absolute;
display: block;
}
.lyt-search-01 > .inner > .btn > .submit > span::before {
top: 5px;
left: 0;
width: 15px;
height: 15px;
border-radius: 50%;
border: 2px solid #fff;
}
.lyt-search-01 > .inner > .btn > .submit > span::after {
top: 19px;
left: 11px;
width: 9px;
height: 2px;
border-radius: 1px;
background-color: #fff;
transform: rotate(45deg);
}
.lyt-search-01 > .inner > .btn > .reset {
position: absolute;
top: 50%;
right: 0;
font-size: 1.4rem;
transform: translateY(-50%);
}
.lyt-search-01 > .inner > .btn > .reset > span {
padding-left: 18px;
}
.lyt-search-01 > .inner > .btn > .reset > span::before, .lyt-search-01 > .inner > .btn > .reset > span::after {
top: 50%;
left: -2px;
width: 15px;
height: 2px;
margin-top: -1px;
background-color: #fff;
transform: rotate(45deg);
}
.lyt-search-01 > .inner > .btn > .reset > span::after {
transform: rotate(-45deg);
}
.lyt-search-01 > .inner > .btn > .detail {
position: absolute;
top: 50%;
right: 0;
display: inline-block;
padding-left: 16px;
color: #fff;
font-size: 1.4rem;
font-weight: bold;
text-decoration: none;
transform: translateY(-50%);
}
.lyt-search-01 > .inner > .btn > .detail::before {
content: "";
position: absolute;
top: 50%;
left: 0;
display: block;
width: 8px;
height: 8px;
margin-top: -4px;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
transform: rotate(45deg);
}
.lyt-search-01 > .inner > .btn > .detail:hover, .lyt-search-01 > .inner > .btn > .detail:focus, .lyt-search-01 > .inner > .btn > .detail:active {
text-decoration: underline;
}
@media only screen and (max-width: 960px) {
.lyt-search-01 > .inner > .input > li.keyword, .lyt-search-01 > .inner > .input > li.location, .lyt-search-01 > .inner > .input > li.employment, .lyt-search-01 > .inner > .input > li.type, .lyt-search-01 > .inner > .input > li.experience, .lyt-search-01 > .inner > .input > li.dwelling {
width: 50%;
}
.lyt-search-03 .lyt-search-01 > .inner > .input > li.keyword {
width: 100%;
}
.lyt-search-01 > .inner > .input > li > .inner > label > input {
padding-left: 18px;
padding-right: 18px;
}
.lyt-search-01 > .inner > .input > li > .inner > button {
padding-left: 18px;
padding-right: 36px;
}
.lyt-search-01 > .inner > .input > li > .inner > button[aria-expanded]::after {
right: 18px;
}
}
@media only screen and (max-width: 768px) {
.lyt-search-01 > .inner > .hdg {
margin-bottom: 25px;
font-size: 1.6rem;
}
.lyt-search-01 > .inner > .btn {
position: static;
flex-direction: column;
}
.lyt-search-01 > .inner > .btn > .reset {
position: static;
margin-top: 15px;
padding: .125em 10px;
transform: none;
}
.lyt-search-01 > .inner > .btn > .detail {
position: relative;
top: inherit;
right: inherit;
margin-top: 1em;
transform: none;
}
.lyt-search-01 > .inner > .btn > .detail::before {
content: "";
position: absolute;
top: 50%;
left: 0;
display: block;
width: 8px;
height: 8px;
margin-top: -4px;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
transform: rotate(45deg);
}
.lyt-search-01 > .inner > .btn > .detail:hover, .lyt-search-01 > .inner > .btn > .detail:focus, .lyt-search-01 > .inner > .btn > .detail:active {
text-decoration: underline;
}
.lyt-search-01 > .inner > .input > li > .inner > label > input {
padding-left: 16px;
padding-right: 16px;
}
.lyt-search-01 > .inner > .input > li > .inner > button {
padding-left: 16px;
padding-right: 34px;
}
.lyt-search-01 > .inner > .input > li > .inner > button[aria-expanded]::after {
right: 16px;
}
}
@media only screen and (max-width: 640px) {
.lyt-search-01 > .inner > .input > li.keyword, .lyt-search-01 > .inner > .input > li.location, .lyt-search-01 > .inner > .input > li.employment, .lyt-search-01 > .inner > .input > li.type, .lyt-search-01 > .inner > .input > li.experience, .lyt-search-01 > .inner > .input > li.dwelling {
width: 100%;
}
.lyt-search-01 > .inner > .input > li > .inner > label > input {
padding: .5em 14px;
}
.lyt-search-01 > .inner > .input > li > .inner > button {
padding: .5em 30px .5em 12px;
}
.lyt-search-01 > .inner > .input > li > .inner > button[aria-expanded]::after {
right: 12px;
}
}
.lyt-search-02 {
box-shadow: 0 0 .75em rgba(0, 0, 0, .25);
margin: 70px 0 20px 0;
padding: 35px 20px;
background: #26a72d linear-gradient(-45deg, #1ba323 0, #1ba323 3px, #45b44c 3px, #45b44c 4px, #1ba323 4px, #1ba323 5px) repeat 0 0;
background-size: 5px 5px;
color: #fff;
}
@media only screen and (max-width: 768px) {
.lyt-search-02 {
margin: 35px 0;
padding: 30px 20px;
}
}
.lyt-search-03 {
position: relative;
z-index: 3;
max-width: 1280px;
box-shadow: 0 0 .75em rgba(0, 0, 0, .25);
margin: 0 auto;
padding: 35px 20px;
background: #26a72d linear-gradient(-45deg, #1ba323 0, #1ba323 3px, #45b44c 3px, #45b44c 4px, #1ba323 4px, #1ba323 5px) repeat 0 0;
background-size: 5px 5px;
color: #fff;
width: 100%;
}
@media only screen and (max-width: 768px) {
.lyt-search-03 {
margin: 0 15px;
width: calc(100% - 30px);
padding: 30px 20px;
}
}
.area-search-01 .inner {
max-width: 1320px;
margin: 0 auto;
padding: 20px;
}
#search .area-search-01 .inner {
padding: 30px 0 0;
max-width: initial;
}
.lyt-message-01 {
display: flex;
align-items: center;
line-height: 1.5;
margin: 20px 0 50px;
padding: 20px;
background-color: #f6fbf6;
font-size: 1.6rem;
}
.lyt-message-01 > dt {
position: relative;
min-height: 40px;
margin-right: 20px;
border-right: 1px dotted #ccc;
padding: 0 20px 0 50px;
}
.lyt-message-01 > dt > .job,
.lyt-message-01 > dt > .name,
.lyt-message-01 > dt > .img {
display: block;
}
.lyt-message-01 > dt > .job,
.lyt-message-01 > dt > .name {
white-space: nowrap;
}
.lyt-message-01 > dt > .job {
font-size: 1.3rem;
}
.lyt-message-01 > dt > .img {
position: absolute;
top: 50%;
left: 0;
width: 40px;
height: 40px;
margin-top: -20px;
}
@media only screen and (max-width: 768px) {
.lyt-message-01 {
display: block;
margin: 30px 0;
}
.lyt-message-01 > dt {
position: static;
display: flex;
flex-wrap: wrap;
align-items: center;
min-height: inherit;
margin-right: 0;
margin-bottom: 15px;
border-right: none;
border-bottom: 1px dotted #ccc;
padding: 0 0 15px 0;
}
.lyt-message-01 > dt > .job,
.lyt-message-01 > dt > .name {
margin-left: 10px;
}
.lyt-message-01 > dt > .job {
order: 2;
}
.lyt-message-01 > dt > .name {
order: 3;
}
.lyt-message-01 > dt > .img {
order: 1;
flex-shrink: 0;
position: static;
margin-top: 0;
}
}
.lyt-channel-01 {
position: relative;
min-height: 148px;
margin: 20px 0 70px 0;
padding: 20px 30px 20px 150px;
background-color: #eee;
}
.lyt-channel-01::before {
content: "";
position: absolute;
top: 20px;
left: 20px;
display: block;
width: 108px;
height: 108px;
background: transparent url(/know/gallery/images/channel-01.jpg) no-repeat 50% 50%;
background-size: cover;
}
.lyt-channel-01 > *:last-child {
margin-bottom: 0;
}
.lyt-channel-01 > .hdg {
margin: 20px 0 10px 0;
font-size: 2.2rem;
font-weight: bold;
}
.lyt-channel-01 > .hdg:first-child {
margin-top: 0;
}
@media only screen and (max-width: 1024px) {
.lyt-channel-01 {
margin-bottom: 60px;
}
.lyt-channel-01 > .hdg {
font-size: 2rem;
}
}
@media only screen and (max-width: 768px) {
.lyt-channel-01 {
margin-bottom: 50px;
padding: 140px 20px 15px 20px;
}
.lyt-channel-01::before {
top: 20px;
left: 50%;
margin-left: -54px;
}
.lyt-channel-01 > .hdg {
margin-bottom: 5px;
font-size: 1.8rem;
}
}
@media only screen and (max-width: 480px) {
.lyt-channel-01 {
margin-bottom: 40px;
}
}
.lyt-blog-01 {
height: 100%;
margin: 0 70px;
border: 1px solid #ccc;
padding: 38px;
background-color: rgba(255, 255, 255, .4);
}
.lyt-blog-01 > .hdg {
margin-bottom: 25px;
font-size: 1.6rem;
font-weight: bold;
text-align: center;
line-height: 1.375;
}
.lyt-blog-01 > .hdg > .logo,
.lyt-blog-01 > .hdg > .text {
display: inline-block;
vertical-align: bottom;
}
.lyt-blog-01 > .hdg > .text {
margin: 0 0 0 30px;
}
.lyt-blog-01 > .list {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: 0 -18px;
}
.lyt-blog-01 > .list > li {
display: flex;
width: 50%;
padding: 0 18px;
}
.lyt-blog-01 > .list > li > .box {
width: 100%;
color: #000;
background: #fff;
text-decoration: none;
}
.lyt-blog-01 > .list > li > .box.jbba {
border: 1px solid #053b14;
}
.lyt-blog-01 > .list > li > .box.jbba > .head {
background: #053b14;
}
.lyt-blog-01 > .list > li > .box.btc {
border: 1px solid #558a09;
}
.lyt-blog-01 > .list > li > .box.btc > .head {
background: #558a09;
}
.lyt-blog-01 > .list > li > .box > .head {
padding: 10px;
color: #fff;
text-align: center;
}
.lyt-blog-01 > .list > li > .box > .head > .hdg {
display: block;
font-size: 1.8rem;
font-weight: bold;
}
.lyt-blog-01 > .list > li > .box > .head > .desc {
font-size: 1.4rem;
}
.lyt-blog-01 > .list > li > .box > .body {
padding: 26px 30px;
}
.lyt-blog-01 > .list > li > .box > .body :last-child {
margin-bottom: 0;
}
.lyt-blog-01 > .list > li > .box > .body .link-list-01 {
display: flex;
margin-left: -11px;
margin-right: -11px;
}
.lyt-blog-01 > .list > li > .box > .body .link-list-01 > li {
width: 50%;
padding: 0 11px;
}
.lyt-blog-01 > .list > li > .box > .body .link-list-01 > li > a {
display: block;
padding-bottom: 15px;
text-decoration: none;
}
.lyt-blog-01 > .list > li > .box > .body .link-list-01 > li > a:hover > .title,
.lyt-blog-01 > .list > li > .box > .body .link-list-01 > li > a:focus > .title,
.lyt-blog-01 > .list > li > .box > .body .link-list-01 > li > a:active > .title {
text-decoration: underline;
}
.lyt-blog-01 > .list > li > .box > .body .link-list-01 > li > a > img {
width: 100%;
margin-bottom: 10px;
}
.lyt-blog-01 > .list > li > .box > .body .link-list-01 > li > a > .date {
display: block;
font-size: 1.4rem;
color: #999;
}
.lyt-blog-01 > .list > li > .box > .body .link-list-01 > li > a > .title {
display: block;
font-size: 1.5rem;
font-weight: bold;
color: #000;
}
.lyt-blog-01 > .list > li > .box > .body .btn-link-01 > a {
min-width: 240px;
}
.lyt-blog-01 > .list > li > .box.jbba > .body .btn-link-01 > a,
.lyt-blog-01 > .list > li > .box.jbba > .body .btn-link-01 > a > span::before {
color: #053b14;
border-color: #053b14;
}
.lyt-blog-01 > .list > li > .box.btc > .body .btn-link-01 > a,
.lyt-blog-01 > .list > li > .box.btc > .body .btn-link-01 > a > span::before {
color: #558a09;
border-color: #558a09;
}
@media only screen and (max-width: 960px) {
.lyt-blog-01 {
margin: 0 auto 70px;
padding: 40px 20px 20px;
}
.lyt-blog-01 > .hdg > .logo, .lyt-blog-01 > .hdg > .text {
display: block;
}
.lyt-blog-01 > .hdg {
margin-bottom: 20px;
font-size: 1.4rem;
}
.lyt-blog-01 > .hdg > .text {
margin: 15px 0 0 0;
}
.lyt-blog-01 > .list > li {
width: 100%;
}
.lyt-blog-01 > .list > li + li {
margin-top: 19px;
}
.lyt-blog-01 > .list > li > .box > .body {
padding: 20px;
}
}
@media only screen and (max-width: 768px) {
.lyt-blog-01 > .list > li > .box > .body .link-list-01 {
margin-left: -8px;
margin-right: -8px;
}
.lyt-blog-01 > .list > li > .box > .body .link-list-01 > li {
padding: 0 8px;
}
}
@media only screen and (max-width: 480px) {
.lyt-blog-01 > .list > li > .box > .head > .hdg {
font-size: 1.6rem;
}
.lyt-blog-01 > .list > li > .box > .head > .desc,
.lyt-blog-01 > .list > li > .box > .body .link-list-01 > li > a > .date,
.lyt-blog-01 > .list > li > .box > .body .link-list-01 > li > a > .title {
font-size: 1.3rem;
}
.lyt-blog-01 > .list > li > .box > .body .btn-link-01 > a {
display: block;
min-width: auto;
}
}
.lyt-update-01 {
border: solid 1px #52a127;
display: flex;
align-items: center;
margin-bottom: 40px;
}
.lyt-update-01 > .hdg {
background-color: #52a127;
color: #fff;
display: flex;
align-items: center;
font-size: 1.6rem;
font-weight: bold;
padding: 34px 30px;
}
.lyt-update-01 > .hdg::before {
content: "";
background: url(/common/images/icon-update-01.png) no-repeat;
background-size: 17px 22px;
display: block;
flex-shrink: 0;
width: 17px;
height: 22px;
margin-right: 10px;
}
.lyt-update-01 > dd {
padding: 20px 32px;
}
.lyt-update-01 > dd > :last-child {
margin-bottom: 0;
}
@media only screen and (max-width: 768px) {
.lyt-update-01 {
display: block;
margin-bottom: 32px;
}
.lyt-update-01 > .hdg {
padding: 12px 20px;
text-align: left;
}
.lyt-update-01 > .hdg::before {
background-size: 13px 16px;
width: 13px;
height: 16px;
margin-right: 14px;
}
.lyt-update-01 > dd {
padding: 12px 20px;
}
}
.lyt-overview-01 {
background-color: #edf7ed;
padding: 36px 30px;
margin-bottom: 24px;
}
.lyt-overview-01 > .inner {
display: flex;
}
.lyt-overview-01 > .inner > .img {
margin-right: 40px;
max-width: 50%;
flex-shrink: 0;
position: relative;
}
.lyt-overview-01 > .inner > .img > .is-end {
position: absolute;
top: -30px;
left: -30px;
}
.lyt-overview-01 > .inner > .content {
flex-grow: 1;
flex-basis: 100%;
}
.lyt-overview-01 > .inner > .content > :last-child {
margin-bottom: 0;
}
.lyt-overview-01 > .inner > .content .hdg {
font-size: 1.8rem;
font-weight: bold;
padding-bottom: .4em;
border-bottom: solid 3px #52a127;
margin-bottom: 8px;
}
.lyt-overview-01 > .inner > .content .hdg.schedule, .lyt-overview-01 > .inner > .content .hdg.period, .lyt-overview-01 > .inner > .content .hdg.target, .lyt-overview-01 > .inner > .content .hdg.qualification {
display: flex;
align-items: center;
}
.lyt-overview-01 > .inner > .content .hdg.schedule::before, .lyt-overview-01 > .inner > .content .hdg.period::before, .lyt-overview-01 > .inner > .content .hdg.target::before, .lyt-overview-01 > .inner > .content .hdg.qualification::before {
content: "";
display: block;
flex-shrink: 0;
background-repeat: no-repeat;
background-position: center;
margin-right: .4em;
}
.lyt-overview-01 > .inner > .content .hdg.schedule::before {
background-image: url(/common/images/icon-schedule-02.png);
background-size: 12px 17px;
width: 12px;
height: 17px;
}
.lyt-overview-01 > .inner > .content .hdg.period::before {
background-image: url(/common/images/icon-period-01.png);
background-size: 17px 17px;
width: 17px;
height: 17px;
}
.lyt-overview-01 > .inner > .content .hdg.target::before {
background-image: url(/common/images/icon-target-01.png);
background-size: 22px 16px;
width: 22px;
height: 16px;
}
.lyt-overview-01 > .inner > .content .hdg.qualification::before {
background-image: url(/common/images/icon-qualification-01.png);
background-size: 21px 21px;
width: 21px;
height: 21px;
}
@media only screen and (max-width: 1024px) {
.lyt-overview-01 {
padding: 20px;
}
.lyt-overview-01 > .inner {
display: block;
}
.lyt-overview-01 > .inner > .img {
text-align: center;
max-width: none;
margin-right: auto;
margin-left: auto;
display: table;
width: auto;
}
.lyt-overview-01 > .inner > .img > .is-end {
width: 90px;
left: -20px;
top: -20px;
}
.lyt-overview-01 > .inner > .content {
margin-top: 15px;
}
.lyt-overview-01 > .inner > .content .hdg {
font-size: 1.6rem;
margin-bottom: 10px;
}
}
.lyt-toggle-01 {
margin-top: 30px;
}
.lyt-toggle-01 .toggle-ui {
font-size: 2.4rem;
line-height: 1.5;
font-weight: bold;
border: solid 1px #ccc;
padding: .5em 20px;
transition: background-color .2s, border-color .2s, color .2s;
will-change: background-color, border-color, color;
}
.lyt-toggle-01 .toggle-ui[aria-expanded] {
padding: .5em 20px .5em 57px;
position: relative;
}
.lyt-toggle-01 .toggle-ui[aria-expanded]::before {
content: "";
display: block;
width: 22px;
height: 22px;
background-color: #52a127;
position: absolute;
left: 20px;
top: 50%;
margin-top: -11px;
transition: background-color .2s;
will-change: background-color;
}
.lyt-toggle-01 .toggle-ui[aria-expanded] > span::before, .lyt-toggle-01 .toggle-ui[aria-expanded] > span::after {
content: "";
display: block;
width: 14px;
height: 2px;
background-color: #fff;
position: absolute;
left: 24px;
top: 50%;
margin-top: -1px;
transition: background-color .2s;
will-change: background-color;
}
.lyt-toggle-01 .toggle-ui[aria-expanded] > span::after {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.lyt-toggle-01 .toggle-ui[aria-expanded="true"] {
background-color: #52a127;
border-color: transparent;
color: #fff;
}
.lyt-toggle-01 .toggle-ui[aria-expanded="true"]::before {
background-color: #fff;
}
.lyt-toggle-01 .toggle-ui[aria-expanded="true"] > span::before {
background-color: #52a127;
}
.lyt-toggle-01 .toggle-ui[aria-expanded="true"] > span::after {
background-color: transparent;
}
.lyt-toggle-01 .toggle-content {
margin-top: 20px;
}
.lyt-toggle-01 .toggle-content[aria-expanded="true"] {
display: block;
}
.lyt-toggle-01 .toggle-content[aria-expanded="false"] {
display: none;
}
@media only screen and (max-width: 480px) {
.lyt-toggle-01 .toggle-ui {
font-size: 2rem;
padding: .45em 15px;
}
.lyt-toggle-01 .toggle-ui[aria-expanded] {
padding: .45em 15px .45em 50px;
}
.lyt-toggle-01 .toggle-ui[aria-expanded]::before {
left: 15px;
}
.lyt-toggle-01 .toggle-ui[aria-expanded] > span::before, .lyt-toggle-01 .toggle-ui[aria-expanded] > span::after {
left: 19px;
}
}
.lyt-toggle-02 {
margin-top: 30px;
display: flex;
flex-direction: column-reverse;
}
.lyt-toggle-02 .toggle-ui {
display: none;
justify-content: center;
align-items: center;
font-size: 1.8rem;
line-height: 1.5;
font-weight: bold;
background-color: #ededed;
padding: .65em 20px;
}
.lyt-toggle-02 .toggle-ui[aria-expanded] {
display: flex;
position: relative;
}
.lyt-toggle-02 .toggle-ui[aria-expanded]::before {
content: "";
display: block;
width: 22px;
height: 22px;
margin-right: 10px;
background-color: #52a127;
}
.lyt-toggle-02 .toggle-ui[aria-expanded] > span {
position: relative;
}
.lyt-toggle-02 .toggle-ui[aria-expanded] > span::before, .lyt-toggle-02 .toggle-ui[aria-expanded] > span::after {
content: "";
display: block;
width: 14px;
height: 2px;
background-color: #fff;
position: absolute;
left: -28px;
top: 50%;
margin-top: -1px;
}
.lyt-toggle-02 .toggle-ui[aria-expanded] > span::after {
transition: background-color .2s;
will-change: background-color;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.lyt-toggle-02 .toggle-ui[aria-expanded="true"] > span::after {
background-color: transparent;
}
.lyt-toggle-02 .toggle-content {
margin-bottom: 20px;
}
.lyt-toggle-02 .toggle-content[aria-expanded="true"] {
display: block;
}
.lyt-toggle-02 .toggle-content[aria-expanded="false"] {
display: none;
}
.lyt-toggle-02 .toggle-content > :last-child {
margin-bottom: 0;
}
@media only screen and (max-width: 480px) {
.lyt-toggle-01 .toggle-ui {
font-size: 2rem;
padding: .45em 15px;
}
.lyt-toggle-01 .toggle-ui[aria-expanded] {
padding: .45em 15px .45em 50px;
}
.lyt-toggle-01 .toggle-ui[aria-expanded]::before {
left: 15px;
}
.lyt-toggle-01 .toggle-ui[aria-expanded] > span::before, .lyt-toggle-01 .toggle-ui[aria-expanded] > span::after {
left: 19px;
}
}
/* ===========================
.m-list-toggle
--------------------------- */
.m-list-toggle {
--transition-default: ease .3s;
--color-background-main: #52a127;
--color-white: #fff;
margin-bottom: 30px;
}
.m-list-toggle__head {
position: relative;
cursor: pointer;
font-size: 2.4rem;
line-height: 1.5;
font-weight: bold;
border: solid 1px #ccc;
padding: .5em 20px .5em 57px;
transition: background-color var(--transition-default);
}
.m-list-toggle[open] .m-list-toggle__head {
background-color: var(--color-background-main);
border: transparent;
}
.m-list-toggle__head::-webkit-details-marker {
display: none; /* Safariでsummery要素デフォルトアイコンを消す */
}
.m-list-toggle__head::before {
--icon-size: 22px;
content: "";
display: block;
background-color: var(--color-background-main);
width: var(--icon-size);
height: var(--icon-size);
position: absolute;
left: 20px;
top: 50%;
transform: translateY(-50%);
transition: background-color var(--transition-default);
}
.m-list-toggle[open] .m-list-toggle__head::before {
background-color: var(--color-white);
}
.m-list-toggle__title {
transition: color var(--transition-default);
}
.m-list-toggle[open] .m-list-toggle__title {
color: var(--color-white);
}
.m-list-toggle__title::before,
.m-list-toggle__title::after {
content: "";
display: block;
width: 14px;
height: 2px;
background-color: var(--color-white);
position: absolute;
left: 24px;
top: 50%;
transform: translateY(-50%);
}
.m-list-toggle__title::after {
transform: translateY(-50%) rotate(90deg);
}
.m-list-toggle[open] .m-list-toggle__title::before {
background-color: var(--color-background-main);
}
.m-list-toggle[open] .m-list-toggle__title::after {
opacity: 0;
}
.m-list-toggle__body {
overflow: hidden;
}
.m-list-toggle__body-inner {
padding-top: 20px;
}
.m-list-toggle__body-inner:first-child > * {
margin-top: 0;
}
@media only screen and (max-width: 480px) {
.m-list-toggle__head {
font-size: 2rem;
padding: .45em 15px .45em 50px;
}
.m-list-toggle__head::before {
left: 15px;
}
.m-list-toggle__title::before,
.m-list-toggle__title::after {
left: 19px;
}
}
/* ===========================
navigation
--------------------------- */
.nav-local-01 {
position: relative;
line-height: 1.5;
margin-bottom: 0;
font-size: 1.6rem;
}
.nav-local-01 > .inner {
max-width: 1320px;
margin: 0 auto;
padding: 0 20px;
}
.nav-local-01 > .inner::after {
content: "";
position: absolute;
left: 50%;
bottom: 0;
display: block;
width: 100vw;
margin-left: -50vw;
border-top: 1px solid #ccc;
}
.nav-local-01 > .inner > dt {
display: none;
}
.nav-local-01 > .inner > dd a {
position: relative;
display: inline-block;
padding-left: 16px;
color: #000;
text-decoration: none;
}
.nav-local-01 > .inner > dd a:hover, .nav-local-01 > .inner > dd a:focus, .nav-local-01 > .inner > dd a:active {
text-decoration: underline;
}
.nav-local-01 > .inner > dd a::before {
content: "";
position: absolute;
top: .625em;
left: 2px;
display: block;
width: 8px;
height: 8px;
border-top: 2px solid #52a127;
border-right: 2px solid #52a127;
transform: translateX(-50%) rotate(45deg);
}
.nav-local-01 > .inner > dd a::before {
top: .5em;
}
.nav-local-01 > .inner > dd a[aria-current] {
color: #52a127;
font-weight: bold;
}
.nav-local-01 > .inner > dd > ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: 0 -25px;
padding: 10px 0;
}
.nav-local-01 > .inner > dd > ul > li {
margin: .5em 20px;
}
.nav-local-01 > .inner > dd > ul > li.has-submenu > .submenu {
display: none;
}
.nav-local-01.ready > .inner > dd > ul > li.has-submenu > a {
padding-left: 30px;
}
.nav-local-01.ready > .inner > dd > ul > li.has-submenu > a::before {
content: none;
}
.nav-local-01.ready > .inner > dd > ul > li.has-submenu > a::after {
content: "";
position: absolute;
top: 50%;
left: 0;
display: block;
width: 22px;
height: 22px;
margin-top: -11px;
background-color: #52a127;
}
.nav-local-01.ready > .inner > dd > ul > li.has-submenu > a[aria-expanded] > span::before, .nav-local-01.ready > .inner > dd > ul > li.has-submenu > a[aria-expanded] > span::after {
content: "";
position: absolute;
top: 50%;
left: 4px;
z-index: 1;
width: 14px;
height: 2px;
margin-top: -1px;
background-color: #fff;
}
.nav-local-01.ready > .inner > dd > ul > li.has-submenu > a[aria-expanded] > span::after {
transform: rotate(90deg);
transition: opacity .2s;
}
.nav-local-01.ready > .inner > dd > ul > li.has-submenu > a[aria-expanded="true"] {
color: #52a127;
font-weight: bold;
}
.nav-local-01.ready > .inner > dd > ul > li.has-submenu > a[aria-expanded="true"] > span::after {
opacity: 0;
}
.nav-local-01.ready > .inner > dd > ul > li.has-submenu > .submenu {
position: absolute;
top: 100%;
left: 0;
right: 0;
border-bottom: 1px solid #ccc;
background-color: #eee;
}
.nav-local-01.ready > .inner > dd > ul > li.has-submenu > .submenu[aria-expanded="true"] {
display: block;
}
.nav-local-01.ready > .inner > dd > ul > li.has-submenu > .submenu > ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
max-width: 1320px;
margin: 0 auto;
padding: 10px 20px 20px 20px;
}
.nav-local-01.ready > .inner > dd > ul > li.has-submenu > .submenu > ul > li{
padding: 0 12px;
margin-top: 10px;
}
.nav-local-01.ready > .inner > dd > ul > li.has-submenu > .submenu > ul > li a{
padding: 7px 20px 5px 20px;
border: #52a127 2px solid;
background: #fff;
}
.nav-local-01.ready > .inner > dd > ul > li.has-submenu > .submenu > ul > li a::before{
content: none;
}
.nav-local-01.ready > .inner > dd > ul > li.has-submenu > .submenu > ul > li a[aria-current="true"]{
background: #52a127;
color: #fff;
}
.nav-local-01.ready > .inner > dd > ul > li.has-submenu > .submenu > ul > li a span{
display: block;
padding-left: 16px;
position: relative;
}
.nav-local-01.ready > .inner > dd > ul > li.has-submenu > .submenu > ul > li a span::before {
content: "";
position: absolute;
top: 50%;
left: 2px;
display: block;
width: 8px;
height: 8px;
border-top: 2px solid #52a127;
border-right: 2px solid #52a127;
transform: translateX(-50%) translateY(-50%) rotate(45deg);
}
.nav-local-01.ready > .inner > dd > ul > li.has-submenu > .submenu > ul > li a[aria-current="true"] span::before {
border-top: 2px solid #fff;
border-right: 2px solid #fff;
}
@media only screen and (max-width: 768px) {
.nav-local-01 > .inner {
padding: 0;
}
.nav-local-01 > .inner::after {
content: none;
}
.nav-local-01 > .inner > dt {
display: block;
border-bottom: 1px solid #ccc;
padding: 1.125em 50px 1.125em 35px;
}
.nav-local-01 > .inner > dd {
border-bottom: 1px solid #ccc;
padding: 0 20px;
background-color: #eee;
font-size: 1.4rem;
}
.nav-local-01 > .inner > dd a {
display: block;
padding: 1.28571em 0 1.28571em 40px;
}
.nav-local-01 > .inner > dd a::before {
top: calc(50% - 4px);
left: 16px;
}
.nav-local-01 > .inner > dd > ul {
display: block;
margin: 0;
padding: 0;
}
.nav-local-01 > .inner > dd > ul > li {
margin: 0;
border-bottom: 1px solid #ccc;
}
.nav-local-01 > .inner > dd > ul > li:last-child {
border-bottom: none;
}
.nav-local-01.ready {
transition: none;
}
.nav-local-01.ready > .inner > dt {
position: relative;
}
.nav-local-01.ready > .inner > dt[aria-expanded]::before {
content: "";
position: absolute;
top: 50%;
right: 15px;
display: block;
width: 22px;
height: 22px;
margin-top: -11px;
background-color: #52a127;
}
.nav-local-01.ready > .inner > dt[aria-expanded] > span::before, .nav-local-01.ready > .inner > dt[aria-expanded] > span::after {
content: "";
position: absolute;
top: 50%;
right: 19px;
display: block;
width: 14px;
height: 2px;
margin-top: -1px;
background-color: #fff;
}
.nav-local-01.ready > .inner > dt[aria-expanded] > span::after {
transform: rotate(90deg);
transition: opacity .2s;
}
.nav-local-01.ready > .inner > dt[aria-expanded="true"] > span::after {
opacity: 0;
}
.nav-local-01.ready > .inner > dd {
display: none;
}
.static .nav-local-01.ready > .inner > dd {
display: block;
}
.nav-local-01.ready > .inner > dd[aria-expanded="true"] {
display: block;
}
.nav-local-01.ready > .inner > dd > ul > li.has-submenu > a {
padding-left: 40px;
}
.nav-local-01.ready > .inner > dd > ul > li.has-submenu > a::after {
content: none;
}
.nav-local-01.ready > .inner > dd > ul > li.has-submenu > a[aria-expanded] > span::before, .nav-local-01.ready > .inner > dd > ul > li.has-submenu > a[aria-expanded] > span::after {
left: 12px;
width: 12px;
background-color: #52a127;
}
.nav-local-01.ready > .inner > dd > ul > li.has-submenu > a[aria-expanded="true"] > span::after {
opacity: 0;
}
.nav-local-01.ready > .inner > dd > ul > li.has-submenu > .submenu {
position: static;
border-top: 1px solid #ccc;
border-bottom: none;
}
.nav-local-01.ready > .inner > dd > ul > li.has-submenu > .submenu > ul {
display: block;
padding: 0 0 0 20px;
}
.nav-local-01.ready > .inner > dd > ul > li.has-submenu > .submenu > ul > li {
margin: 0;
border-bottom: 1px solid #ccc;
padding: 0;
}
.nav-local-01.ready > .inner > dd > ul > li.has-submenu > .submenu > ul > li:last-child {
border-bottom: none;
}
.nav-local-01.ready > .inner > dd > ul > li.has-submenu > .submenu > ul > li a{
background: none;
border: 0;
padding: 1.28571em 0 1.28571em 40px;
}
.nav-local-01.ready > .inner > dd > ul > li.has-submenu > .submenu > ul > li a::before{
content: "";
}
.nav-local-01.ready > .inner > dd > ul > li.has-submenu > .submenu > ul > li a[aria-current="true"]{
background: none;
color: #52a127;
}
.nav-local-01.ready > .inner > dd > ul > li.has-submenu > .submenu > ul > li a span{
padding: 0;
}
.nav-local-01.ready > .inner > dd > ul > li.has-submenu > .submenu > ul > li a span::before{
content: none;
}
}
/* ===========================
heading
--------------------------- */
[class^="hdg-"] {
font-feature-settings: "kern", "palt";
letter-spacing: .05em;
}
.hdg-page-01 {
line-height: 1.5;
background-color: #52a127;
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: cover;
color: #fff;
font-size: 3.6rem;
font-weight: bold;
text-align: center;
}
.hdg-page-01 > .inner {
display: flex;
justify-content: center;
align-items: center;
max-width: 1320px;
height: 250px;
margin: 0 auto;
padding: 0 20px;
}
.hdg-page-01 > .inner > span {
position: relative;
display: inline-block;
}
.hdg-page-01 > .inner > span::after {
content: "";
position: absolute;
left: 50%;
bottom: -.375em;
display: block;
width: 50px;
height: 3px;
margin-left: -25px;
background-color: #fff;
}
.hdg-page-01.know {
background-color: #4c5c60;
background-image: url(/common/images/bg-hdg-page-01-know.jpg);
}
.hdg-page-01.event {
background-color: #4c5c60;
background-image: url(/common/images/bg-hdg-page-01-event.jpg);
}
.hdg-page-01.internship {
background-color: #4c5c60;
background-image: url(/common/images/bg-hdg-page-01-internship.jpg);
}
.hdg-page-01.fair {
background-color: #4c5c60;
background-image: url(/common/images/bg-hdg-page-01-fair.jpg);
}
.hdg-page-01.job {
background-color: #4c5c60;
background-image: url(/common/images/bg-hdg-page-01-job.jpg);
}
@media only screen and (max-width: 768px) {
.hdg-page-01.job {
background-image: url(/common/images/bg-hdg-page-01-job_sp.jpg);
}
}
.hdg-page-01.admission {
background-color: #4c5c60;
background-image: url(/common/images/bg-hdg-page-01-admission.jpg);
}
.hdg-page-01.about {
background-color: #4c5c60;
background-image: url(/common/images/bg-hdg-page-01-about.jpg);
}
.hdg-page-01.seminar {
background-color: #4c5c60;
background-image: url(/common/images/bg-hdg-page-01-seminar.jpg);
}
.hdg-page-01.public {
background-color: #4c5c60;
background-image: url(/common/images/bg-hdg-page-01-public.jpg);
}
.hdg-page-01.work {
background-color: #4c5c60;
background-image: url(/common/images/bg-hdg-page-01-work.jpg);
}
.hdg-page-01.web_consultation {
background-color: #4c5c60;
background-image: url(/common/images/bg-hdg-page-01-web_consultation.jpg);
}
.hdg-page-01.book {
background-color: #4c5c60;
background-image: url(/common/images/bg-hdg-page-01-book.png);
}
@media only screen and (max-width: 1024px) {
.hdg-page-01 {
font-size: 3.4rem;
}
.hdg-page-01 > .inner {
height: 205px;
}
}
@media only screen and (max-width: 768px) {
.hdg-page-01 {
font-size: 3rem;
}
.hdg-page-01 > .inner {
height: 180px;
padding: 0 15px;
}
.hdg-page-01 > .inner > span::after {
width: 40px;
margin-left: -20px;
}
}
@media only screen and (max-width: 480px) {
.hdg-page-01 {
font-size: 2.6rem;
}
.hdg-page-01 > .inner {
height: 160px;
}
}
@media only screen and (max-width: 320px) {
.hdg-page-01 > .inner {
height: 120px;
}
}
.hdg-section-01 {
position: relative;
display: flex;
align-items: center;
line-height: 1.375;
margin: 50px 0;
padding: .15em 0 .15em 30px;
font-size: 3.6rem;
font-weight: bold;
}
.hdg-section-01::before, .hdg-section-01::after {
content: "";
position: absolute;
left: 0;
display: block;
width: 4px;
}
.hdg-section-01::before {
top: 0;
bottom: 50%;
background-color: #000;
}
.hdg-section-01::after {
top: 50%;
bottom: 0;
background-color: #52a127;
}
.hdg-section-01 .label {
flex-shrink: 0;
display: inline-block;
margin-left: .75em;
padding: .25em 8px;
background-color: #999;
color: #fff;
font-size: 1.4rem;
font-weight: bold;
font-feature-settings: normal;
letter-spacing: 0;
vertical-align: middle;
}
.hdg-section-01 .label.new {
background-color: #ed3131;
}
.hdg-section-01 .label.update {
background-color: #ff9000;
}
.hdg-section-01 .label.blog {
background-color: #00a0e9;
}
.area-content .hdg-section-01:first-child {
margin-top: 25px;
}
@media only screen and (max-width: 1024px) {
.hdg-section-01 {
margin: 45px 0;
padding: .1625em 0 .1625em 25px;
font-size: 3.2rem;
}
}
@media only screen and (max-width: 768px) {
.hdg-section-01 {
margin: 40px 0;
padding: .175em 0 .175em 20px;
font-size: 2.8rem;
}
.hdg-section-01 .label {
margin-left: .625em;
padding: .125em 6px;
}
.area-content .hdg-section-01:first-child {
margin-top: 20px;
}
}
@media only screen and (max-width: 480px) {
.hdg-section-01 {
margin: 35px 0;
padding: .2em 0 .2em 15px;
font-size: 2.6rem;
}
.area-content .hdg-section-01:first-child {
margin-top: 15px;
}
}
.hdg-section-02 {
line-height: 1.5;
margin: 50px 0 30px 0;
border-bottom: 3px solid #52a127;
padding-bottom: 8px;
font-size: 2.8rem;
font-weight: bold;
}
.hdg-section-02.icon {
display: flex;
align-items: center;
}
.hdg-section-02.icon > .icon {
flex-shrink: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 50px;
height: 50px;
line-height: 1.05;
border-radius: 50%;
background-color: #52a127;
color: #fff;
font-size: 1rem;
font-weight: bold;
}
.hdg-section-02.icon > .icon .num {
font-size: 2rem;
}
.hdg-section-02.icon > .hdg {
flex-grow: 1;
margin-left: 15px;
}
@media only screen and (max-width: 1024px) {
.hdg-section-02 {
font-size: 2.6rem;
}
}
@media only screen and (max-width: 768px) {
.hdg-section-02 {
margin: 40px 0 20px 0;
font-size: 2.4rem;
}
}
@media only screen and (max-width: 480px) {
.hdg-section-02 {
font-size: 2.2rem;
}
}
.hdg-section-03 {
line-height: 1.4875;
margin: 50px 0 30px 0;
border-left: 3px solid #52a127;
padding-left: 18px;
font-size: 2.4rem;
font-weight: bold;
}
@media only screen and (max-width: 768px) {
.hdg-section-03 {
margin: 40px 0 20px 0;
padding-left: 14px;
font-size: 2rem;
}
}
.hdg-section-04,
.hdg-section-05,
.hdg-section-06 {
line-height: 1.5;
margin: 35px 0 25px 0;
font-weight: bold;
}
.hdg-section-04 {
font-size: 2.2rem;
}
.hdg-section-05 {
font-size: 2rem;
}
.hdg-section-06 {
font-size: 1.8rem;
}
@media only screen and (max-width: 768px) {
.hdg-section-04,
.hdg-section-05,
.hdg-section-06 {
margin-bottom: 15px;
}
.hdg-section-04 {
font-size: 2rem;
}
.hdg-section-05 {
font-size: 1.8rem;
}
.hdg-section-06 {
font-size: 1.6rem;
}
}
.hdg-underline-01 {
line-height: 1.5;
margin: 35px 0 30px 0;
font-size: 2.4rem;
font-weight: bold;
}
.hdg-underline-01 > span {
display: inline-block;
border-bottom: 3px solid #52a127;
padding-bottom: .1875em;
}
@media only screen and (max-width: 768px) {
.hdg-underline-01 {
margin: 35px 0 20px 0;
font-size: 2rem;
}
}
/* ===========================
paragraph
--------------------------- */
.pgh-note-01 {
line-height: 1.5;
margin: .375em 0 1.5em 0;
color: #666;
font-size: 1.4rem;
}
.pgh-note-01 + .pgh-note-01 {
margin-top: -1em;
}
.pgh-note-01 > strong {
color: #ed3131;
}
.pgh-note-01 > small,
.pgh-note-01 > strong {
display: flex;
}
.pgh-note-01 > small .mark,
.pgh-note-01 > strong .mark {
flex-shrink: 0;
margin-right: .7125em;
}
.pgh-note-01 > small .content,
.pgh-note-01 > strong .content {
flex-grow: 1;
}
.pgh-note-02 {
color: #ed3131;
}
.pgh-note-02 a,
.pgh-note-02 a:hover,
.pgh-note-02 a:active,
.pgh-note-02 a:focus {
color: #ed3131;
}
.pgh-note-03,
.pgh-note-03 a,
.pgh-note-03 a:hover,
.pgh-note-03 a:active,
.pgh-note-03 a:focus {
color: #00a0e9;
}
.pgh-desc-01 {
margin: 2em 0;
}
.pgh-lead-01 {
line-height: 1.5;
margin-bottom: 1em;
font-size: 2.2rem;
font-weight: normal;
}
.pgh-lead-01 b,
.pgh-lead-01 em {
font-weight: normal;
}
@media only screen and (max-width: 768px) {
.pgh-lead-01 {
font-size: 1.8rem;
}
}
.pgh-lead-02 {
line-height: 1.5;
margin-bottom: .5em;
color: #52a127;
font-size: 2.4rem;
font-weight: bold;
}
p + .pgh-lead-02 {
margin-top: 1.125em;
}
@media only screen and (max-width: 768px) {
.pgh-lead-02 {
font-size: 2rem;
}
}
.pgh-lead-03 {
font-size: 2.8rem;
font-weight: bold;
}
.pgh-lead-03 b,
.pgh-lead-03 em {
background-image: linear-gradient(to bottom, transparent 0%, transparent 62.5%, #bde0aa 62.5%, #bde0aa 100%);
}
@media only screen and (max-width: 1024px) {
.pgh-lead-03 {
font-size: 2.6rem;
}
}
@media only screen and (max-width: 768px) {
.pgh-lead-03 {
font-size: 2.4rem;
}
}
@media only screen and (max-width: 480px) {
.pgh-lead-03 {
font-size: 2.2rem;
}
}
.pgh-lead-04 {
line-height: 1.5;
margin-bottom: .5em;
color: #000;
font-size: 2.4rem;
font-weight: bold;
}
p + .pgh-lead-04 {
margin-top: 1.125em;
}
@media only screen and (max-width: 768px) {
.pgh-lead-04 {
font-size: 1.8rem;
}
}
.pgh-gallery-01 {
margin-top: 60px;
text-align: center;
}
@media only screen and (max-width: 1024px) {
.pgh-gallery-01 {
margin-top: 50px;
}
}
@media only screen and (max-width: 768px) {
.pgh-gallery-01 {
margin-top: 40px;
}
}
@media only screen and (max-width: 480px) {
.pgh-gallery-01 {
margin-top: 35px;
}
}
.pgh-result-01 {
line-height: 1.25;
margin: 40px 0 50px 0;
font-size: 1.8rem;
text-align: center;
}
.pgh-result-01 > b {
display: inline-block;
margin: 0 .125em;
color: #26a72d;
font-size: 5rem;
font-weight: bold;
}
@media only screen and (max-width: 768px) {
.pgh-result-01 {
margin: 25px 0 30px 0;
font-size: 1.6rem;
}
.pgh-result-01 > b {
font-size: 4rem;
}
}
.pgh-error-01 {
position: relative;
margin: 35px 0;
border: 1px solid #ed3131;
padding: 22px 28px 22px 58px;
background-color: #fff0f0;
color: #ed3131;
}
.pgh-error-01::before {
content: "";
position: absolute;
top: calc(22px + .3em);
left: 28px;
display: block;
width: 20px;
height: 18px;
background: transparent url(/common/images/icon-alert-01.png) no-repeat 50% 50%;
background-size: cover;
}
/* ===========================
list
--------------------------- */
.list-link-01.col, .list-link-01.col4, .list-link-01.col3 {
display: flex;
flex-wrap: wrap;
}
.list-link-01.col > li {
margin-right: 40px;
}
.list-link-01.col > li:last-child {
margin-right: 0;
}
.list-link-01.col4, .list-link-01.col3 {
margin-right: -40px;
}
.list-link-01.col4 > li {
width: 25%;
padding-right: 40px;
}
.list-link-01.col3 > li {
width: calc(100% / 3);
padding-right: 40px;
}
.list-link-01 > li > a {
position: relative;
display: inline-block;
padding-left: 16px;
}
.list-link-01 > li > a::before {
content: "";
position: absolute;
top: .625em;
left: 2px;
display: block;
width: 8px;
height: 8px;
border-top: 2px solid #52a127;
border-right: 2px solid #52a127;
transform: translateX(-50%) rotate(45deg);
}
.list-link-01 .list-link-01 {
margin-left: 16px;
margin-bottom: 0;
font-size: 1.4rem;
}
.list-link-01 .list-link-01 > li > a::before {
border-color: #ccc;
}
.list-link-01.ranch {
font-size: 1.4rem;
}
.list-link-01.ranch > li {
margin-bottom: 10px;
}
.list-link-01.ranch > li > a {
font-weight: bold;
}
.list-link-01.ranch > li > a > .location {
position: relative;
line-height: 1.5;
margin: 0 0 .375em 0;
padding-left: 15px;
color: #52a127;
font-size: 1.6rem;
font-weight: bold;
}
.list-link-01.ranch > li > a .name {
color: #19110d;
position: relative;
line-height: 1.1;
}
.list-link-01.ranch > li > a > .location::before,
.list-link-01.ranch > li > a > .location::after {
content: "";
position: absolute;
display: block;
}
.list-link-01.ranch > li > a > .location::before {
top: .375em;
left: 0;
width: 9px;
height: 9px;
border-radius: 50%;
border: 3px solid #52a127;
}
.list-link-01.ranch > li > a > .location::after {
top: .8125em;
left: 4.5px;
width: 0;
height: 0;
margin-left: -3.5px;
border-width: 6px 3.5px 0 3.5px;
border-style: solid;
border-color: #52a127 transparent transparent transparent;
}
@media only screen and (max-width: 960px) {
.list-link-01.col4 > li {
width: calc((100% - .1px) / 3);
}
}
@media only screen and (max-width: 720px) {
.list-link-01 {
line-height: 2;
}
.list-link-01.col4 > li,
.list-link-01.ranch > li {
width: 50%;
}
}
@media only screen and (max-width: 480px) {
.list-link-01.col4 > li,
.list-link-01.ranch > li {
width: 100%;
}
}
.list-bullet-01 > li {
position: relative;
padding-left: 16px;
}
.list-bullet-01 > li.eat::before {
width: 16px;
height: 16px;
background: url(/common/images/icon-eat-01.png) center no-repeat;
border-radius: 0;
left: -4px;
top: .4em;
}
.list-bullet-01 > li::before {
content: "";
position: absolute;
top: .6875em;
left: 1px;
display: block;
width: 6px;
height: 6px;
border-radius: 50%;
background-color: #52a127;
}
.list-bullet-02 > li {
display: flex;
}
.list-bullet-02 > li > .mark {
flex-shrink: 0;
width: 2.5em;
margin-right: .5em;
text-align: right;
}
.list-bullet-02 > li > .content {
flex-grow: 1;
}
.list-order-01 {
list-style: decimal;
margin-left: 1.75em;
}
.list-bullet-01 .list-bullet-01,
.list-bullet-01 .list-bullet-02,
.list-bullet-01 .list-order-01,
.list-bullet-02 .list-bullet-01,
.list-bullet-02 .list-bullet-02,
.list-bullet-02 .list-order-01,
.list-order-01 .list-bullet-01,
.list-order-01 .list-bullet-02,
.list-order-01 .list-order-01 {
margin-bottom: 0;
}
.list-bullet-01 .list-bullet-01 > li::before {
top: .8125em;
height: 2px;
border-radius: 0;
background-color: #ccc;
}
.list-desc-01 > div + div {
margin-top: .75em;
}
.list-desc-01 > div > dt {
margin-bottom: .5em;
color: #52a127;
font-weight: bold;
}
.list-desc-01 > div > dd > *:last-child {
margin-bottom: 0;
}
.list-desc-02 > div + div {
margin-top: .75em;
}
.list-desc-02 > div > dt {
margin-bottom: .5em;
font-size: 1.8rem;
font-weight: bold;
}
.list-desc-02 > div > dd > *:last-child {
margin-bottom: 0;
}
.list-innerlink-01 {
display: flex;
margin: 50px 0;
font-size: 1.6rem;
font-weight: bold;
}
.list-innerlink-01 > li {
flex-grow: 1;
display: flex;
}
.list-innerlink-01 > li + li > a {
border-left: none;
}
.list-innerlink-01 > li > a {
flex-grow: 1;
display: flex;
justify-content: center;
align-items: center;
line-height: 1.5;
border: 2px solid #ccc;
padding: 16px 8px;
background-color: #fff;
color: #000;
text-decoration: none;
transition: border-color .2s, background-color .2s, color .2s;
}
.list-innerlink-01 > li > a > span {
position: relative;
display: inline-block;
padding-left: 20px;
}
.list-innerlink-01 > li > a > span::before {
content: "";
position: absolute;
top: .625em;
left: 2px;
display: block;
width: 8px;
height: 8px;
border-top: 2px solid #52a127;
border-right: 2px solid #52a127;
transform: translateX(-50%) rotate(45deg);
}
.list-innerlink-01 > li > a > span::before {
top: .45em;
left: 6px;
border-color: #ccc;
transform: translateX(-50%) rotate(135deg);
transition: border-color .2s;
}
.list-innerlink-01 > li > a:hover, .list-innerlink-01 > li > a:focus, .list-innerlink-01 > li > a:active {
border-color: #52a127;
background-color: #52a127;
color: #fff;
}
.list-innerlink-01 > li > a:hover > span::before, .list-innerlink-01 > li > a:focus > span::before, .list-innerlink-01 > li > a:active > span::before {
border-color: #fff;
}
@media only screen and (min-width: 769px) {
.list-innerlink-01 > li {
flex-basis: 0%;
}
}
@media only screen and (max-width: 768px) {
.list-innerlink-01 {
flex-direction: column;
margin: 30px 0 60px 0;
}
.list-innerlink-01 > li + li > a {
border-top: none;
border-left: 2px solid #ccc;
}
.list-innerlink-01 > li > a > span {
padding-left: 18px;
}
}
.list-relatedlink-01 {
display: flex;
flex-wrap: wrap;
margin: -20px -20px 100px -20px;
font-size: 1.6rem;
}
.list-relatedlink-01 > li {
width: calc((100% - .1px) / 3);
margin-top: 20px;
padding: 0 20px;
}
.list-relatedlink-01 > li > a {
position: relative;
display: block;
min-height: 130px;
line-height: 1.375;
padding-left: 150px;
color: #000;
text-decoration: none;
}
.list-relatedlink-01 > li > a > .hdg,
.list-relatedlink-01 > li > a > .desc,
.list-relatedlink-01 > li > a > .img {
display: block;
}
.list-relatedlink-01 > li > a > .hdg {
position: relative;
margin-bottom: .5em;
padding: .2em 0 0 18px;
color: #52a127;
font-size: 2rem;
font-weight: bold;
text-decoration: underline;
}
.list-relatedlink-01 > li > a > .hdg::before {
content: "";
position: absolute;
top: .625em;
left: 2px;
display: block;
width: 8px;
height: 8px;
border-top: 2px solid #52a127;
border-right: 2px solid #52a127;
transform: translateX(-50%) rotate(45deg);
}
.list-relatedlink-01 > li > a > .desc {
line-height: 1.5;
}
.list-relatedlink-01 > li > a > .img {
position: absolute;
top: 0;
left: 0;
width: 130px;
}
.list-relatedlink-01 > li > a:hover > .hdg, .list-relatedlink-01 > li > a:focus > .hdg, .list-relatedlink-01 > li > a:active > .hdg {
text-decoration: none;
}
@media only screen and (max-width: 1024px) {
.list-relatedlink-01 {
margin-bottom: 80px;
}
.list-relatedlink-01 > li {
width: 50%;
}
}
@media only screen and (max-width: 768px) {
.list-relatedlink-01 {
margin-bottom: 60px;
font-size: 1.4rem;
}
.list-relatedlink-01 > li {
width: 100%;
}
.list-relatedlink-01 > li > a {
position: relative;
display: block;
min-height: 100px;
padding-left: 115px;
}
.list-relatedlink-01 > li > a > .hdg {
font-size: 1.6rem;
}
.list-relatedlink-01 > li > a > .img {
width: 100px;
}
}
.list-relatedlink-02 {
display: flex;
flex-wrap: wrap;
margin: 0 -12.5px 16px;
}
.list-relatedlink-02 > li {
display: flex;
width: calc((100% - .1px) / 3);
padding: 0 12.5px 25px;
}
.list-relatedlink-02 > li > a {
position: relative;
width: 100%;
box-shadow: 0 0 .75em rgba(0, 0, 0, .25);
padding: 20px 20px 20px 135px;
background-color: #fff;
color: #000;
text-decoration: none;
}
.list-relatedlink-02 > li > a::before, .list-relatedlink-02 > li > a::after {
content: "";
display: block;
}
.list-relatedlink-02 > li > a::before {
float: left;
width: 0;
height: 85px;
}
.list-relatedlink-02 > li > a::after {
clear: both;
}
.list-relatedlink-02 > li > a > .text {
display: block;
line-height: 1.5;
margin: -.25em 0;
}
.list-relatedlink-02 > li > a > .text .hdg,
.list-relatedlink-02 > li > a > .text .desc {
display: block;
}
.list-relatedlink-02 > li > a > .text .hdg {
position: relative;
font-size: 1.6rem;
font-weight: bold;
}
.list-relatedlink-02 > li > a > .text .hdg::before {
content: "";
position: absolute;
top: .75em;
left: -16px;
display: block;
width: 7px;
height: 7px;
margin-top: -3.5px;
border-top: 2px solid #52a127;
border-right: 2px solid #52a127;
transform: rotate(45deg);
}
.list-relatedlink-02 > li > a > .text .desc {
margin-top: .25em;
font-size: 1.4rem;
}
.list-relatedlink-02 > li > a > .img {
position: absolute;
top: 20px;
left: 20px;
display: block;
width: 85px;
height: 85px;
text-align: center;
}
.list-relatedlink-02 > li > a:hover > .text .hdg, .list-relatedlink-02 > li > a:focus > .text .hdg, .list-relatedlink-02 > li > a:active > .text .hdg {
text-decoration: underline;
}
@media only screen and (max-width: 960px) {
.list-relatedlink-02 {
margin: 0 -12.5px 20px;
}
.list-relatedlink-02 > li {
width: 100%;
padding: 0 12.5px 10px;
}
}
.list-check-01 {
line-height: 1.5;
margin: 30px 0;
padding: 1.25em 30px;
background-color: #f2f9f2;
}
.list-check-01 > dt {
display: inline-block;
margin-bottom: .5em;
border-bottom: 3px solid #52a127;
font-size: 2.4rem;
font-weight: bold;
}
.list-check-01 > dd > ul {
display: flow-root;
margin-bottom: 0;
font-size: 1.8rem;
}
.list-check-01 > dd > ul::after {
content: "";
display: block;
clear: both;
}
.list-check-01 > dd > ul > li {
position: relative;
float: left;
margin: .5em 40px .25em 0;
padding-left: 32px;
}
.list-check-01 > dd > ul > li::before, .list-check-01 > dd > ul > li::after {
content: "";
position: absolute;
display: block;
}
.list-check-01 > dd > ul > li::before {
top: .3em;
left: 0;
width: 18px;
height: 18px;
border: 2px solid #ccc;
}
.list-check-01 > dd > ul > li::after {
top: .25em;
left: 8px;
width: 7px;
height: 13px;
border-right: 2px solid #52a127;
border-bottom: 2px solid #52a127;
transform: rotate(45deg) skew(-3deg, -3deg);
}
@media only screen and (max-width: 768px) {
.list-check-01 {
padding: 1em 20px;
}
.list-check-01 > dt {
font-size: 2rem;
}
.list-check-01 > dd > ul::after {
content: none;
}
.list-check-01 > dd > ul > li {
float: none;
margin-right: 0;
padding-left: 28px;
}
}
.list-faq-01 {
display: flex;
flex-wrap: wrap;
margin: 0 -10px;
}
.list-faq-01 > .faq {
width: 50%;
margin-bottom: 20px;
padding: .1px 10px;
}
@media only screen and (max-width: 768px) {
.list-faq-01 > .faq {
width: 100%;
height: auto !important;
margin-bottom: 10px;
}
}
.list-report-01 {
display: flex;
flex-wrap: wrap;
line-height: 1.5;
margin: 0 -10px 20px -10px;
}
.list-report-01 > li {
display: flex;
width: calc((100% - .1px) / 3);
margin-bottom: 20px;
padding: 0 10px;
}
.list-report-01 > li > a {
display: flex;
align-items: center;
width: 100%;
padding: 15px;
background-color: #eee;
color: #666;
font-size: 1.3rem;
text-decoration: none;
}
.list-report-01 > li > a .img {
flex-shrink: 0;
width: 70px;
margin-right: 15px;
}
.list-report-01 > li > a .text {
flex-grow: 1;
}
.list-report-01 > li > a .text .hdg,
.list-report-01 > li > a .text .person {
display: block;
}
.list-report-01 > li > a .text .hdg {
color: #52a127;
font-size: 1.6rem;
text-decoration: underline;
}
.list-report-01 > li > a .text .hdg + .person {
margin-top: .375em;
}
.list-report-01 > li > a:hover .text .hdg, .list-report-01 > li > a:focus .text .hdg, .list-report-01 > li > a:active .text .hdg {
text-decoration: none;
}
@media only screen and (max-width: 768px) {
.list-report-01 {
margin: 0 -6px 13px -6px;
}
.list-report-01 > li {
width: 50%;
margin-bottom: 12px;
padding: 0 6px;
}
.list-report-01 > li > a {
align-items: flex-start;
}
.list-report-01 > li > a .img {
width: 70px;
margin-right: 10px;
}
.list-report-01 > li > a .text .hdg + .person {
margin-top: .5em;
}
}
@media only screen and (max-width: 640px) {
.list-report-01 > li > a {
align-items: flex-start;
}
.list-report-01 > li > a .img {
width: 50px;
}
}
@media only screen and (max-width: 480px) {
.list-report-01 > li {
width: 100%;
}
}
.list-breadcrumb-01 {
max-width: 1320px;
margin: 0 auto;
padding: .1px 20px;
}
.list-breadcrumb-01 > ol {
margin: 24px 0;
padding-left: 30px;
font-size: 1.3rem;
font-feature-settings: "kern", "palt";
letter-spacing: .025em;
}
.list-breadcrumb-01 > ol > li {
position: relative;
display: inline-block;
margin: .125em 40px .125em 0;
}
.list-breadcrumb-01 > ol > li::after {
content: "";
position: absolute;
top: .5em;
right: -23px;
display: block;
width: 8px;
height: 8px;
border-top: 1px solid #000;
border-right: 1px solid #000;
transform: rotate(45deg) skew(-18deg, -18deg);
}
.list-breadcrumb-01 > ol > li > a {
display: inline-block;
color: #000;
vertical-align: top;
}
.list-breadcrumb-01 > ol > li:first-child {
margin-left: -30px;
}
.list-breadcrumb-01 > ol > li:first-child > a {
position: relative;
overflow: hidden;
width: 18px;
height: 1.75em;
padding-left: 18px;
}
.list-breadcrumb-01 > ol > li:first-child > a::before, .list-breadcrumb-01 > ol > li:first-child > a::after {
content: "";
position: absolute;
display: block;
}
.list-breadcrumb-01 > ol > li:first-child > a::before {
top: .375em;
left: 9px;
width: 0;
height: 0;
margin-left: -6px;
border-width: 0 6px 6px 6px;
border-style: solid;
border-color: transparent transparent #52a127 transparent;
}
.list-breadcrumb-01 > ol > li:first-child > a::after {
top: .76923em;
left: 5px;
width: 8px;
height: 6px;
border: 3px solid #52a127;
border-bottom: none;
}
.list-breadcrumb-01 > ol > li:first-child > a > span {
width: 100%;
white-space: nowrap;
}
.list-breadcrumb-01 > ol > li:last-child {
margin-right: 0;
}
.list-breadcrumb-01 > ol > li:last-child::after {
content: none;
}
.list-breadcrumb-01 [aria-current] {
font-weight: normal;
}
@media only screen and (max-width: 768px) {
.list-breadcrumb-01 {
padding-left: 15px;
padding-right: 15px;
}
.list-breadcrumb-01 > ol {
margin: 15px -10px 15px 0;
font-size: 1.2rem;
}
.list-breadcrumb-01 > ol > li {
margin-right: 30px;
}
.list-breadcrumb-01 > ol > li::after {
top: .625em;
right: -18px;
width: 7px;
height: 7px;
}
.list-breadcrumb-01 > ol > li:first-child > a::before {
top: .45em;
}
.list-breadcrumb-01 > ol > li:first-child > a::after {
top: .85em;
}
}
.list-content-01 {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: -20px -20px 70px -20px;
}
.list-content-01 > li {
display: flex;
justify-content: center;
width: 25%;
padding: 0 20px;
margin-top: 20px;
}
.list-content-01 > li > a {
position: relative;
display: block;
width: 100%;
color: #fff;
font-size: 2rem;
font-weight: bold;
}
.list-content-01 > li > a > .text {
position: absolute;
top: 50%;
left: 50%;
z-index: 2;
display: block;
width: calc(100% - 30px);
line-height: 1.25;
text-align: center;
transform: translate(-50%, -50%);
}
.list-content-01 > li > a > .img {
display: block;
text-align: center;
}
.list-content-01 > li > a:hover > .text, .list-content-01 > li > a:focus > .text, .list-content-01 > li > a:active > .text {
text-decoration: underline;
}
@media only screen and (max-width: 1024px) {
.list-content-01 {
margin-left: -15px;
margin-right: -15px;
}
.list-content-01 > li {
padding: 0 15px;
}
}
@media only screen and (max-width: 640px) {
.list-content-01 {
margin-bottom: 45px;
}
.list-content-01 > li {
max-width: 400px;
width: 100%;
}
}
.list-content-02 {
margin-bottom: 0;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
.list-content-02 > li {
padding: 20px 10px;
}
.list-content-02 > li + li {
border-top: 1px dotted #ccc;
}
.list-content-02 > li > a {
position: relative;
display: block;
min-height: 130px;
padding-left: 150px;
text-decoration: none;
}
.list-content-02 > li > a .text .hdg,
.list-content-02 > li > a .text .desc {
display: block;
}
.list-content-02 > li > a .text .hdg {
position: relative;
padding-left: 16px;
font-size: 2rem;
text-decoration: underline;
}
.list-content-02 > li > a .text .hdg::before {
content: "";
position: absolute;
top: .625em;
left: 2px;
display: block;
width: 8px;
height: 8px;
border-top: 2px solid #52a127;
border-right: 2px solid #52a127;
transform: translateX(-50%) rotate(45deg);
}
.list-content-02 > li > a .text .desc {
margin-top: .25em;
color: #000;
font-size: 1.6rem;
}
.list-content-02 > li > a .img {
position: absolute;
top: 0;
left: 0;
width: 130px;
height: 130px;
overflow: hidden;
}
.list-content-02 > li > a:hover .text .hdg, .list-content-02 > li > a:focus .text .hdg, .list-content-02 > li > a:active .text .hdg {
text-decoration: none;
}
@media only screen and (max-width: 768px) {
.list-content-02 > li {
padding: 20px 0;
}
.list-content-02 > li > a {
min-height: 100px;
padding-left: 115px;
}
.list-content-02 > li > a .text .hdg {
font-size: 1.6rem;
}
.list-content-02 > li > a .text .desc {
font-size: 1.4rem;
}
.list-content-02 > li > a .img {
width: 100px;
height: 100px;
}
}
.list-content-03 {
display: flex;
flex-wrap: wrap;
margin: 0 -12.5px 65px;
}
.list-content-03.col3 > li {
width: calc((100% - .1px) / 3);
padding: 0 12.5px 25px;
}
.list-content-03 > li > a {
position: relative;
display: block;
color: #fff;
font-size: 1.6rem;
text-decoration: none;
transition: box-shadow .2s;
}
.list-content-03 > li > a span {
display: block;
}
.list-content-03 > li > a .img {
position: relative;
z-index: 1;
transition: opacity .2s;
height: 312px;
background: #efefef;
}
.list-content-03 > li > a .img img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-height: 100%;
}
.list-content-03 > li > a .text {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
padding: 1em 24px;
background-color: rgba(0, 100, 5, .9);
transition: background-color .2s;
}
.list-content-03 > li > a .movie {
display: flex;
align-items: center;
gap: 8px;
position: absolute;
top: -5px;
left: 0;
right: 5px;
z-index: 2;
background-color: #ff9000;
font-weight: bold;
padding: 4px 10px 2px;
}
.list-content-03 > li > a .movie::before {
display: inline-block;
content: "";
background-image: url(/common/images/icon-movie-03.png);
background-size: cover;
min-width: 22px;
width: 22px;
height: 18px;
}
.list-content-03 > li > a .movie::after {
content: "";
position: absolute;
top: 0;
right: -5px;
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 5px 0 0 5px;
border-color: transparent transparent transparent #bd6b00;
}
.list-content-03 > li > a .text .link {
position: relative;
padding-left: 16px;
font-size: 1.8rem;
font-weight: bold;
}
.list-content-03 > li > a .text .link::before {
content: "";
position: absolute;
top: .625em;
left: 2px;
display: block;
width: 8px;
height: 8px;
border-top: 2px solid #52a127;
border-right: 2px solid #52a127;
transform: translateX(-50%) rotate(45deg);
transition: left .2s;
}
.list-content-03 > li > a .text .link::before {
top: .5125em;
border-color: #fff;
}
.list-content-03 > li > a .text .desc {
margin-top: .25em;
}
.list-content-03 > li > a:hover, .list-content-03 > li > a:focus, .list-content-03 > li > a:active {
box-shadow: 0 0 8px rgba(0, 0, 0, .2);
}
.list-content-03 > li > a:hover .img, .list-content-03 > li > a:focus .img, .list-content-03 > li > a:active .img {
opacity: .8;
}
.list-content-03 > li > a:hover .text, .list-content-03 > li > a:focus .text, .list-content-03 > li > a:active .text {
background: rgba(27, 163, 35, 1);
}
.list-content-03 > li > a:hover .text .link::before, .list-content-03 > li > a:focus .text .link::before, .list-content-03 > li > a:active .text .link::before {
left: 5px;
}
.list-content-03.type-01 > li > a {
box-shadow: none;
}
.list-content-03.type-01 > li > a .text {
background-color: rgba(81, 162, 44, .9);
}
@media only screen and (max-width: 1024px) {
.list-content-03.col3 > li {
width: 50%;
}
}
@media only screen and (max-width: 720px) {
.list-content-03 {
margin: 0 -5px 30px;
}
.list-content-03.col3 > li {
padding: 0 5px 10px;
}
.list-content-03 > li > a {
height: 100%;
background-color: #19741e;
}
.list-content-03 > li > a .img {
height: 172px;
}
.list-content-03 > li > a .text {
position: static;
padding: .8em 16px;
background: none;
font-size: 1.4rem;
}
.list-content-03 > li > a .text > .link {
font-size: 1.6rem;
line-height: 1.5;
}
.list-content-03 > li > a .movie {
font-size: 1.6rem;
line-height: 1.5;
}
.list-content-03.type-01 > li > a {
background-color: #51a22c;
}
}
.list-training-01 {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: 50px -20px;
text-align: center;
}
.list-training-01 > div {
display: flex;
flex-direction: column;
max-width: 220px;
width: 20%;
margin: 10px;
padding: .1px 20px;
background-color: #edf7ed;
}
.list-training-01 > div > dt {
border-bottom: 1px dotted #ccc;
padding: 8px 0;
font-size: 1.8rem;
}
.list-training-01 > div > dd {
flex-grow: 1;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
line-height: 1.25;
padding: 20px 0;
color: #52a127;
font-size: 1.6rem;
font-weight: bold;
}
.list-training-01 > div > dd b {
font-size: 3.4rem;
}
@media only screen and (max-width: 768px) {
.list-training-01 {
margin: 30px -5px;
}
.list-training-01 > div {
display: flex;
flex-direction: column;
max-width: inherit;
width: 35%;
margin: 5px;
padding: .1px 15px;
}
.list-training-01 > div > dt {
font-size: 1.4rem;
font-weight: bold;
}
.list-training-01 > div > dd {
padding: 15px 0;
font-size: 1.2rem;
}
.list-training-01 > div > dd b {
font-size: 2.2rem;
}
}
@media only screen and (max-width: 480px) {
.list-training-01 > div {
width: 140px;
}
}
.list-senior-01 {
display: flex;
flex-wrap: wrap;
margin: 0 -13px;
}
.list-senior-01 > li {
display: flex;
width: 25%;
margin-bottom: 40px;
padding: 0 13px;
}
.list-senior-01 > li > a {
position: relative;
display: flex;
flex-direction: column;
width: 100%;
color: #000;
text-decoration: none;
}
.list-senior-01 > li > a > .label {
position: absolute;
top: 0;
left: 0;
display: inline-block;
min-width: 90px;
padding: .25em 5px;
background-color: #999;
color: #fff;
font-size: 1.4rem;
font-weight: bold;
text-align: center;
}
.list-senior-01 > li > a > .label.type-01 {
background-color: #4fb8d3;
}
.list-senior-01 > li > a > .label.type-02 {
background-color: #eb8ab6;
}
.list-senior-01 > li > a > .label.type-03 {
background-color: #ecaa1c;
}
.list-senior-01 > li > a > .label.type-04 {
background-color: #a4c520;
}
.list-senior-01 > li > a > .text {
order: 2;
height: 100%;
margin: 1em 0 0 16px;
font-size: 1.6rem;
}
.list-senior-01 > li > a > .text .hdg,
.list-senior-01 > li > a > .text .author {
display: block;
}
.list-senior-01 > li > a > .text .hdg {
position: relative;
font-weight: bold;
}
.list-senior-01 > li > a > .text .hdg::before {
content: "";
position: absolute;
top: .625em;
left: 2px;
display: block;
width: 8px;
height: 8px;
border-top: 2px solid #52a127;
border-right: 2px solid #52a127;
transform: translateX(-50%) rotate(45deg);
}
.list-senior-01 > li > a > .text .hdg::before {
left: -14px;
}
.list-senior-01 > li > a > .text .author {
margin-top: .75em;
color: #999;
font-size: 1.3rem;
}
.list-senior-01 > li > a > .img {
order: 1;
text-align: center;
}
.list-senior-01 > li > a:hover > .text .hdg,
.list-senior-01 > li > a:hover > .text .author, .list-senior-01 > li > a:focus > .text .hdg,
.list-senior-01 > li > a:focus > .text .author, .list-senior-01 > li > a:active > .text .hdg,
.list-senior-01 > li > a:active > .text .author {
text-decoration: underline;
}
@media only screen and (max-width: 768px) {
.list-senior-01 {
margin: 0 -10px;
}
.list-senior-01 > li {
width: calc((100% - .1px) / 3);
margin-bottom: 30px;
padding: 0 10px;
}
.list-senior-01 > li > a > .label {
min-width: 66px;
font-size: 1.2rem;
}
.list-senior-01 > li > a > .text {
margin: 1em 0 0 16px;
font-size: 1.4rem;
}
.list-senior-01 > li > a > .text .hdg::before {
top: .55em;
}
.list-senior-01 > li > a > .text .author {
margin-top: .5em;
}
}
@media only screen and (max-width: 600px) {
.list-senior-01 > li {
width: 50%;
}
}
.list-gallery-01 {
display: flex;
flex-wrap: wrap;
padding: .1px 0;
}
.list-gallery-01 > li > a {
display: block;
}
.list-gallery-01.img {
margin: 0 -13px;
}
.list-gallery-01.img > li {
width: calc(25% - 26px);
margin: 0 13px 24px 13px;
}
.list-gallery-01.img > li > a {
overflow: hidden;
}
.list-gallery-01.img > li > a > img {
transition: opacity .4s;
}
.list-gallery-01.img > li > a:hover > img, .list-gallery-01.img > li > a:focus > img, .list-gallery-01.img > li > a:active > img {
opacity: .75;
}
.list-gallery-01.video {
margin: 0 -12.5px;
}
.list-gallery-01.video > li {
width: calc(((100% - .1px) / 3) - 25px);
margin: 0 12.5px 40px 12.5px;
cursor: pointer;
}
.list-gallery-01.video > li > a {
position: relative;
}
.list-gallery-01.video > li > a::before, .list-gallery-01.video > li > a::after {
content: "";
position: absolute;
display: block;
}
.list-gallery-01.video > li > a::before {
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
background-color: #000;
opacity: .5;
transition: opacity .4s;
}
.list-gallery-01.video > li > a::after {
top: 50%;
left: 50%;
z-index: 3;
width: 80px;
height: 80px;
margin: -40px 0 0 -40px;
background: transparent url(/common/images/icon-play-01.png) no-repeat 50% 50%;
background-size: cover;
transition: transform .4s;
}
.list-gallery-01.video > li > a > img {
position: relative;
z-index: 1;
}
.list-gallery-01.video > li > a:hover::before, .list-gallery-01.video > li > a:focus::before, .list-gallery-01.video > li > a:active::before {
opacity: .625;
}
.list-gallery-01.video > li > a:hover::after, .list-gallery-01.video > li > a:focus::after, .list-gallery-01.video > li > a:active::after {
transform: scale(0.9);
}
.list-gallery-01.video > li > .text {
display: block;
line-height: 1.5;
margin-top: 20px;
border-left: 3px solid #52a127;
padding: .25em 0 .25em 16px;
font-size: 1.8rem;
}
@media only screen and (max-width: 768px) {
.list-gallery-01.img, .list-gallery-01.video {
margin: 0 -8px;
}
.list-gallery-01.img > li, .list-gallery-01.video > li {
width: calc(((100% - .1px) / 3) - 16px);
margin: 0 8px 16px 8px;
}
.list-gallery-01.video > li {
margin-bottom: 35px;
}
.list-gallery-01.video > li > a::after {
width: 40px;
height: 40px;
margin: -20px 0 0 -20px;
}
.list-gallery-01.video > li > .text {
margin-top: 15px;
padding: .25em 0 .25em 14px;
font-size: 1.6rem;
}
}
@media only screen and (max-width: 480px) {
.list-gallery-01.img, .list-gallery-01.video {
margin: 0 -5px;
}
.list-gallery-01.img > li, .list-gallery-01.video > li {
width: calc(50% - 10px);
margin: 0 5px 10px 5px;
}
.list-gallery-01.video > li {
margin-bottom: 30px;
}
.list-gallery-01.video > li > .text {
margin-top: 10px;
padding: .25em 0 .25em 12px;
font-size: 1.4rem;
}
}
.list-result-01 {
display: flex;
flex-wrap: wrap;
margin: 0 -10px 30px -10px;
font-size: 1.6rem;
}
.list-result-01 > li {
display: flex;
width: calc((100% - .1px) / 3);
margin-bottom: 20px;
padding: 0 10px;
}
.list-result-01 > li > .link {
flex-grow: 1;
flex-basis: 0;
position: relative;
box-shadow: 0 0 .5em rgba(0, 0, 0, .25);
border-top: 3px solid #26a72d;
padding: 25px 30px calc(25px + 3.75em) 30px;
background-color: #fff;
color: #000;
text-decoration: none;
word-break: break-all;
transition: background-color .2s;
}
.list-result-01 > li > .link > .label {
position: absolute;
top: -8px;
right: 30px;
display: block;
width: 70px;
padding: .215em 5px;
background-color: #999;
color: #fff;
font-size: 1.4rem;
font-weight: bold;
text-align: center;
}
.list-result-01 > li > .link > .label.position-01 {
position: absolute;
top: -8px;
right: 110px;
display: block;
width: 70px;
padding: .215em 5px;
background-color: #999;
color: #fff;
font-size: 1.4rem;
font-weight: bold;
text-align: center;
}
.list-result-01 > li > .link > .label::after {
content: "";
position: absolute;
top: 0;
right: -5px;
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 5px 0 0 5px;
border-color: transparent transparent transparent #666;
}
.list-result-01 > li > .link > .label.new {
background-color: #ed3131;
}
.list-result-01 > li > .link > .label.new::after {
border-left-color: #bc0b0b;
}
.list-result-01 > li > .link > .label.update {
background-color: #ff9000;
}
.list-result-01 > li > .link > .label.update::after {
border-left-color: #bd6b00;
}
.list-result-01 > li > .link > .label.blog {
background-color: #00a0e9;
width: 85px;
}
.list-result-01 > li > .link > .label.blog::after {
border-left-color: #0080ba;
}
.list-result-01 > li > .link > .location {
position: relative;
line-height: 1.5;
margin-bottom: .375em;
padding-left: 15px;
color: #26a72d;
font-size: 1.6rem;
font-weight: bold;
}
.list-result-01 > li > .link > .location::before, .list-result-01 > li > .link > .location::after {
content: "";
position: absolute;
display: block;
}
.list-result-01 > li > .link > .location::before {
top: .375em;
left: 0;
width: 9px;
height: 9px;
border-radius: 50%;
border: 3px solid #26a72d;
}
.list-result-01 > li > .link > .location::after {
top: .8125em;
left: 4.5px;
width: 0;
height: 0;
margin-left: -3.5px;
border-width: 6px 3.5px 0 3.5px;
border-style: solid;
border-color: #26a72d transparent transparent transparent;
}
.list-result-01 > li > .link > .name {
line-height: 1.375;
margin-bottom: .375em;
font-size: 2.4rem;
font-weight: bold;
}
.list-result-01 > li > .link > .text-01 {
line-height: 1.5;
margin-bottom: 1em;
color: #666;
font-size: 1.4rem;
font-weight: bold;
}
.list-result-01 > li > .link > .img {
margin: 15px 0;
text-align: center;
}
.list-result-01 > li > .link > .employment,
.list-result-01 > li > .link > .environment {
display: flex;
flex-wrap: wrap;
margin: 0 0 5px -5px;
font-weight: bold;
}
.list-result-01 > li > .link > .employment > li,
.list-result-01 > li > .link > .environment > li {
margin: 5px 0 0 5px;
}
.list-result-01 > li > .link > .employment {
font-size: 1.4rem;
}
.list-result-01 > li > .link > .employment > li {
padding: .03625em 10px;
background-color: #26a72d;
color: #fff;
}
.list-result-01 > li > .link > .environment {
font-size: 1.3rem;
}
.list-result-01 > li > .link > .environment > li {
padding: .11625em 10px;
background-color: #eff9f0;
}
.list-result-01 > li > .link > .environment > li.breeding, .list-result-01 > li > .link > .environment > li.experience, .list-result-01 > li > .link > .environment > li.dwelling {
padding-left: 32px;
background-repeat: no-repeat;
background-position: 8px 50%;
}
.list-result-01 > li > .link > .environment > li.breeding {
background-image: url(/common/images/icon-breeding-01.png);
}
.list-result-01 > li > .link > .environment > li.experience {
background-image: url(/common/images/icon-experience-01.png);
}
.list-result-01 > li > .link > .environment > li.dwelling {
background-image: url(/common/images/icon-dwelling-01.png);
}
.list-result-01 > li > .link > .text-02 {
margin: 15px 0;
}
.list-result-01 > li > .link > .btn-link-01 {
position: absolute;
left: 30px;
right: 30px;
bottom: 25px;
margin: 0;
}
.list-result-01 > li > .link > .btn-link-01 > a,
.list-result-01 > li > .link > .btn-link-01 > button,
.list-result-01 > li > .link > .btn-link-01 > span {
min-width: 100%;
}
.list-result-01 > li > .link:hover, .list-result-01 > li > .link:focus, .list-result-01 > li > .link:active {
background-color: #eee;
}
.list-result-01 > li > .link:hover > .btn-link-01 > a > span,
.list-result-01 > li > .link:hover > .btn-link-01 > button > span,
.list-result-01 > li > .link:hover > .btn-link-01 > span > span, .list-result-01 > li > .link:focus > .btn-link-01 > a > span,
.list-result-01 > li > .link:focus > .btn-link-01 > button > span,
.list-result-01 > li > .link:focus > .btn-link-01 > span > span, .list-result-01 > li > .link:active > .btn-link-01 > a > span,
.list-result-01 > li > .link:active > .btn-link-01 > button > span,
.list-result-01 > li > .link:active > .btn-link-01 > span > span {
text-decoration: underline;
}
@media only screen and (max-width: 1024px) {
.list-result-01 > li > .link {
padding: 20px 20px calc(25px + 3.75em) 20px;
}
.list-result-01 > li > .link > .label {
right: 20px;
}
.list-result-01 > li > .link > .img {
margin: 10px 0;
}
.list-result-01 > li > .link > .text-02 {
margin-top: 10px;
}
}
@media only screen and (max-width: 768px) {
.list-result-01 > li > .link > .btn-link-01 > a,
.list-result-01 > li > .link > .btn-link-01 > button,
.list-result-01 > li > .link > .btn-link-01 > span {
min-width: 180px;
}
}
@media only screen and (max-width: 840px) {
.list-result-01 > li {
width: 50%;
}
}
@media only screen and (max-width: 600px) {
.list-result-01 > li {
width: 100%;
}
}
#ranch_list .list-result-01 > li {
width: calc((100% - .1px) / 3);
}
#ranch_list .list-result-01.kakunin > li {
width: calc((100% - .1px) / 4);
}
#ranch_list .list-result-01 > li > .link {
padding: 5px 12px;
display: flex;
align-items: center;
}
#ranch_list .list-result-01 > li > .link > .location {
margin: 0 10px 0 0;
max-width: 40%;
font-size: 1.4rem;
}
#ranch_list .list-result-01 > li > .link > .name {
margin-bottom: 0;
font-size: 2rem;
font-size: 1.4rem;
}
@media only screen and (max-width: 600px) {
#ranch_list .list-result-01 > li {
width: 100%;
}
#ranch_list .list-result-01.kakunin > li {
width: 50%;
}
}
.list-tab-01 {
display: flex;
font-size: 1.8rem;
font-weight: bold;
border: solid #ccc;
border-width: 0 1px;
}
.list-tab-01.top {
margin-bottom: 50px;
}
.list-tab-01.top > li[aria-current="true"] > a::before {
border-width: 8px 6.5px 0 6.5px;
border-color: #52a127 transparent transparent transparent;
bottom: -8px;
}
.list-tab-01.bottom {
margin-top: 50px;
}
.list-tab-01.bottom > li[aria-current="true"] > a::before {
border-width: 0 6.5px 8px 6.5px;
border-color: transparent transparent #52a127 transparent;
top: -8px;
}
.list-tab-01 > li {
flex-grow: 1;
flex-basis: 0%;
}
.list-tab-01 > li[aria-current="true"] > a {
background-color: #52a127;
border-color: #52a127;
color: #fff;
position: relative;
}
.list-tab-01 > li[aria-current="true"] > a::before {
content: "";
display: block;
width: 0;
height: 0;
border-style: solid;
position: absolute;
left: 50%;
margin-left: -6.5px;
}
.list-tab-01 > li + li {
border-left: solid 1px #ccc;
}
.list-tab-01 > li > a {
display: block;
color: inherit;
padding: 12px;
border: solid #ccc;
border-width: 2px 1px;
}
.list-tab-01 > li > a > span {
display: flex;
align-items: center;
justify-content: center;
}
@media only screen and (max-width: 768px) {
.list-tab-01 {
flex-wrap: wrap;
border-width: 1px;
}
.list-tab-01 > li {
flex-grow: 0;
flex-basis: auto;
width: 50%;
}
.list-tab-01 > li[aria-current="true"] > a {
border-color: #ccc;
}
.list-tab-01 > li[aria-current="true"] > a::before {
content: none;
}
.list-tab-01 > li + li {
border-left: none;
}
.list-tab-01 > li > a {
border-width: 1px;
padding: 6px;
}
}
.list-flow-01 {
display: flex;
}
.list-flow-01 > li {
background-color: #ecf7ec;
display: flex;
flex-direction: column;
flex-grow: 1;
flex-basis: 0%;
font-size: 2rem;
font-weight: bold;
line-height: 1.5;
text-align: center;
padding: 20px;
position: relative;
}
.list-flow-01 > li + li {
margin-left: 30px;
}
.list-flow-01 > li + li::before {
content: "";
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 17.5px 0 17.5px 17px;
border-color: transparent transparent transparent #eaeaea;
position: absolute;
left: -21px;
top: 50%;
margin-top: -17.5px;
}
.list-flow-01 > li > .label {
background-color: #52a127;
border-radius: 1em;
color: #fff;
display: block;
font-size: 1.4rem;
width: 100%;
}
.list-flow-01 > li > .txt {
margin-top: .75em;
display: flex;
flex-direction: column;
flex-grow: 1;
justify-content: center;
}
.list-flow-01 > li .note {
font-size: .7em;
}
@media only screen and (max-width: 768px) {
.list-flow-01 {
display: block;
}
.list-flow-01 > li {
padding: 15px 20px;
}
.list-flow-01 > li + li {
margin-left: 0;
margin-top: 30px;
}
.list-flow-01 > li + li::before {
border-width: 17.5px 17px 0 17.5px;
border-color: #eaeaea transparent transparent transparent;
left: 50%;
top: -21px;
margin-left: -17.5px;
margin-top: 0;
}
.list-flow-01 > li > .label {
max-width: 250px;
margin: 0 auto;
}
}
/* ===========================
link
--------------------------- */
.link-icon-01,
.link-icon-02 {
display: inline-block;
margin-top: -.1875em;
margin-left: .125em;
margin-right: .125em;
vertical-align: middle;
}
.link-icon-01 {
width: 14px;
height: 14px;
}
.link-icon-02 {
width: 19px;
height: 19px;
}
/* ===========================
button
--------------------------- */
.btn-link-01,
.btn-link-02,
.btn-more-01 {
margin: 0 0 50px 0;
text-align: center;
}
.btn-link-01 > a,
.btn-link-01 > button,
.btn-link-01 > span,
.btn-link-02 > a,
.btn-link-02 > button,
.btn-link-02 > span,
.btn-more-01 > a,
.btn-more-01 > button,
.btn-more-01 > span {
display: inline-block;
max-width: 500px;
min-width: 346px;
border: 2px solid #52a127;
padding: .875em 13px;
background-color: #fff;
color: #52a127;
font-size: 1.6rem;
font-weight: bold;
text-decoration: none;
}
.btn-link-01 > a > span,
.btn-link-01 > button > span,
.btn-link-01 > span > span,
.btn-link-02 > a > span,
.btn-link-02 > button > span,
.btn-link-02 > span > span,
.btn-more-01 > a > span,
.btn-more-01 > button > span,
.btn-more-01 > span > span {
position: relative;
display: inline-block;
padding-left: 18px;
}
.btn-link-01 > a > span::before,
.btn-link-01 > button > span::before,
.btn-link-01 > span > span::before,
.btn-link-02 > a > span::before,
.btn-link-02 > button > span::before,
.btn-link-02 > span > span::before,
.btn-more-01 > a > span::before,
.btn-more-01 > button > span::before,
.btn-more-01 > span > span::before {
content: "";
position: absolute;
top: .625em;
left: 2px;
display: block;
width: 8px;
height: 8px;
border-top: 2px solid #52a127;
border-right: 2px solid #52a127;
transform: translateX(-50%) rotate(45deg);
}
.btn-link-01.color-02 {
display: inline-block;
}
.btn-link-01.color-02 > a {
color: #333;
min-width: 250px;
border: 2px solid #ffa902;
padding: .5625em .875em .5625em .625em;
margin: 0 10px;
}
.btn-link-01.color-02 > a > span::before {
border-top: 2px solid #ffa902;
border-right: 2px solid #ffa902;
}
@media only screen and (max-width: 1081px) {
.btn-link-01.color-02 {
display: block;
margin-top: 10px;
}
}
@media only screen and (max-width: 768px) {
.btn-link-01.color-02 {
margin-top: 5px;
}
.btn-link-01.color-02 > a {
min-width: initial;
}
}
.btn-link-01 > a:hover > span, .btn-link-01 > a:focus > span, .btn-link-01 > a:active > span,
.btn-link-01 > button:hover > span,
.btn-link-01 > button:focus > span,
.btn-link-01 > button:active > span,
.btn-link-01 > span:hover > span,
.btn-link-01 > span:focus > span,
.btn-link-01 > span:active > span,
.btn-link-02 > a:hover > span,
.btn-link-02 > a:focus > span,
.btn-link-02 > a:active > span,
.btn-link-02 > button:hover > span,
.btn-link-02 > button:focus > span,
.btn-link-02 > button:active > span,
.btn-link-02 > span:hover > span,
.btn-link-02 > span:focus > span,
.btn-link-02 > span:active > span,
.btn-more-01 > a:hover > span,
.btn-more-01 > a:focus > span,
.btn-more-01 > a:active > span,
.btn-more-01 > button:hover > span,
.btn-more-01 > button:focus > span,
.btn-more-01 > button:active > span,
.btn-more-01 > span:hover > span,
.btn-more-01 > span:focus > span,
.btn-more-01 > span:active > span {
text-decoration: underline;
}
.btn-link-01 > li,
.btn-link-02 > li,
.btn-more-01 > li {
display: inline-block;
width: calc(50% - 20px);
text-align: right;
vertical-align: middle;
}
.btn-link-01 > li + li,
.btn-link-02 > li + li,
.btn-more-01 > li + li {
margin-left: 30px;
text-align: left;
}
.btn-link-01 > li > a,
.btn-link-01 > li > button,
.btn-link-01 > li > span,
.btn-link-02 > li > a,
.btn-link-02 > li > button,
.btn-link-02 > li > span,
.btn-more-01 > li > a,
.btn-more-01 > li > button,
.btn-more-01 > li > span {
display: inline-block;
max-width: 500px;
min-width: 346px;
border: 2px solid #52a127;
padding: .875em 13px;
background-color: #fff;
color: #52a127;
font-size: 1.6rem;
font-weight: bold;
text-align: center;
text-decoration: none;
}
.btn-link-01 > li > a > span,
.btn-link-01 > li > button > span,
.btn-link-01 > li > span > span,
.btn-link-02 > li > a > span,
.btn-link-02 > li > button > span,
.btn-link-02 > li > span > span,
.btn-more-01 > li > a > span,
.btn-more-01 > li > button > span,
.btn-more-01 > li > span > span {
position: relative;
display: inline-block;
padding-left: 18px;
}
.btn-link-01 > li > a > span::before,
.btn-link-01 > li > button > span::before,
.btn-link-01 > li > span > span::before,
.btn-link-02 > li > a > span::before,
.btn-link-02 > li > button > span::before,
.btn-link-02 > li > span > span::before,
.btn-more-01 > li > a > span::before,
.btn-more-01 > li > button > span::before,
.btn-more-01 > li > span > span::before {
content: "";
position: absolute;
top: .625em;
left: 2px;
display: block;
width: 8px;
height: 8px;
border-top: 2px solid #52a127;
border-right: 2px solid #52a127;
transform: translateX(-50%) rotate(45deg);
}
.btn-link-01 > li > a:hover > span, .btn-link-01 > li > a:focus > span, .btn-link-01 > li > a:active > span,
.btn-link-01 > li > button:hover > span,
.btn-link-01 > li > button:focus > span,
.btn-link-01 > li > button:active > span,
.btn-link-01 > li > span:hover > span,
.btn-link-01 > li > span:focus > span,
.btn-link-01 > li > span:active > span,
.btn-link-02 > li > a:hover > span,
.btn-link-02 > li > a:focus > span,
.btn-link-02 > li > a:active > span,
.btn-link-02 > li > button:hover > span,
.btn-link-02 > li > button:focus > span,
.btn-link-02 > li > button:active > span,
.btn-link-02 > li > span:hover > span,
.btn-link-02 > li > span:focus > span,
.btn-link-02 > li > span:active > span,
.btn-more-01 > li > a:hover > span,
.btn-more-01 > li > a:focus > span,
.btn-more-01 > li > a:active > span,
.btn-more-01 > li > button:hover > span,
.btn-more-01 > li > button:focus > span,
.btn-more-01 > li > button:active > span,
.btn-more-01 > li > span:hover > span,
.btn-more-01 > li > span:focus > span,
.btn-more-01 > li > span:active > span {
text-decoration: underline;
}
.btn-link-01.reverse > a > span::before,
.btn-link-01.reverse > button > span::before,
.btn-link-01.reverse > span > span::before,
.btn-link-02.reverse > a > span::before,
.btn-link-02.reverse > button > span::before,
.btn-link-02.reverse > span > span::before,
.btn-more-01.reverse > a > span::before,
.btn-more-01.reverse > button > span::before,
.btn-more-01.reverse > span > span::before {
left: 6px;
transform: translateX(-50%) rotate(225deg);
}
.btn-link-01.reverse > li > a > span::before,
.btn-link-01.reverse > li > button > span::before,
.btn-link-01.reverse > li > span > span::before,
.btn-link-02.reverse > li > a > span::before,
.btn-link-02.reverse > li > button > span::before,
.btn-link-02.reverse > li > span > span::before,
.btn-more-01.reverse > li > a > span::before,
.btn-more-01.reverse > li > button > span::before,
.btn-more-01.reverse > li > span > span::before {
left: 6px;
transform: translateX(-50%) rotate(225deg);
}
.btn-link-01.inline,
.btn-link-02.inline,
.btn-more-01.inline {
margin: 0 10px;
}
.btn-link-01.inline > a,
.btn-link-01.inline > button,
.btn-link-01.inline > span,
.btn-link-02.inline > a,
.btn-link-02.inline > button,
.btn-link-02.inline > span,
.btn-more-01.inline > a,
.btn-more-01.inline > button,
.btn-more-01.inline > span {
min-width: inherit;
width: auto;
padding: .5625em .875em .5625em .625em;
}
.btn-link-01.inline > a > span,
.btn-link-01.inline > button > span,
.btn-link-01.inline > span > span,
.btn-link-02.inline > a > span,
.btn-link-02.inline > button > span,
.btn-link-02.inline > span > span,
.btn-more-01.inline > a > span,
.btn-more-01.inline > button > span,
.btn-more-01.inline > span > span {
padding-left: 14px;
}
.btn-link-01.inline > li > a,
.btn-link-01.inline > li > button,
.btn-link-01.inline > li > span,
.btn-link-02.inline > li > a,
.btn-link-02.inline > li > button,
.btn-link-02.inline > li > span,
.btn-more-01.inline > li > a,
.btn-more-01.inline > li > button,
.btn-more-01.inline > li > span {
width: auto;
padding: .5625em .875em .5625em .625em;
}
.btn-link-01.inline > li > a > span,
.btn-link-01.inline > li > button > span,
.btn-link-01.inline > li > span > span,
.btn-link-02.inline > li > a > span,
.btn-link-02.inline > li > button > span,
.btn-link-02.inline > li > span > span,
.btn-more-01.inline > li > a > span,
.btn-more-01.inline > li > button > span,
.btn-more-01.inline > li > span > span {
padding-left: 14px;
}
.btn-link-01.ta-l > a,
.btn-link-01.ta-l > button,
.btn-link-01.ta-l > span, .btn-link-01.ta-r > a,
.btn-link-01.ta-r > button,
.btn-link-01.ta-r > span,
.btn-link-02.ta-l > a,
.btn-link-02.ta-l > button,
.btn-link-02.ta-l > span,
.btn-link-02.ta-r > a,
.btn-link-02.ta-r > button,
.btn-link-02.ta-r > span,
.btn-more-01.ta-l > a,
.btn-more-01.ta-l > button,
.btn-more-01.ta-l > span,
.btn-more-01.ta-r > a,
.btn-more-01.ta-r > button,
.btn-more-01.ta-r > span {
text-align: center;
}
.btn-link-01.ta-l > li > a,
.btn-link-01.ta-l > li > button,
.btn-link-01.ta-l > li > span, .btn-link-01.ta-r > li > a,
.btn-link-01.ta-r > li > button,
.btn-link-01.ta-r > li > span,
.btn-link-02.ta-l > li > a,
.btn-link-02.ta-l > li > button,
.btn-link-02.ta-l > li > span,
.btn-link-02.ta-r > li > a,
.btn-link-02.ta-r > li > button,
.btn-link-02.ta-r > li > span,
.btn-more-01.ta-l > li > a,
.btn-more-01.ta-l > li > button,
.btn-more-01.ta-l > li > span,
.btn-more-01.ta-r > li > a,
.btn-more-01.ta-r > li > button,
.btn-more-01.ta-r > li > span {
text-align: center;
}
.btn-link-02 > a,
.btn-link-02 > button,
.btn-link-02 > span,
.btn-more-01 > a,
.btn-more-01 > button,
.btn-more-01 > span {
border-color: #1db525;
background-color: #1db525;
color: #fff;
}
.btn-link-02 > a > span::before,
.btn-link-02 > button > span::before,
.btn-link-02 > span > span::before,
.btn-more-01 > a > span::before,
.btn-more-01 > button > span::before,
.btn-more-01 > span > span::before {
border-color: #fff;
}
.btn-link-02 > li > a,
.btn-link-02 > li > button,
.btn-link-02 > li > span,
.btn-more-01 > li > a,
.btn-more-01 > li > button,
.btn-more-01 > li > span {
border-color: #1db525;
background-color: #1db525;
color: #fff;
}
.btn-link-02 > li > a > span::before,
.btn-link-02 > li > button > span::before,
.btn-link-02 > li > span > span::before,
.btn-more-01 > li > a > span::before,
.btn-more-01 > li > button > span::before,
.btn-more-01 > li > span > span::before {
border-color: #fff;
}
.btn-more-01 > a > span::before,
.btn-more-01 > button > span::before,
.btn-more-01 > span > span::before {
top: .5em;
transform: translateX(-20%) rotate(135deg);
}
.btn-more-01 > li > a > span::before,
.btn-more-01 > li > button > span::before,
.btn-more-01 > li > span > span::before {
top: .5em;
transform: translateX(-20%) rotate(135deg);
}
@media only screen and (max-width: 1024px) {
.btn-link-01 > li > a,
.btn-link-01 > li > button,
.btn-link-01 > li > span,
.btn-link-02 > li > a,
.btn-link-02 > li > button,
.btn-link-02 > li > span,
.btn-more-01 > li > a,
.btn-more-01 > li > button,
.btn-more-01 > li > span {
min-width: 100%;
}
}
@media only screen and (max-width: 768px) {
.btn-link-01 > li,
.btn-link-02 > li,
.btn-more-01 > li {
display: block;
width: 100%;
text-align: center;
}
.btn-link-01 > li + li,
.btn-link-02 > li + li,
.btn-more-01 > li + li {
margin-top: 20px;
margin-left: 0;
text-align: center;
}
.btn-link-01 > li > a,
.btn-link-01 > li > button,
.btn-link-01 > li > span,
.btn-link-02 > li > a,
.btn-link-02 > li > button,
.btn-link-02 > li > span,
.btn-more-01 > li > a,
.btn-more-01 > li > button,
.btn-more-01 > li > span {
min-width: 180px;
}
.btn-link-01 > a,
.btn-link-01 > button,
.btn-link-01 > span,
.btn-link-02 > a,
.btn-link-02 > button,
.btn-link-02 > span,
.btn-more-01 > a,
.btn-more-01 > button,
.btn-more-01 > span {
min-width: 180px;
}
}
@media only screen and (max-width: 480px) {
.btn-link-01.inline,
.btn-link-02.inline,
.btn-more-01.inline {
display: block;
margin: .25em 0 0 0;
text-align: left;
}
.btn-link-01.inline > a,
.btn-link-01.inline > button,
.btn-link-01.inline > span,
.btn-link-02.inline > a,
.btn-link-02.inline > button,
.btn-link-02.inline > span,
.btn-more-01.inline > a,
.btn-more-01.inline > button,
.btn-more-01.inline > span {
padding: .5625em 2.75em .5625em 2.5em;
}
}
.list-btn-01 {
text-align: center;
margin-bottom: 50px;
}
.list-btn-01 > li {
display: inline-block;
vertical-align: middle;
max-width: calc(50% - 20px);
width: 283px;
margin-bottom: 0;
}
.list-btn-01 > li + li {
margin-left: 30px;
}
.list-btn-01 > li > a,
.list-btn-01 > li > button,
.list-btn-01 > li > span {
min-width: 0;
width: 100%;
}
@media only screen and (max-width: 480px) {
.list-btn-01 > li {
display: block;
width: 100%;
max-width: none;
}
.list-btn-01 > li + li {
margin-left: 0;
margin-top: 20px;
}
.list-btn-01 > li > a,
.list-btn-01 > li > button,
.list-btn-01 > li > span {
min-width: 230px;
width: auto;
padding: .55em 13px;
}
}
.list-error-01 {
border: 1px solid #ed3131;
color: #ed3131;
padding: 22px 28px 22px 28px;
margin: 35px 0;
}
.list-error-01 > li {
position: relative;
padding-left: 30px;
}
.list-error-01 > li::before {
content: "";
position: absolute;
top: .25em;
left: 0;
display: block;
width: 20px;
height: 18px;
background: transparent url(/common/images/icon-alert-01.png) no-repeat 50% 50%;
background-size: cover;
}
/* ===========================
.m-list-date
--------------------------- */
.m-list-date {
margin-bottom: 0;
display: flex;
flex-direction: column;
row-gap: .3em;
}
.m-list-date__item {
display: flex;
}
.m-list-date__time {
display: inline-block;
min-width: 3.5em;
}
/* ===========================
table
--------------------------- */
table td,
table th {
word-break: break-all;
}
table .w5 {
width: 5%;
}
table .w10 {
width: 10%;
}
table .w15 {
width: 15%;
}
table .w20 {
width: 20%;
}
table .w25 {
width: 25%;
}
table .w30 {
width: 30%;
}
table .w35 {
width: 35%;
}
table .w40 {
width: 40%;
}
table .w45 {
width: 45%;
}
table .w50 {
width: 50%;
}
table .w55 {
width: 55%;
}
table .w60 {
width: 60%;
}
table .w65 {
width: 65%;
}
table .w70 {
width: 70%;
}
table .w75 {
width: 75%;
}
table .w80 {
width: 80%;
}
table .w85 {
width: 85%;
}
table .w90 {
width: 90%;
}
table .w95 {
width: 95%;
}
table .w100 {
width: 100%;
}
.tbl-data-01 {
width: 100%;
margin: 30px 0;
border-top: 1px solid #ccc;
}
.tbl-data-01 th,
.tbl-data-01 td {
border-bottom: 1px solid #ccc;
padding: 20px 30px;
font-size: 1.6rem;
text-align: left;
vertical-align: middle;
}
.tbl-data-01 th p:last-child,
.tbl-data-01 th ul:last-child,
.tbl-data-01 th ol:last-child,
.tbl-data-01 th dl:last-child,
.tbl-data-01 td p:last-child,
.tbl-data-01 td ul:last-child,
.tbl-data-01 td ol:last-child,
.tbl-data-01 td dl:last-child {
margin-bottom: 0;
}
.tbl-data-01 th {
width: 25%;
background-color: #eee;
}
.tbl-data-01 th.strong {
color: #1DB525;
}
.tbl-data-01 td {
width: 75%;
background-color: #fff;
}
.tbl-data-01.col4 th {
width: 12.5%;
background-color: #eee;
}
.tbl-data-01.col4 td {
width: 37.5%;
background-color: #fff;
}
.tbl-data-01--job th,
.tbl-data-01--job td {
vertical-align: top;
}
.tbl-data-01--job th {
text-align: center;
}
.tbl-data-01--job td:first-child {
width: 25%;
}
.tbl-data-01--job tr th:last-child,
.tbl-data-01--job tr td:last-child {
border-left: 1px solid #ccc;
}
@media only screen and (max-width: 768px) {
.tbl-data-01 tr,
.tbl-data-01 th,
.tbl-data-01 td {
display: block;
}
.tbl-data-01 th,
.tbl-data-01 td {
width: 100%;
padding: 15px 10px 15px 20px;
}
.tbl-data-01 th {
border-bottom: none;
}
.tbl-data-01.col4 th,
.tbl-data-01.col4 td {
width: 100%;
}
.tbl-data-01--job tr {
display: table-row;
}
.tbl-data-01--job th,
.tbl-data-01--job td {
display: table-cell;
padding: 15px;
}
.tbl-data-01--job td:first-child,
.tbl-data-01--job th:first-child {
width: 25%;
min-width: 120px;
}
.tbl-data-01--job td:last-child,
.tbl-data-01--job th:last-child {
width: 75%;
}
}
.tbl-form-01 {
width: 100%;
margin: 40px 0;
border-bottom: 1px solid #ccc;
}
.tbl-form-01 th,
.tbl-form-01 td {
border-top: 1px solid #ccc;
padding: 20px 30px;
font-size: 1.6rem;
text-align: left;
vertical-align: middle;
}
.tbl-form-01 th p,
.tbl-form-01 th ul,
.tbl-form-01 th ol,
.tbl-form-01 th dl,
.tbl-form-01 td p,
.tbl-form-01 td ul,
.tbl-form-01 td ol,
.tbl-form-01 td dl {
margin-bottom: 0;
}
.tbl-form-01 th {
width: 30%;
background-color: #eee;
}
.tbl-form-01 td {
background-color: #fff;
}
.tbl-form-01 .required {
float: right;
display: block;
margin-top: .125em;
padding: .125em 10px;
background-color: #ed3131;
color: #fff;
font-size: 1.2rem;
font-weight: bold;
}
.tbl-form-01 .radio-01,
.tbl-form-01 .checkbox-01 {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
}
.ie .tbl-form-01 .radio-01, .ie
.tbl-form-01 .checkbox-01 {
display: block;
}
.tbl-form-01 .radio-01 > li,
.tbl-form-01 .checkbox-01 > li {
flex-shrink: 0;
margin-right: 3.75vw;
}
.tbl-form-01 .radio-01 > li:last-child,
.tbl-form-01 .checkbox-01 > li:last-child {
margin-right: 0;
}
.tbl-form-01 .radio-01 > li > label,
.tbl-form-01 .checkbox-01 > li > label {
position: relative;
display: inline-block;
overflow: hidden;
outline: 1px dotted transparent;
vertical-align: bottom;
transition: outline-color .2s;
}
.tbl-form-01 .radio-01 > li > label:focus-within,
.tbl-form-01 .checkbox-01 > li > label:focus-within {
outline-color: #999;
}
.tbl-form-01 .radio-01 > li > label.focus-within,
.tbl-form-01 .checkbox-01 > li > label.focus-within {
outline-color: #999;
}
.tbl-form-01 .radio-01 > li > label > input[type="radio"], .tbl-form-01 .radio-01 > li > label > input[type="checkbox"],
.tbl-form-01 .checkbox-01 > li > label > input[type="radio"],
.tbl-form-01 .checkbox-01 > li > label > input[type="checkbox"] {
position: absolute;
left: -2em;
}
.tbl-form-01 .radio-01 > li > label > input[type="radio"] + span, .tbl-form-01 .radio-01 > li > label > input[type="checkbox"] + span,
.tbl-form-01 .checkbox-01 > li > label > input[type="radio"] + span,
.tbl-form-01 .checkbox-01 > li > label > input[type="checkbox"] + span {
position: relative;
display: inline-block;
vertical-align: bottom;
}
.tbl-form-01 .radio-01 > li > label > input[type="radio"] + span::before, .tbl-form-01 .radio-01 > li > label > input[type="radio"] + span::after, .tbl-form-01 .radio-01 > li > label > input[type="checkbox"] + span::before, .tbl-form-01 .radio-01 > li > label > input[type="checkbox"] + span::after,
.tbl-form-01 .checkbox-01 > li > label > input[type="radio"] + span::before,
.tbl-form-01 .checkbox-01 > li > label > input[type="radio"] + span::after,
.tbl-form-01 .checkbox-01 > li > label > input[type="checkbox"] + span::before,
.tbl-form-01 .checkbox-01 > li > label > input[type="checkbox"] + span::after {
content: "";
position: absolute;
top: 50%;
display: block;
}
.tbl-form-01 .radio-01 > li > label > input[type="radio"] + span::before, .tbl-form-01 .radio-01 > li > label > input[type="checkbox"] + span::before,
.tbl-form-01 .checkbox-01 > li > label > input[type="radio"] + span::before,
.tbl-form-01 .checkbox-01 > li > label > input[type="checkbox"] + span::before {
left: 0;
border: 1px solid #ccc;
}
.tbl-form-01 .radio-01 > li > label > input[type="radio"] + span::after, .tbl-form-01 .radio-01 > li > label > input[type="checkbox"] + span::after,
.tbl-form-01 .checkbox-01 > li > label > input[type="radio"] + span::after,
.tbl-form-01 .checkbox-01 > li > label > input[type="checkbox"] + span::after {
left: 6px;
opacity: 0;
transition: opacity .2s;
}
.tbl-form-01 .radio-01 > li > label > input[type="radio"]:checked + span::after, .tbl-form-01 .radio-01 > li > label > input[type="checkbox"]:checked + span::after,
.tbl-form-01 .checkbox-01 > li > label > input[type="radio"]:checked + span::after,
.tbl-form-01 .checkbox-01 > li > label > input[type="checkbox"]:checked + span::after {
opacity: 1;
}
.tbl-form-01 .radio-01 > li > label > input[type="radio"] + span,
.tbl-form-01 .checkbox-01 > li > label > input[type="radio"] + span {
padding-left: 40px;
}
.tbl-form-01 .radio-01 > li > label > input[type="radio"] + span::before, .tbl-form-01 .radio-01 > li > label > input[type="radio"] + span::after,
.tbl-form-01 .checkbox-01 > li > label > input[type="radio"] + span::before,
.tbl-form-01 .checkbox-01 > li > label > input[type="radio"] + span::after {
border-radius: 50%;
}
.tbl-form-01 .radio-01 > li > label > input[type="radio"] + span::before,
.tbl-form-01 .checkbox-01 > li > label > input[type="radio"] + span::before {
width: 24px;
height: 24px;
margin-top: -12px;
}
.tbl-form-01 .radio-01 > li > label > input[type="radio"] + span::after,
.tbl-form-01 .checkbox-01 > li > label > input[type="radio"] + span::after {
width: 12px;
height: 12px;
margin-top: -6px;
background-color: #52a127;
}
.tbl-form-01 .radio-01 > li > label > input[type="checkbox"] + span,
.tbl-form-01 .checkbox-01 > li > label > input[type="checkbox"] + span {
padding-left: 30px;
}
.tbl-form-01 .radio-01 > li > label > input[type="checkbox"] + span::before,
.tbl-form-01 .checkbox-01 > li > label > input[type="checkbox"] + span::before {
width: 18px;
height: 18px;
margin-top: -9px;
}
.tbl-form-01 .radio-01 > li > label > input[type="checkbox"] + span::after,
.tbl-form-01 .checkbox-01 > li > label > input[type="checkbox"] + span::after {
width: 7px;
height: 11px;
margin-top: -7px;
border-right: 2px solid #52a127;
border-bottom: 2px solid #52a127;
transition: opacity .2s;
transform: rotate(45deg) skew(10deg);
}
.tbl-form-01 .radio-01.text-within > li > label,
.tbl-form-01 .checkbox-01.text-within > li > label {
padding-bottom: .6em;
}
.tbl-form-01 .radio-01.text-within > li > label.text-01,
.tbl-form-01 .checkbox-01.text-within > li > label.text-01 {
display: inline-flex;
width: 200px;
margin-right: 0;
padding-bottom: 0;
}
.tbl-form-01 .radio-01.text-within > li > label.text-01:focus-within,
.tbl-form-01 .checkbox-01.text-within > li > label.text-01:focus-within {
outline-color: transparent;
}
.tbl-form-01 .radio-01.text-within > li > label + .text-01,
.tbl-form-01 .checkbox-01.text-within > li > label + .text-01 {
margin-left: .25em;
}
.tbl-form-01 .text-01 {
display: inline-flex;
align-items: flex-end;
margin-right: 3.75vw;
}
.tbl-form-01 .text-01:last-child {
margin-right: 0;
}
.tbl-form-01 .text-01.w-large {
width: 50%;
}
.tbl-form-01 .text-01.w-medium {
width: 42.5%;
}
.tbl-form-01 .text-01.w-small {
width: 21.25%;
min-width: 160px;
}
.tbl-form-01 .text-01 > span + span {
margin-left: 10px;
}
.tbl-form-01 .text-01 > span.label {
flex-shrink: 0;
margin-bottom: .6em;
}
.tbl-form-01 .text-01 > span.input {
flex-grow: 1;
}
.tbl-form-01 .text-01 > span.input .example {
display: block;
line-height: 1.25;
margin-bottom: .5em;
color: #666;
}
.tbl-form-01 .text-01 > span.input input[type="text"], .tbl-form-01 .text-01 > span.input input[type="tel"], .tbl-form-01 .text-01 > span.input input[type="number"] {
width: 100%;
border: 1px solid #ccc;
padding: .46875em 5px;
font-size: 1.6rem;
}
.tbl-form-01 .text-01 > span.input input[type="number"] {
-webkit-appearance: textfield;
appearance: textfield;
}
.tbl-form-01 .text-01 > span.input input[type="number"]::-webkit-outer-spin-button, .tbl-form-01 .text-01 > span.input input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.tbl-form-01 .text-01 > span.input input[type="number"]::outer-spin-button, .tbl-form-01 .text-01 > span.input input[type="number"]::inner-spin-button {
appearance: none;
margin: 0;
}
.tbl-form-01 .text-01.error > span.input input[type="text"], .tbl-form-01 .text-01.error > span.input input[type="tel"], .tbl-form-01 .text-01.error > span.input input[type="number"] {
border-color: #ed3131;
background-color: #fff0f0;
}
.tbl-form-01 .select-01 {
position: relative;
display: inline-block;
}
.tbl-form-01 .select-01.w-large {
width: 50%;
}
.tbl-form-01 .select-01.w-medium {
width: 42.5%;
}
.tbl-form-01 .select-01.w-small {
width: 21.25%;
}
.tbl-form-01 .select-01::after {
content: "";
position: absolute;
top: 50%;
right: 15px;
display: block;
width: 0;
height: 0;
margin-left: -4px;
border-width: 6px 4px 0 4px;
border-style: solid;
border-color: #000 transparent transparent transparent;
margin-top: -3px;
pointer-events: none;
}
.tbl-form-01 .select-01 select {
display: inline-block;
width: 100%;
border-radius: 0;
border: 1px solid #ccc;
padding: .5em 30px .5em 10px;
background-color: #fff;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.tbl-form-01 .select-01 select::-ms-expand {
display: none;
}
.tbl-form-01 .textarea-01 {
width: 100%;
}
.tbl-form-01 .textarea-01 textarea {
display: block;
width: 100%;
height: 13em;
line-height: 1.375;
border: 1px solid #ccc;
padding: .5em 10px;
font-size: 1.6rem;
}
.tbl-form-01 p.error {
position: relative;
margin-bottom: .5em;
padding-left: 28px;
color: #ed3131;
}
.tbl-form-01 p.error::before {
content: "";
position: absolute;
top: .3em;
left: 0;
display: block;
width: 20px;
height: 18px;
background: transparent url(/common/images/icon-alert-01.png) no-repeat 50% 50%;
background-size: cover;
}
@media only screen and (max-width: 768px) {
.tbl-form-01 {
margin: 30px 0;
}
.tbl-form-01 tr,
.tbl-form-01 th,
.tbl-form-01 td {
display: block;
}
.tbl-form-01 th {
width: 100%;
padding: 15px 10px 15px 20px;
}
.tbl-form-01 td {
border-top: none;
padding: 20px;
}
.tbl-form-01 .radio-01 > li,
.tbl-form-01 .checkbox-01 > li {
width: 100%;
margin-right: 0;
}
.tbl-form-01 .radio-01 > li + li,
.tbl-form-01 .checkbox-01 > li + li {
margin-top: 10px;
}
.tbl-form-01 .radio-01 > li > label > input[type="checkbox"] + span,
.tbl-form-01 .checkbox-01 > li > label > input[type="checkbox"] + span {
padding-left: 32px;
}
.tbl-form-01 .radio-01 > li > label > input[type="checkbox"] + span::before,
.tbl-form-01 .checkbox-01 > li > label > input[type="checkbox"] + span::before {
width: 24px;
height: 24px;
margin-top: -12px;
}
.tbl-form-01 .radio-01 > li > label > input[type="checkbox"] + span::after,
.tbl-form-01 .checkbox-01 > li > label > input[type="checkbox"] + span::after {
left: 8px;
width: 9px;
height: 15px;
margin-top: -10px;
}
.tbl-form-01 .radio-01.text-within > li > label,
.tbl-form-01 .checkbox-01.text-within > li > label {
padding-bottom: 0;
}
.tbl-form-01 .radio-01.text-within > li > label.text-01,
.tbl-form-01 .checkbox-01.text-within > li > label.text-01 {
width: 100%;
}
.tbl-form-01 .radio-01.text-within > li > label + .text-01,
.tbl-form-01 .checkbox-01.text-within > li > label + .text-01 {
margin-top: .5em;
margin-left: 0;
}
.tbl-form-01 .text-01 {
margin-right: 0;
}
.tbl-form-01 .text-01.w-large, .tbl-form-01 .text-01.w-medium {
width: 100%;
}
.tbl-form-01 .text-01.w-small {
width: 27.5%;
margin-right: 20px;
}
.tbl-form-01 .text-01 + .text-01 {
margin-top: .625em;
}
.tbl-form-01 .select-01.w-large, .tbl-form-01 .select-01.w-medium, .tbl-form-01 .select-01.w-small {
width: 100%;
}
.tbl-form-01 .textarea-01 textarea {
height: 11em;
}
.tbl-form-01 p + .radio-01,
.tbl-form-01 p + .checkbox-01 {
margin-top: .75em;
}
}
/* ===========================
adjust
--------------------------- */
.mt-00 {
margin-top: 0 !important;
}
.mt-01 {
margin-top: .25em !important;
}
.mt-02 {
margin-top: .5em !important;
}
.mt-03 {
margin-top: 1em !important;
}
.mt-04 {
margin-top: 2em !important;
}
.mt-05 {
margin-top: 4em !important;
}
.mb-00 {
margin-bottom: 0 !important;
}
.mb-01 {
margin-bottom: .25em !important;
}
.mb-02 {
margin-bottom: .5em !important;
}
.mb-03 {
margin-bottom: 1em !important;
}
.mb-04 {
margin-bottom: 2em !important;
}
.mb-05 {
margin-bottom: 4em !important;
}
.ta-l {
text-align: left !important;
}
.ta-l th, .ta-l td {
text-align: left !important;
}
.ta-c {
text-align: center !important;
}
.ta-c th, .ta-c td {
text-align: center !important;
}
.ta-r {
text-align: right !important;
}
.ta-r th, .ta-r td {
text-align: right !important;
}
.va-t {
vertical-align: top !important;
}
.va-t th, .va-t td {
vertical-align: top !important;
}
.va-m {
vertical-align: middle !important;
}
.va-m th, .va-m td {
vertical-align: middle !important;
}
.va-b {
vertical-align: bottom !important;
}
.va-b th, .va-b td {
vertical-align: bottom !important;
}
.fs-s {
font-size: 87.5%;
}
.fs-m {
font-size: 100%;
}
.fs-l {
font-size: 112.5%;
}
.fs-ll {
font-size: 140.5%;
}
.fc-01 {
color: #07458a;
}
/* ===========================
unique
--------------------------- */
#main-visual {
position: relative;
height: 643px;
margin-bottom: -150px;
opacity: 0;
transition: opacity 1.8s;
z-index: 1;
}
#main-visual > .inner {
pointer-events: none;
position: relative;
z-index: 9;
height: 100%;
max-width: 1280px;
margin: 0 auto;
}
#main-visual > .inner > .text {
position: absolute;
bottom: 170px;
left: 15px;
line-height: 1.45;
color: #fff;
font-size: 6rem;
font-weight: bold;
text-shadow: 0 0 .15em #2e87a8, 0 0 .15em #2e87a8, 0 0 .15em #2e87a8;
transition: .2s opacity;
opacity: 1;
}
#main-visual > .list {
margin: 0;
}
#main-visual > .list > li {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: transparent none no-repeat 50% 50%;
background-size: cover;
opacity: 0;
}
#main-visual > .list > li.mv-01 {
background-position: top 50% right 0;
}
#main-visual > .list > li.mv-02 {
background-position: top 42% right 6px;
}
#main-visual .ui {
position: absolute;
left: 0;
right: 0;
bottom: 170px;
z-index: 8;
display: flex;
justify-content: center;
}
#main-visual .ui button {
position: relative;
overflow: hidden;
}
#main-visual .ui button > span {
position: absolute;
top: -999em;
left: -999em;
}
#main-visual .ui > .indicator {
display: flex;
margin-bottom: 0;
}
#main-visual .ui > .indicator > li {
margin-right: 8px;
padding: 3.5px 0;
}
#main-visual .ui > .indicator > li > button {
display: block;
width: 50px;
height: 5px;
border: 1px solid #d8d8d8;
background-color: #fff;
}
#main-visual .ui > .indicator > li > button[aria-selected="true"] {
background-color: #52a127;
}
#main-visual .ui > .indicator > li > button:hover, #main-visual .ui > .indicator > li > button:focus, #main-visual .ui > .indicator > li > button:active {
background-color: #52a127;
}
#main-visual .ui > .state {
width: 12px;
height: 12px;
margin-left: 5px;
}
#main-visual .ui > .state[aria-pressed]::before, #main-visual .ui > .state[aria-pressed]::after {
content: "";
position: absolute;
display: block;
}
#main-visual .ui > .state[aria-pressed="false"]::before, #main-visual .ui > .state[aria-pressed="false"]::after {
top: 0;
bottom: 0;
border: 1px solid #d8d8d8;
background-color: #fff;
width: 5px;
}
#main-visual .ui > .state[aria-pressed="false"]::before {
left: 0;
}
#main-visual .ui > .state[aria-pressed="false"]::after {
right: 0;
}
#main-visual .ui > .state[aria-pressed="false"]:hover::before, #main-visual .ui > .state[aria-pressed="false"]:hover::after, #main-visual .ui > .state[aria-pressed="false"]:focus::before, #main-visual .ui > .state[aria-pressed="false"]:focus::after, #main-visual .ui > .state[aria-pressed="false"]:active::before, #main-visual .ui > .state[aria-pressed="false"]:active::after {
background-color: #52a127;
}
#main-visual .ui > .state[aria-pressed="true"]::before, #main-visual .ui > .state[aria-pressed="true"]::after {
width: 0;
height: 0;
border-style: solid;
}
#main-visual .ui > .state[aria-pressed="true"]::before {
top: 0;
left: 0;
border-width: 6px 0 6px 12px;
border-color: transparent transparent transparent #d8d8d8;
}
#main-visual .ui > .state[aria-pressed="true"]::after {
top: 1.5px;
left: 1px;
border-width: 4.5px 0 4.5px 9px;
border-color: transparent transparent transparent #fff;
}
#main-visual .ui > .state[aria-pressed="true"]:hover::after, #main-visual .ui > .state[aria-pressed="true"]:focus::after, #main-visual .ui > .state[aria-pressed="true"]:active::after {
border-color: transparent transparent transparent #52a127;
}
#main-visual.ready {
opacity: 1;
}
#main-visual.ready > .list > li {
transition: opacity 1.8s;
}
#main-visual.ready > .list > li.current {
opacity: 1;
}
#main-visual.static,
.static #main-visual {
background: transparent url(/images/mv-01.jpg) no-repeat 47.5% 100%;
background-size: cover;
opacity: 1;
transition: none;
}
#main-visual.static > .list > li,
.static #main-visual > .list > li {
opacity: 1;
}
@media only screen and (max-width: 1440px) {
#main-visual > .list > li.mv-01 {
background-position: top 83% right 0;
}
#main-visual > .list > li.mv-02 {
background-position: top 60% right 6%;
}
}
@media only screen and (max-width: 1024px) {
#main-visual > .inner > .text {
bottom: auto;
top: 15px;
font-size: 5rem;
text-shadow: 0 0 .25em #2e87a8, 0 0 .25em #2e87a8, 0 0 .25em #2e87a8, 0 0 .25em #2e87a8;
}
}
@media only screen and (max-width: 768px) {
#main-visual {
height: 540px;
margin-bottom: -50px;
}
#main-visual > .inner > .text {
top: 35px;
left: 15px;
right: inherit;
font-size: 4rem;
}
#main-visual > .list > li.mv-01 {
background-size: cover;
background-position: top 0 right 0;
}
#main-visual > .list > li.mv-02 {
background-size: cover;
background-position: top 0 right 28%;
}
#main-visual .ui {
bottom: 70px;
}
#main-visual.static,
.static #main-visual {
background-size: auto 120%;
}
}
@media only screen and (max-width: 480px) {
#main-visual {
height: 643px;
margin-bottom: -196px;
}
#main-visual > .inner > .text {
width: 100%;
top: 40px;
font-size: 3.7rem;
text-align: center;
}
#main-visual .ui {
bottom: 210px;
}
}
.hdg-top-01 {
line-height: 1.25;
margin: 60px 0;
font-size: 3rem;
font-weight: bold;
text-align: center;
}
@media only screen and (max-width: 768px) {
.hdg-top-01 {
margin: 50px 0 30px 0;
font-size: 2.4rem;
font-weight: bold;
}
}
.area-event-01 {
position: relative;
min-height: 434px;
padding: .1px 0;
}
.area-event-01::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 1;
display: block;
height: 434px;
background: #778b3a url(/common/images/bg-event-01.webp) no-repeat 20% 50%;
background-size: cover;
}
.area-event-01 > .inner {
position: relative;
z-index: 2;
max-width: 1320px;
margin: 0 auto;
padding: .1px 20px;
}
.area-event-01 > .inner > .hdg {
line-height: 1.5;
margin: 130px 0 90px 0;
color: #fff;
font-size: 3.4rem;
font-weight: bold;
text-align: center;
}
.area-event-01 > .inner > .hdg > span {
position: relative;
display: inline-block;
}
.area-event-01 > .inner > .hdg > span > b {
position: absolute;
top: 50%;
left: 0;
display: flex;
justify-content: center;
align-items: center;
width: 88px;
height: 88px;
border-radius: 50%;
border: 2px solid #fff;
font-size: 1.4rem;
font-weight: normal;
transform: translateY(-50%);
}
.area-topics-01 > .inner {
max-width: 1280px;
padding: 0 20px;
margin: 0 auto;
}
@media only screen and (max-width: 768px) {
.area-topics-01 > .inner {
padding: 0 15px;
}
}
.area-event-01 > .inner > .hdg > span > b + span {
padding-left: 120px;
}
.area-event-01 .box {
margin-bottom: 50px;
box-shadow: 0 0 .625em rgba(0, 0, 0, .25);
padding: 40px 70px;
background: #fff url(/common/images/bg-event-02.jpg) no-repeat 50% 100%;
background-size: cover;
}
.area-event-01 .box .lead {
margin-bottom: .375em;
color: #52a127;
font-size: 2.2rem;
font-weight: bold;
}
.area-event-01 .box .lyt {
display: flex;
justify-content: space-between;
margin: 40px 0 20px 0;
}
.area-event-01 .box .lyt > .column:nth-child(1) {
/* width: 59.64912%; */
width: 100%;
}
.area-event-01 .box .lyt > .column:nth-child(2) {
width: 35.08772%;
}
.area-event-01 .box .lyt > .column table {
width: 100%;
border-bottom: 1px solid #ccc;
}
.area-event-01 .box .lyt > .column table th,
.area-event-01 .box .lyt > .column table td {
border-top: 1px solid #ccc;
padding: 20px 25px;
vertical-align: middle;
}
.area-event-01 .box .lyt > .column table th {
width: 25%;
background-color: #eee;
text-align: center;
}
.area-event-01 .box .lyt > .column table td {
background-color: #fff;
text-align: left;
}
.area-event-01 .box .lyt > .column .btn-link-01 {
margin: 40px 0 0 0;
}
.area-event-01 .box .img {
text-align: center;
}
.area-event-01 .box + .lyt {
display: flex;
justify-content: space-between;
}
.area-event-01 .box + .lyt > .column:nth-child(1) {
width: 65.625%;
}
.area-event-01 .box + .lyt > .column:nth-child(1) > .hdg {
margin-bottom: 30px;
font-size: 2rem;
}
.area-event-01 .box + .lyt > .column:nth-child(2) {
width: 31.25%;
}
.area-event-01 .box + .lyt > .column:nth-child(2) > .hdg {
margin-bottom: 10px;
font-size: 1.8rem;
font-weight: bold;
}
.area-event-01 .box + .lyt .schedule {
position: relative;
display: flex;
line-height: 1.5;
margin-bottom: 0;
text-align: center;
}
.area-event-01 .box + .lyt .schedule::before, .area-event-01 .box + .lyt .schedule::after {
content: "";
position: absolute;
top: 42px;
right: 20px;
z-index: -1;
display: block;
height: 2px;
background-color: #999;
}
.area-event-01 .box + .lyt .schedule::before {
left: 0;
}
.area-event-01 .box + .lyt .schedule::after {
width: 18px;
transform-origin: 100% 50%;
transform: rotate(45deg);
}
.area-event-01 .box + .lyt .schedule > li {
flex-grow: 1;
flex-basis: 0;
padding-right: 20px;
}
.area-event-01 .box + .lyt .schedule > li .season {
display: flex;
justify-content: center;
align-items: center;
width: 86px;
height: 86px;
line-height: 1.25;
margin: 0 auto 25px auto;
border-radius: 50%;
border: 2px solid #ccc;
background-color: #fff;
}
.area-event-01 .box + .lyt .schedule > li .season.season-01 {
border-color: #f7b3d2;
}
.area-event-01 .box + .lyt .schedule > li .season.season-02 {
border-color: #6ed0e9;
}
.area-event-01 .box + .lyt .schedule > li .season.season-03 {
border-color: #edd461;
}
.area-event-01 .box + .lyt .schedule > li .hdg {
display: block;
margin-bottom: .75em;
font-size: 1.8rem;
font-weight: bold;
}
.area-event-01 .box + .lyt .schedule > li .text {
display: block;
margin-bottom: 1em;
}
.area-event-01 .box + .lyt .schedule > li .link {
position: relative;
display: inline-block;
padding-left: 16px;
color: #000;
font-size: 1.4rem;
text-decoration: none;
}
.area-event-01 .box + .lyt .schedule > li .link::before {
content: "";
position: absolute;
top: .625em;
left: 2px;
display: block;
width: 8px;
height: 8px;
border-top: 2px solid #52a127;
border-right: 2px solid #52a127;
transform: translateX(-50%) rotate(45deg);
}
.area-event-01 .box + .lyt .schedule > li .link::before {
top: .45em;
}
.area-event-01 .box + .lyt .schedule > li .link:hover, .area-event-01 .box + .lyt .schedule > li .link:focus, .area-event-01 .box + .lyt .schedule > li .link:active {
text-decoration: underline;
}
.area-event-01 .box + .lyt .sns {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-top: 5px;
padding-left: 20px;
}
.area-event-01 .box + .lyt .sns > li {
margin-top: 10px;
padding-right: 20px;
}
.area-event-01 .box + .lyt .sns > li > a {
position: relative;
display: inline-block;
padding-left: 52px;
font-weight: bold;
text-decoration: none;
}
.area-event-01 .box + .lyt .sns > li > a::before {
content: "";
position: absolute;
top: 50%;
left: 0;
display: block;
width: 40px;
height: 40px;
margin-top: -20px;
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: cover;
}
.area-event-01 .box + .lyt .sns > li > a.twitter {
color: #55acee;
}
.area-event-01 .box + .lyt .sns > li > a.twitter::before {
background-image: url(/common/images/icon-twitter-01.png);
}
.area-event-01 .box + .lyt .sns > li > a.facebook {
color: #3b5998;
}
.area-event-01 .box + .lyt .sns > li > a.facebook::before {
background-image: url(/common/images/icon-facebook-01.png);
}
.area-event-01 .box + .lyt .sns > li > a:hover, .area-event-01 .box + .lyt .sns > li > a:focus, .area-event-01 .box + .lyt .sns > li > a:active {
text-decoration: underline;
}
@media only screen and (max-width: 1024px) {
.area-event-01 > .inner > .hdg {
font-size: 3.2rem;
}
.area-event-01 > .inner > .hdg > span > b {
width: 82px;
height: 82px;
}
.area-event-01 > .inner > .hdg > span > b + span {
padding-left: 110px;
}
.area-event-01 .box {
padding: 40px 60px;
}
.area-event-01 .box + .lyt .schedule::before, .area-event-01 .box + .lyt .schedule::after {
right: 15px;
}
.area-event-01 .box + .lyt .schedule > li {
padding-right: 15px;
}
}
@media only screen and (max-width: 768px) {
.area-event-01 > .inner {
padding-left: 15px;
padding-right: 15px;
}
.area-event-01 > .inner > .hdg {
margin: 60px 0 70px 0;
font-size: 2.8rem;
}
.area-event-01 > .inner > .hdg > span > b {
position: static;
width: 76px;
height: 76px;
margin: 0 auto 15px auto;
transform: none;
}
.area-event-01 > .inner > .hdg > span > b + span {
padding-left: 0;
}
.area-event-01 .box {
padding: 35px 30px;
background-size: 150%;
}
.area-event-01 .box .lead {
font-size: 2rem;
}
.area-event-01 .box .lyt {
display: block;
}
.area-event-01 .box .lyt > .column:nth-child(1) {
width: 100%;
}
.area-event-01 .box .lyt > .column:nth-child(2) {
width: 100%;
margin-top: 50px;
}
.area-event-01 .box .lyt > .column table th,
.area-event-01 .box .lyt > .column table td {
padding: 15px;
}
.area-event-01 .box .lyt > .column .btn-link-01 {
margin-top: 30px;
}
.area-event-01 .box + .lyt {
display: block;
}
.area-event-01 .box + .lyt > .column:nth-child(1) {
width: 100%;
}
.area-event-01 .box + .lyt > .column:nth-child(1) > .hdg {
margin-bottom: 20px;
font-size: 1.8rem;
font-weight: bold;
text-align: center;
}
.area-event-01 .box + .lyt > .column:nth-child(2) {
width: 100%;
margin-top: 50px;
}
.area-event-01 .box + .lyt > .column:nth-child(2) > .hdg {
margin-bottom: 10px;
text-align: center;
}
.area-event-01 .box + .lyt .schedule {
display: block;
margin-left: 25px;
padding: 15px 0 25px 0;
text-align: left;
}
.area-event-01 .box + .lyt .schedule::before, .area-event-01 .box + .lyt .schedule::after {
top: inherit;
left: 42px;
right: inherit;
bottom: 0;
width: 2px;
}
.area-event-01 .box + .lyt .schedule::before {
top: 0;
height: inherit;
}
.area-event-01 .box + .lyt .schedule::after {
height: 18px;
transform-origin: 50% 100%;
}
.area-event-01 .box + .lyt .schedule > li {
position: relative;
min-height: 86px;
padding-left: 120px;
padding-right: 0;
}
.area-event-01 .box + .lyt .schedule > li + li {
margin-top: 40px;
}
.area-event-01 .box + .lyt .schedule > li .season {
position: absolute;
top: 0;
left: 0;
text-align: center;
}
.area-event-01 .box + .lyt .schedule > li .hdg {
margin-bottom: .5em;
}
.area-event-01 .box + .lyt .schedule > li .text {
margin-bottom: .625em;
}
.area-event-01 .box + .lyt .timeline {
max-width: 400px;
margin: 0 auto;
}
.area-event-01 .box + .lyt .sns {
padding-left: 0;
}
.area-event-01 .box + .lyt .sns > li {
padding-right: 0;
}
.area-event-01 .box + .lyt .sns > li + li {
margin-left: 40px;
}
}
@media only screen and (max-width: 480px) {
.area-event-01 > .inner > .hdg {
font-size: 2.6rem;
}
.area-event-01 > .inner > .hdg > span > b {
width: 70px;
height: 70px;
margin-bottom: 10px;
}
.area-event-01 .box {
padding: 35px 20px;
background-size: 200%;
}
.area-event-01 .box .lead {
font-size: 1.8rem;
}
.area-event-01 .box .lyt > .column table th {
width: 35%;
}
.area-event-01 .box + .lyt .schedule {
margin-left: 0;
}
.area-event-01 .box + .lyt .schedule > li {
padding-left: 100px;
}
.area-event-01 .box + .lyt .timeline {
max-width: inherit;
padding: 0 15px;
}
.area-event-01 .box + .lyt .sns > li + li {
margin-left: 24px;
}
.area-event-01 .box + .lyt .sns > li > a {
padding-left: 48px;
}
}
.lyt-know-01 {
line-height: 1.5;
margin: 60px 0;
}
.lyt-know-01 p {
margin-bottom: 0;
}
.lyt-know-01 p > a {
position: relative;
display: block;
color: #fff;
font-size: 1.6rem;
text-decoration: none;
}
.lyt-know-01 p > a span {
display: block;
}
.lyt-know-01 p > a .img {
position: relative;
z-index: 1;
}
.lyt-know-01 p > a .img img {
width: 100%;
}
.lyt-know-01 p > a .text {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
padding: 1.25em 24px;
background-color: rgba(0, 100, 5, .9);
}
.lyt-know-01 p > a .text .link {
position: relative;
padding-left: 16px;
font-size: 1.8rem;
font-weight: bold;
}
.lyt-know-01 p > a .text .link::before {
content: "";
position: absolute;
top: .625em;
left: 2px;
display: block;
width: 8px;
height: 8px;
border-top: 2px solid #52a127;
border-right: 2px solid #52a127;
transform: translateX(-50%) rotate(45deg);
}
.lyt-know-01 p > a .text .link::before {
top: .5125em;
border-color: #fff;
}
.lyt-know-01 p > a .text .desc {
margin-top: .25em;
}
.lyt-know-01 p > a:hover .text .link, .lyt-know-01 p > a:focus .text .link, .lyt-know-01 p > a:active .text .link {
text-decoration: underline;
}
.lyt-know-01 .wrap-01,
.lyt-know-01 .wrap-02 {
display: flex;
justify-content: space-between;
}
.lyt-know-01 .wrap-01 > * {
width: calc(50% - 12px);
}
.lyt-know-01 .wrap-02 {
flex-direction: column;
}
.ie .lyt-know-01 .wrap-02 > * {
height: 100%;
}
.ie .lyt-know-01 .wrap-02 > * + * {
margin-top: 14px;
}
@media only screen and (max-width: 1024px) {
.lyt-know-01 p > a .text {
padding: 1em 22px;
}
.lyt-know-01 .wrap-01 > * {
width: calc(50% - 8px);
}
.ie .lyt-know-01 .wrap-02 > * + * {
margin-top: 10px;
}
}
@media only screen and (max-width: 960px) {
.lyt-know-01 {
margin: 50px 0;
}
.lyt-know-01 p > a {
font-size: 1.4rem;
}
.lyt-know-01 p > a .text {
padding: .875em 20px;
}
.lyt-know-01 p > a .text .link {
font-size: 1.6rem;
}
.lyt-know-01 .wrap-01 > * {
width: calc(50% - 5px);
}
.ie .lyt-know-01 .wrap-02 > * + * {
margin-top: 6px;
}
}
@media only screen and (max-width: 640px) {
.lyt-know-01 {
margin: 40px 0;
}
.lyt-know-01 p > a {
position: static;
background-color: #006405;
}
.lyt-know-01 p > a .text {
position: static;
}
.lyt-know-01 .wrap-01,
.lyt-know-01 .wrap-02 {
display: block;
}
.lyt-know-01 .wrap-01 > * {
width: 100%;
}
.lyt-know-01 .wrap-01 .wrap-01 {
display: flex;
justify-content: space-between;
margin-top: 10px;
}
.lyt-know-01 .wrap-01 .wrap-01 > p {
display: flex;
width: calc(50% - 5px);
}
.ie .lyt-know-01 .wrap-02 > * {
height: auto;
}
.ie .lyt-know-01 .wrap-02 > * + * {
margin-top: 10px;
}
}
.area-event-02 {
background-color: #f6fbf6;
margin-bottom: -40px;
}
.area-event-02 > .inner {
max-width: 1320px;
margin: 0 auto;
padding: .1px 20px;
}
.area-event-02 > .inner > .hdg {
position: relative;
line-height: 1.5;
margin-bottom: 45px;
border-top: 1px dotted #ccc;
padding-top: 50px;
font-size: 3rem;
font-weight: bold;
text-align: center;
}
.area-event-02 > .inner > .hdg:first-child {
border-top: none;
padding-top: 20px;
}
.area-event-02 > .inner > .hdg > span {
position: relative;
display: inline-block;
padding-top: 50px;
}
.area-event-02 > .inner > .hdg > span::before {
content: "";
position: absolute;
top: 0;
left: 50%;
display: block;
width: 42px;
height: 38px;
margin-left: -20px;
background: transparent none no-repeat 50% 50%;
background-size: contain;
}
.area-event-02 > .inner > .hdg.upcoming > span::before {
background-image: url(/common/images/icon-upcoming-01.png);
}
.area-event-02 > .inner > .hdg.schedule > span::before {
height: 36px;
background-image: url(/common/images/icon-schedule-01.png);
}
.area-event-02 > .inner > .hdg + p {
margin: -30px 0 30px 0;
text-align: center;
}
.area-event-02 > .inner > .box {
background-color: #fff;
box-shadow: 0 0 11px rgba(0, 0, 0, .2);
padding: 50px 70px;
margin-bottom: 50px;
}
.area-event-02 > .inner > .box > .hdg {
background-color: #52a127;
color: #fff;
font-size: 2.6rem;
font-weight: bold;
margin: -50px -70px 52px;
padding: 20px 70px;
}
.area-event-02 > .inner > .box > .hdg > span {
display: flex;
justify-content: center;
align-items: center;
}
.area-event-02 > .inner > .box > .hdg > span > b {
display: inline-block;
border: solid 1px;
border-radius: 30px;
font-size: 1.4rem;
font-weight: normal;
flex-shrink: 0;
padding: 2px 14px;
margin-right: 16px;
}
.area-event-02 > .inner > .box > p {
line-height: 1.5;
}
.area-event-02 > .inner > .box > p + p:last-of-type {
margin-bottom: 3em;
}
.area-event-02 > .inner > .box .pgh-lead-02 {
font-size: 2.2rem;
}
.area-event-02 > .inner > .box .btn-link-01 > a {
min-width: 240px;
}
.area-event-02 > .inner > .box .lyt-img-01 {
margin-top: 10px;
}
@media only screen and (max-width: 768px) {
.area-event-02 {
margin-bottom: -20px;
}
.area-event-02 > .inner {
padding-left: 15px;
padding-right: 15px;
}
.area-event-02 > .inner > .hdg {
margin-bottom: 25px;
padding-top: 40px;
font-size: 2.4rem;
}
.area-event-02 > .inner > .hdg:first-child {
padding-top: 32px;
}
.area-event-02 > .inner > .hdg + p {
margin: -25px 0 25px 0;
text-align: center;
}
.area-event-02 > .inner > .box {
padding: 36px 12px 40px;
margin-bottom: 40px;
}
.area-event-02 > .inner > .box > .hdg {
margin: -36px -12px 36px;
padding: 25px 20px 18px;
font-size: 2.2rem;
line-height: 1.5;
text-align: center;
}
.area-event-02 > .inner > .box > .hdg > span {
flex-direction: column;
}
.area-event-02 > .inner > .box > .hdg > span > b {
margin: 0 0 1em;
}
.area-event-02 > .inner > .box .pgh-lead-02 {
font-size: 1.8rem;
}
.area-event-02 > .inner > .box .btn-link-01 > a {
min-width: 200px;
}
}
.area-live {
background: #333 none no-repeat 50% 50%;
background-size: cover;
color: #fff;
}
.area-live + .area-live {
margin-top: 1px;
}
.area-live > .inner {
max-width: 1120px;
margin: 0 auto;
padding: .1px 20px;
}
.area-live > .inner > *:last-child {
margin-bottom: 0;
}
.area-live .btn-link-01 > a,
.area-live .btn-link-01 > button,
.area-live .btn-link-01 > span {
border-width: 1px;
border-color: #fff;
background-color: rgba(255, 255, 255, 0);
color: #fff;
transition: background-color .4s;
}
.area-live .btn-link-01 > a > span::before,
.area-live .btn-link-01 > button > span::before,
.area-live .btn-link-01 > span > span::before {
border-color: #fff;
}
.area-live .btn-link-01 > a:hover, .area-live .btn-link-01 > a:focus, .area-live .btn-link-01 > a:active,
.area-live .btn-link-01 > button:hover,
.area-live .btn-link-01 > button:focus,
.area-live .btn-link-01 > button:active,
.area-live .btn-link-01 > span:hover,
.area-live .btn-link-01 > span:focus,
.area-live .btn-link-01 > span:active {
background-color: rgba(255, 255, 255, .125);
}
.area-live#live-heading {
position: relative;
display: flex;
align-items: center;
max-height: 800px;
height: 51.25vw;
background-color: #3b423d;
background-image: url(/know/live/images/bg-01.jpg);
background-position: 22.5% 0;
}
.area-live#live-heading > .inner {
width: 100%;
padding-top: 40px;
padding-bottom: 80px;
text-align: center;
}
.area-live#live-heading .hdg {
line-height: 1.5;
margin-bottom: .25em;
font-size: 7rem;
font-weight: bold;
}
.area-live#live-heading .lead {
margin-bottom: 0;
font-size: 1.6rem;
font-weight: bold;
}
.area-live#live-heading .scroll {
position: absolute;
left: 50%;
bottom: 30px;
margin-bottom: 0;
font-size: 1.2rem;
font-weight: bold;
transform: translateX(-50%);
}
.area-live#live-heading .scroll::before, .area-live#live-heading .scroll::after {
content: "";
position: absolute;
left: 50%;
display: block;
width: 22px;
height: 22px;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
transform: translateX(-50%) rotate(45deg);
}
.area-live#live-heading .scroll::before {
top: -37px;
}
.area-live#live-heading .scroll::after {
top: -27px;
}
.area-live#live-nav {
background-color: transparent;
}
.area-live#live-nav > ul {
position: relative;
display: flex;
max-width: 1440px;
margin: 0 auto;
}
.area-live#live-nav > ul::before, .area-live#live-nav > ul::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
display: block;
width: 50vw;
background-color: #222;
}
.area-live#live-nav > ul::before {
left: calc(-50vw - 1px);
}
.area-live#live-nav > ul::after {
right: calc(-50vw - 1px);
}
.area-live#live-nav > ul > li {
flex-grow: 1;
flex-basis: 0;
display: flex;
}
.area-live#live-nav > ul > li + li {
margin-left: 1px;
}
.area-live#live-nav > ul > li > a {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
line-height: 1.375;
padding: 30px 10px 50px 10px;
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: cover;
color: #fff;
font-size: 1.8rem;
text-align: center;
text-decoration: none;
transition: opacity .4s;
}
.area-live#live-nav > ul > li > a[href="#live-01"] {
background-color: #463b32;
background-image: url(/know/live/images/bg-02.jpg);
}
.area-live#live-nav > ul > li > a[href="#live-02"] {
background-color: #4c5652;
background-image: url(/know/live/images/bg-03.jpg);
}
.area-live#live-nav > ul > li > a[href="#live-03"] {
background-color: #2a281f;
background-image: url(/know/live/images/bg-04.jpg);
}
.area-live#live-nav > ul > li > a[href="#live-04"] {
background-color: #415441;
background-image: url(/know/live/images/bg-05.jpg);
}
.area-live#live-nav > ul > li > a[href="#live-05"] {
background-color: #19110d;
background-image: url(/know/live/images/bg-06.jpg);
}
.area-live#live-nav > ul > li > a > span {
display: block;
line-height: 1.125;
font-size: 3rem;
font-weight: bold;
font-style: italic;
}
.area-live#live-nav > ul > li > a::after {
content: "";
position: absolute;
bottom: 20px;
left: 50%;
display: block;
width: 8px;
height: 8px;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
transform: translateX(-50%) rotate(45deg);
}
.area-live#live-nav > ul > li > a:hover, .area-live#live-nav > ul > li > a:focus, .area-live#live-nav > ul > li > a:active {
opacity: .875;
}
.area-live#live-01 > .inner, .area-live#live-02 > .inner, .area-live#live-03 > .inner, .area-live#live-04 > .inner, .area-live#live-05 > .inner, .area-live#live-event > .inner {
width: 100%;
text-align: center;
}
.area-live#live-01 > .inner > .hdg, .area-live#live-02 > .inner > .hdg, .area-live#live-03 > .inner > .hdg, .area-live#live-04 > .inner > .hdg, .area-live#live-05 > .inner > .hdg, .area-live#live-event > .inner > .hdg {
line-height: 1.5;
border-bottom: 1px solid rgba(255, 255, 255, .5);
padding-bottom: .75em;
font-size: 4rem;
font-weight: bold;
}
.area-live#live-01 > .inner > .hdg > span, .area-live#live-02 > .inner > .hdg > span, .area-live#live-03 > .inner > .hdg > span, .area-live#live-04 > .inner > .hdg > span, .area-live#live-05 > .inner > .hdg > span, .area-live#live-event > .inner > .hdg > span {
position: relative;
display: block;
margin-bottom: .125em;
font-size: 6rem;
font-style: italic;
}
.area-live#live-01 > .inner > .hdg > span::after, .area-live#live-02 > .inner > .hdg > span::after, .area-live#live-03 > .inner > .hdg > span::after, .area-live#live-04 > .inner > .hdg > span::after, .area-live#live-05 > .inner > .hdg > span::after, .area-live#live-event > .inner > .hdg > span::after {
content: attr(data-unittext);
position: absolute;
left: 50%;
bottom: -.375em;
font-size: 1.4rem;
transform: translateX(-50%);
}
.area-live#live-01 > .inner > .lead, .area-live#live-02 > .inner > .lead, .area-live#live-03 > .inner > .lead, .area-live#live-04 > .inner > .lead, .area-live#live-05 > .inner > .lead, .area-live#live-event > .inner > .lead {
line-height: 2;
margin: 2.25em 0 0 0;
}
.area-live#live-01 > .inner > .lead p, .area-live#live-02 > .inner > .lead p, .area-live#live-03 > .inner > .lead p, .area-live#live-04 > .inner > .lead p, .area-live#live-05 > .inner > .lead p, .area-live#live-event > .inner > .lead p {
margin: 1.5em 0 0 0;
}
.area-live#live-01 > .inner > .box, .area-live#live-02 > .inner > .box, .area-live#live-03 > .inner > .box, .area-live#live-04 > .inner > .box, .area-live#live-05 > .inner > .box, .area-live#live-event > .inner > .box {
display: flex;
justify-content: space-between;
margin: 60px 0 0 0;
}
.area-live#live-01 > .inner > .box > .column, .area-live#live-02 > .inner > .box > .column, .area-live#live-03 > .inner > .box > .column, .area-live#live-04 > .inner > .box > .column, .area-live#live-05 > .inner > .box > .column, .area-live#live-event > .inner > .box > .column {
position: relative;
width: 46.2963%;
margin-top: 20px;
border: 1px solid #fff;
padding: 39px 49px 139px 49px;
}
.area-live#live-01 > .inner > .box > .column dt, .area-live#live-02 > .inner > .box > .column dt, .area-live#live-03 > .inner > .box > .column dt, .area-live#live-04 > .inner > .box > .column dt, .area-live#live-05 > .inner > .box > .column dt, .area-live#live-event > .inner > .box > .column dt {
line-height: 1.375;
margin-bottom: .375em;
font-size: 3rem;
font-weight: bold;
}
.area-live#live-01 > .inner > .box > .column dd p:first-child, .area-live#live-02 > .inner > .box > .column dd p:first-child, .area-live#live-03 > .inner > .box > .column dd p:first-child, .area-live#live-04 > .inner > .box > .column dd p:first-child, .area-live#live-05 > .inner > .box > .column dd p:first-child, .area-live#live-event > .inner > .box > .column dd p:first-child {
line-height: 1.5;
}
.area-live#live-01 > .inner > .box > .column dd .btn-link-01, .area-live#live-02 > .inner > .box > .column dd .btn-link-01, .area-live#live-03 > .inner > .box > .column dd .btn-link-01, .area-live#live-04 > .inner > .box > .column dd .btn-link-01, .area-live#live-05 > .inner > .box > .column dd .btn-link-01, .area-live#live-event > .inner > .box > .column dd .btn-link-01 {
position: absolute;
left: 49px;
right: 49px;
bottom: 49px;
margin: 0;
}
.area-live#live-01 > .inner > .box > .column dd .btn-link-01 > a,
.area-live#live-01 > .inner > .box > .column dd .btn-link-01 > button,
.area-live#live-01 > .inner > .box > .column dd .btn-link-01 > span, .area-live#live-02 > .inner > .box > .column dd .btn-link-01 > a,
.area-live#live-02 > .inner > .box > .column dd .btn-link-01 > button,
.area-live#live-02 > .inner > .box > .column dd .btn-link-01 > span, .area-live#live-03 > .inner > .box > .column dd .btn-link-01 > a,
.area-live#live-03 > .inner > .box > .column dd .btn-link-01 > button,
.area-live#live-03 > .inner > .box > .column dd .btn-link-01 > span, .area-live#live-04 > .inner > .box > .column dd .btn-link-01 > a,
.area-live#live-04 > .inner > .box > .column dd .btn-link-01 > button,
.area-live#live-04 > .inner > .box > .column dd .btn-link-01 > span, .area-live#live-05 > .inner > .box > .column dd .btn-link-01 > a,
.area-live#live-05 > .inner > .box > .column dd .btn-link-01 > button,
.area-live#live-05 > .inner > .box > .column dd .btn-link-01 > span, .area-live#live-event > .inner > .box > .column dd .btn-link-01 > a,
.area-live#live-event > .inner > .box > .column dd .btn-link-01 > button,
.area-live#live-event > .inner > .box > .column dd .btn-link-01 > span {
width: 100%;
}
.area-live#live-01 {
padding-top: 80px;
padding-bottom: 140px;
background-color: #463b32;
background-image: url(/know/live/images/bg-02.jpg);
background-position: 50% 5%;
}
.area-live#live-02 {
padding-top: 80px;
padding-bottom: 150px;
background-color: #4c5652;
background-image: url(/know/live/images/bg-03.jpg);
background-position: 25% 50%;
}
.area-live#live-02 .step {
display: flex;
flex-wrap: wrap;
margin: 30px -20px;
}
.area-live#live-02 .step > li {
width: 25%;
margin-top: 20px;
padding: 0 20px;
}
.area-live#live-02 .step > li > span {
position: relative;
display: block;
width: 100%;
padding-top: 100%;
}
.area-live#live-02 .step > li > span::before, .area-live#live-02 .step > li > span::after {
content: "";
position: absolute;
display: block;
}
.area-live#live-02 .step > li > span::before {
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, .75);
}
.area-live#live-02 .step > li > span::after {
left: 14.58333%;
bottom: 9.72222%;
width: 70.83333%;
height: 70.83333%;
background: transparent none no-repeat 50% 50%;
background-size: cover;
}
.area-live#live-02 .step > li > span > span {
position: absolute;
top: .75em;
left: 50%;
font-size: 2rem;
transform: translateX(-50%);
}
.area-live#live-02 .step > li:nth-child(1) > span::after {
background-image: url(/know/live/images/bg-03-01.png);
}
.area-live#live-02 .step > li:nth-child(2) > span::after {
background-image: url(/know/live/images/bg-03-02.png);
}
.area-live#live-02 .step > li:nth-child(3) > span::after {
background-image: url(/know/live/images/bg-03-03.png);
}
.area-live#live-02 .step > li:nth-child(4) > span::after {
background-image: url(/know/live/images/bg-03-04.png);
}
.area-live#live-02 .role {
line-height: 1.5;
margin-bottom: 2.5em;
font-size: 2.2rem;
}
.area-live#live-03 {
padding-top: 80px;
padding-bottom: 150px;
background-color: #2a281f;
background-image: url(/know/live/images/bg-04.jpg);
background-position: 75% 50%;
}
.area-live#live-03 > .inner > .box > .column dt.production, .area-live#live-03 > .inner > .box > .column dt.training {
position: relative;
padding-top: 130px;
}
.area-live#live-03 > .inner > .box > .column dt.production::before, .area-live#live-03 > .inner > .box > .column dt.training::before {
content: "";
position: absolute;
top: 0;
left: 50%;
display: block;
width: 130px;
height: 130px;
background: transparent none no-repeat 50% 50%;
background-size: cover;
transform: translateX(-50%);
}
.area-live#live-03 > .inner > .box > .column dt.production::before {
background-image: url(/know/live/images/bg-03-01.png);
}
.area-live#live-03 > .inner > .box > .column dt.training::before {
background-image: url(/know/live/images/bg-03-02.png);
}
.area-live#live-04 {
padding-top: 80px;
padding-bottom: 150px;
background-color: #415441;
background-image: url(/know/live/images/bg-05.jpg);
}
.area-live#live-04 .carousel-work-01 {
margin-top: 50px;
margin-bottom: 20px;
text-align: left;
}
.area-live#live-04 .carousel-work-01 > .inner > .content > ul > li > a {
color: #fff;
}
.area-live#live-04 .carousel-work-01 > .inner > .content > ul > li > a > .text .hdg::before {
border-color: #fff;
}
.area-live#live-04 .carousel-work-01 > .inner > .content > ul > li > a > .text .author {
color: #fff;
}
.area-live#live-05 {
padding-top: 80px;
padding-bottom: 150px;
background-color: #19110d;
background-image: url(/know/live/images/bg-06.jpg);
background-position: 85% 50%;
}
.area-live#live-05 > .inner > .box > .column dt > .num {
position: relative;
display: block;
margin: .25em 0;
font-size: 5rem;
}
.area-live#live-05 > .inner > .box > .column dt > .num::before {
content: attr(data-unittext);
position: absolute;
top: -.5em;
left: 50%;
font-size: 1.6rem;
transform: translateX(-50%);
}
.area-live#live-event {
padding-top: 90px;
padding-bottom: 150px;
background-color: #36342a;
background-image: url(/know/live/images/bg-07.jpg);
background-position: 10% 50%;
}
.area-live#live-event .btn-link-01 {
margin-top: 60px;
}
@media only screen and (max-width: 1024px) {
.area-live#live-heading {
height: 62.5vw;
}
.area-live#live-heading > .inner {
padding-top: 37.5px;
padding-bottom: 75px;
}
.area-live#live-heading .hdg {
font-size: 6rem;
}
.area-live#live-heading .scroll {
bottom: 25px;
}
.area-live#live-01 > .inner > .hdg, .area-live#live-02 > .inner > .hdg, .area-live#live-03 > .inner > .hdg, .area-live#live-04 > .inner > .hdg, .area-live#live-05 > .inner > .hdg, .area-live#live-event > .inner > .hdg {
font-size: 4rem;
}
.area-live#live-01 > .inner > .hdg > span, .area-live#live-02 > .inner > .hdg > span, .area-live#live-03 > .inner > .hdg > span, .area-live#live-04 > .inner > .hdg > span, .area-live#live-05 > .inner > .hdg > span, .area-live#live-event > .inner > .hdg > span {
font-size: 5.2rem;
}
.area-live#live-01 > .inner > .lead, .area-live#live-02 > .inner > .lead, .area-live#live-03 > .inner > .lead, .area-live#live-04 > .inner > .lead, .area-live#live-05 > .inner > .lead, .area-live#live-event > .inner > .lead {
margin-top: 2.25em;
}
.area-live#live-01 > .inner > .lead p, .area-live#live-02 > .inner > .lead p, .area-live#live-03 > .inner > .lead p, .area-live#live-04 > .inner > .lead p, .area-live#live-05 > .inner > .lead p, .area-live#live-event > .inner > .lead p {
margin-top: 1.5em;
}
.area-live#live-01 > .inner > .box, .area-live#live-02 > .inner > .box, .area-live#live-03 > .inner > .box, .area-live#live-04 > .inner > .box, .area-live#live-05 > .inner > .box, .area-live#live-event > .inner > .box {
margin-top: 50px;
}
.area-live#live-01 > .inner > .box > .column, .area-live#live-02 > .inner > .box > .column, .area-live#live-03 > .inner > .box > .column, .area-live#live-04 > .inner > .box > .column, .area-live#live-05 > .inner > .box > .column, .area-live#live-event > .inner > .box > .column {
width: 48%;
padding: 19px 29px 109px 29px;
}
.area-live#live-01 > .inner > .box > .column dd .btn-link-01, .area-live#live-02 > .inner > .box > .column dd .btn-link-01, .area-live#live-03 > .inner > .box > .column dd .btn-link-01, .area-live#live-04 > .inner > .box > .column dd .btn-link-01, .area-live#live-05 > .inner > .box > .column dd .btn-link-01, .area-live#live-event > .inner > .box > .column dd .btn-link-01 {
left: 29px;
right: 29px;
bottom: 29px;
}
.area-live#live-01 {
padding-top: 70px;
padding-bottom: 110px;
}
.area-live#live-02 {
padding-top: 70px;
padding-bottom: 120px;
}
.area-live#live-02 .step {
margin: 30px -10px;
}
.area-live#live-02 .step > li {
padding: 0 10px;
}
.area-live#live-02 .role {
font-size: 2rem;
}
.area-live#live-03 {
padding-top: 70px;
padding-bottom: 120px;
}
.area-live#live-03 > .inner > .box > .column dt.production, .area-live#live-03 > .inner > .box > .column dt.training {
padding-top: 120px;
}
.area-live#live-03 > .inner > .box > .column dt.production::before, .area-live#live-03 > .inner > .box > .column dt.training::before {
width: 120px;
height: 120px;
}
.area-live#live-04 {
padding-top: 70px;
padding-bottom: 120px;
}
.area-live#live-05 {
padding-top: 70px;
padding-bottom: 120px;
}
.area-live#live-05 > .inner > .box > .column dt > .num {
margin-top: .5em;
font-size: 4.8rem;
}
.area-live#live-event {
padding-top: 80px;
padding-bottom: 120px;
}
.area-live#live-event .btn-link-01 {
margin-top: 50px;
}
}
@media only screen and (max-width: 768px) {
.area-live > .inner {
padding-left: 15px;
padding-right: 15px;
}
.area-live#live-heading {
height: 83.75vw;
}
.area-live#live-heading > .inner {
padding-top: 35px;
padding-bottom: 70px;
}
.area-live#live-heading .hdg {
font-size: 5rem;
}
.area-live#live-heading .scroll {
bottom: 20px;
}
.area-live#live-nav > ul {
display: block;
}
.area-live#live-nav > ul::before, .area-live#live-nav > ul::after {
content: none;
}
.area-live#live-nav > ul > li {
display: block;
}
.area-live#live-nav > ul > li + li {
margin-top: 1px;
margin-left: 0;
}
.area-live#live-nav > ul > li > a {
flex-direction: row;
justify-content: flex-start;
line-height: 1.5;
padding: 10px 10px 10px 50px;
text-align: left;
}
.area-live#live-nav > ul > li > a[href="#live-01"] {
background-position: 50% 40%;
}
.area-live#live-nav > ul > li > a[href="#live-02"] {
background-position: 50% 85%;
}
.area-live#live-nav > ul > li > a[href="#live-03"] {
background-position: 50% 20%;
}
.area-live#live-nav > ul > li > a[href="#live-04"] {
background-position: 50% 30%;
}
.area-live#live-nav > ul > li > a[href="#live-05"] {
background-position: 50% 35%;
}
.area-live#live-nav > ul > li > a > span {
flex-shrink: 0;
display: inline-block;
width: 1.625em;
line-height: 1.25;
}
.area-live#live-nav > ul > li > a::after {
bottom: 50%;
left: 25px;
}
.area-live#live-01 > .inner > .hdg, .area-live#live-02 > .inner > .hdg, .area-live#live-03 > .inner > .hdg, .area-live#live-04 > .inner > .hdg, .area-live#live-05 > .inner > .hdg, .area-live#live-event > .inner > .hdg {
padding-bottom: .5em;
font-size: 4rem;
}
.area-live#live-01 > .inner > .hdg > span, .area-live#live-02 > .inner > .hdg > span, .area-live#live-03 > .inner > .hdg > span, .area-live#live-04 > .inner > .hdg > span, .area-live#live-05 > .inner > .hdg > span, .area-live#live-event > .inner > .hdg > span {
font-size: 3.8rem;
}
.area-live#live-01 > .inner > .hdg > span::after, .area-live#live-02 > .inner > .hdg > span::after, .area-live#live-03 > .inner > .hdg > span::after, .area-live#live-04 > .inner > .hdg > span::after, .area-live#live-05 > .inner > .hdg > span::after, .area-live#live-event > .inner > .hdg > span::after {
font-size: 1.2rem;
}
.area-live#live-01 > .inner > .lead, .area-live#live-02 > .inner > .lead, .area-live#live-03 > .inner > .lead, .area-live#live-04 > .inner > .lead, .area-live#live-05 > .inner > .lead, .area-live#live-event > .inner > .lead {
line-height: 1.75;
margin-top: 2em;
}
.area-live#live-01 > .inner > .lead p, .area-live#live-02 > .inner > .lead p, .area-live#live-03 > .inner > .lead p, .area-live#live-04 > .inner > .lead p, .area-live#live-05 > .inner > .lead p, .area-live#live-event > .inner > .lead p {
margin-top: 1.25em;
}
.area-live#live-01 > .inner > .box, .area-live#live-02 > .inner > .box, .area-live#live-03 > .inner > .box, .area-live#live-04 > .inner > .box, .area-live#live-05 > .inner > .box, .area-live#live-event > .inner > .box {
display: block;
margin-top: 40px;
}
.area-live#live-01 > .inner > .box > .column, .area-live#live-02 > .inner > .box > .column, .area-live#live-03 > .inner > .box > .column, .area-live#live-04 > .inner > .box > .column, .area-live#live-05 > .inner > .box > .column, .area-live#live-event > .inner > .box > .column {
width: 100%;
padding: 14px 19px 94px 19px;
}
.area-live#live-01 > .inner > .box > .column dt, .area-live#live-02 > .inner > .box > .column dt, .area-live#live-03 > .inner > .box > .column dt, .area-live#live-04 > .inner > .box > .column dt, .area-live#live-05 > .inner > .box > .column dt, .area-live#live-event > .inner > .box > .column dt {
font-size: 2.8rem;
}
.area-live#live-01 > .inner > .box > .column dd .btn-link-01, .area-live#live-02 > .inner > .box > .column dd .btn-link-01, .area-live#live-03 > .inner > .box > .column dd .btn-link-01, .area-live#live-04 > .inner > .box > .column dd .btn-link-01, .area-live#live-05 > .inner > .box > .column dd .btn-link-01, .area-live#live-event > .inner > .box > .column dd .btn-link-01 {
left: 19px;
right: 19px;
bottom: 19px;
}
.area-live#live-01 {
padding-top: 40px;
padding-bottom: 70px;
}
.area-live#live-02 {
padding-top: 50px;
padding-bottom: 70px;
}
.area-live#live-02 .step {
margin: 20px -10px;
}
.area-live#live-02 .step > li {
width: 50%;
}
.area-live#live-02 .step > li > span > span {
font-size: 1.8rem;
}
.area-live#live-02 .role {
margin-bottom: 1.5em;
font-size: 2rem;
}
.area-live#live-03 {
padding-top: 40px;
padding-bottom: 70px;
}
.area-live#live-03 > .inner > .box > .column dt.production, .area-live#live-03 > .inner > .box > .column dt.training {
padding-top: 110px;
}
.area-live#live-03 > .inner > .box > .column dt.production::before, .area-live#live-03 > .inner > .box > .column dt.training::before {
width: 110px;
height: 110px;
}
.area-live#live-04 {
padding-top: 40px;
padding-bottom: 70px;
}
.area-live#live-04 .carousel-work-01 {
margin-top: 30px;
margin-bottom: 10px;
}
.area-live#live-05 {
padding-top: 40px;
padding-bottom: 70px;
}
.area-live#live-05 > .inner > .box > .column dt > .num {
margin: .625em 0 .125em 0;
font-size: 3.8rem;
}
.area-live#live-05 > .inner > .box > .column dt > .num::before {
top: -.625em;
font-size: 1.4rem;
}
.area-live#live-event {
padding-top: 50px;
padding-bottom: 70px;
}
.area-live#live-event .btn-link-01 {
margin-top: 40px;
}
}
@media only screen and (max-width: 480px) {
.area-live#live-heading {
height: 137.5vw;
}
.area-live#live-heading > .inner {
padding-top: 32.5px;
padding-bottom: 65px;
}
.area-live#live-heading .hdg {
font-size: 4rem;
}
.area-live#live-heading .scroll {
bottom: 15px;
}
.area-live#live-01 > .inner > .hdg, .area-live#live-02 > .inner > .hdg, .area-live#live-03 > .inner > .hdg, .area-live#live-04 > .inner > .hdg, .area-live#live-05 > .inner > .hdg, .area-live#live-event > .inner > .hdg {
font-size: 3.4rem;
}
.area-live#live-01 > .inner > .hdg > span, .area-live#live-02 > .inner > .hdg > span, .area-live#live-03 > .inner > .hdg > span, .area-live#live-04 > .inner > .hdg > span, .area-live#live-05 > .inner > .hdg > span, .area-live#live-event > .inner > .hdg > span {
font-size: 4rem;
}
.area-live#live-01 > .inner > .lead, .area-live#live-02 > .inner > .lead, .area-live#live-03 > .inner > .lead, .area-live#live-04 > .inner > .lead, .area-live#live-05 > .inner > .lead, .area-live#live-event > .inner > .lead {
margin-top: 1.5em;
text-align: left;
}
.area-live#live-01 > .inner > .lead p, .area-live#live-02 > .inner > .lead p, .area-live#live-03 > .inner > .lead p, .area-live#live-04 > .inner > .lead p, .area-live#live-05 > .inner > .lead p, .area-live#live-event > .inner > .lead p {
margin-top: 1em;
}
.area-live#live-01 > .inner > .box, .area-live#live-02 > .inner > .box, .area-live#live-03 > .inner > .box, .area-live#live-04 > .inner > .box, .area-live#live-05 > .inner > .box, .area-live#live-event > .inner > .box {
margin-top: 30px;
}
.area-live#live-01 > .inner > .box > .column dd p:first-child, .area-live#live-02 > .inner > .box > .column dd p:first-child, .area-live#live-03 > .inner > .box > .column dd p:first-child, .area-live#live-04 > .inner > .box > .column dd p:first-child, .area-live#live-05 > .inner > .box > .column dd p:first-child, .area-live#live-event > .inner > .box > .column dd p:first-child {
text-align: left;
}
.area-live#live-01 {
padding-top: 30px;
padding-bottom: 40px;
}
.area-live#live-02 {
padding-top: 40px;
padding-bottom: 50px;
}
.area-live#live-02 .step > li > span > span {
top: .5em;
}
.area-live#live-02 .role {
text-align: left;
}
.area-live#live-03 {
padding-top: 30px;
padding-bottom: 50px;
}
.area-live#live-03 > .inner > .box > .column dt.production, .area-live#live-03 > .inner > .box > .column dt.training {
padding-top: 100px;
}
.area-live#live-03 > .inner > .box > .column dt.production::before, .area-live#live-03 > .inner > .box > .column dt.training::before {
width: 100px;
height: 100px;
}
.area-live#live-04 {
padding-top: 30px;
padding-bottom: 50px;
}
.area-live#live-05 {
padding-top: 30px;
padding-bottom: 50px;
}
.area-live#live-05 > .inner > .box > .column dt > .num {
font-size: 3.6rem;
}
.area-live#live-event {
padding-top: 40px;
padding-bottom: 50px;
}
.area-live#live-event .btn-link-01 {
margin-top: 30px;
}
}
.area-report {
padding: 50px 0 70px;
}
.area-report > .inner {
display: flow-root;
max-width: 1280px;
margin-left: auto;
margin-right: auto;
padding: 32px 20px;
background-color: #edf7ed;
}
.area-report > .inner > .hdg {
font-size: 3rem;
font-weight: bold;
text-align: center;
margin-bottom: 40px;
padding-top: 45px;
position: relative;
}
.area-report > .inner > .hdg::before {
content: "";
display: block;
width: 55px;
height: 38px;
background: url(/common/images/icon-report-01.png) center no-repeat;
position: absolute;
top: 0;
left: 50%;
margin-left: -27.7px;
}
.area-report > .inner > .hdg > span {
background-image: linear-gradient(to bottom, transparent 0%, transparent 62.5%, #bde0aa 62.5%, #bde0aa 100%);
}
@media only screen and (max-width: 768px) {
.area-report .inner > .hdg {
font-size: 2.4rem;
}
}
.carousel-work-01 {
opacity: 0;
transition: opacity .6s;
}
.carousel-work-01 > .inner {
position: relative;
padding: 0 30px;
}
.carousel-work-01 > .inner > .content {
width: 100%;
overflow: visible;
}
.carousel-work-01 > .inner > .content > ul {
position: relative;
display: flex;
margin-bottom: 0;
}
.carousel-work-01 > .inner > .content > ul > li {
padding: 0 10px 30px 10px;
}
.carousel-work-01 > .inner > .content > ul > li > a {
display: flex;
flex-direction: column;
width: 100%;
color: #000;
text-decoration: none;
}
.carousel-work-01 > .inner > .content > ul > li > a > .text {
order: 2;
margin: 1em 0 0 16px;
font-size: 1.6rem;
}
.carousel-work-01 > .inner > .content > ul > li > a > .text .hdg,
.carousel-work-01 > .inner > .content > ul > li > a > .text .author {
display: block;
}
.carousel-work-01 > .inner > .content > ul > li > a > .text .hdg {
position: relative;
font-weight: bold;
}
.carousel-work-01 > .inner > .content > ul > li > a > .text .hdg::before {
content: "";
position: absolute;
top: .625em;
left: 2px;
display: block;
width: 8px;
height: 8px;
border-top: 2px solid #52a127;
border-right: 2px solid #52a127;
transform: translateX(-50%) rotate(45deg);
}
.carousel-work-01 > .inner > .content > ul > li > a > .text .hdg::before {
left: -14px;
}
.carousel-work-01 > .inner > .content > ul > li > a > .text .author {
margin-top: .75em;
color: #999;
font-size: 1.3rem;
}
.carousel-work-01 > .inner > .content > ul > li > a > .img {
order: 1;
height: 100%;
text-align: center;
}
.carousel-work-01 > .inner > .content > ul > li > a:hover > .text .hdg,
.carousel-work-01 > .inner > .content > ul > li > a:hover > .text .author, .carousel-work-01 > .inner > .content > ul > li > a:focus > .text .hdg,
.carousel-work-01 > .inner > .content > ul > li > a:focus > .text .author, .carousel-work-01 > .inner > .content > ul > li > a:active > .text .hdg,
.carousel-work-01 > .inner > .content > ul > li > a:active > .text .author {
text-decoration: underline;
}
.carousel-work-01.ready > .inner > .content > ul {
transition-property: left;
transition-duration: 0;
}
.carousel-work-01.ready > .inner > .content > ul.static {
transition: none;
}
.carousel-work-01.ready > .inner > .content > ul > li {
flex-grow: 1;
flex-basis: 0;
}
.carousel-work-01.ready > .inner > .ui > .next,
.carousel-work-01.ready > .inner > .ui > .prev {
position: absolute;
bottom: 57.5%;
display: block;
width: 40px;
height: 60px;
overflow: hidden;
background-color: rgba(0, 0, 0, .8);
}
.carousel-work-01.ready > .inner > .ui > .next::before,
.carousel-work-01.ready > .inner > .ui > .prev::before {
content: "";
position: absolute;
top: 50%;
display: block;
width: 15px;
height: 15px;
transform: translateY(-50%) rotate(45deg);
}
.carousel-work-01.ready > .inner > .ui > .next > span,
.carousel-work-01.ready > .inner > .ui > .prev > span {
position: absolute;
top: -999em;
left: -999em;
}
.carousel-work-01.ready > .inner > .ui > .next {
right: -20px;
}
.carousel-work-01.ready > .inner > .ui > .next::before {
right: 37.5%;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
}
.carousel-work-01.ready > .inner > .ui > .prev {
left: -20px;
}
.carousel-work-01.ready > .inner > .ui > .prev::before {
left: 37.5%;
border-left: 2px solid #fff;
border-bottom: 2px solid #fff;
}
.carousel-work-01.show {
opacity: 1;
}
.carousel-work-01.static {
opacity: 1;
transition: none;
}
.static .carousel-work-01 {
opacity: 1;
}
.static .carousel-work-01 > .inner {
position: static;
padding: 0;
}
.static .carousel-work-01 > .inner > .content > ul {
flex-wrap: wrap;
}
.static .carousel-work-01 > .inner > .content > ul > li {
width: 25%;
}
@media only screen and (max-width: 768px) {
.carousel-work-01.ready > .inner > .ui > .next,
.carousel-work-01.ready > .inner > .ui > .prev {
width: 35px;
height: 55px;
}
.carousel-work-01.ready > .inner > .ui > .next::before,
.carousel-work-01.ready > .inner > .ui > .prev::before {
width: 13px;
height: 13px;
}
.carousel-work-01.ready > .inner > .ui > .next {
right: -15px;
}
.carousel-work-01.ready > .inner > .ui > .prev {
left: -15px;
}
.static .carousel-work-01 > .inner > .content > ul > li {
width: 50%;
}
}
@media only screen and (max-width: 480px) {
.static .carousel-work-01 > .inner > .content > ul > li {
width: 100%;
}
}
.carousel-detail-01 {
opacity: 0;
transition: opacity .6s;
}
.carousel-detail-01 > .inner {
position: relative;
}
.carousel-detail-01 > .inner > .content {
width: 100%;
overflow: hidden;
}
.carousel-detail-01 > .inner > .content > ul {
position: relative;
display: flex;
margin-bottom: 0;
}
.carousel-detail-01 > .inner > .content > ul > li > .img {
width: 100%;
text-align: center;
}
.carousel-detail-01.ready {
opacity: 1;
}
.carousel-detail-01.ready > .inner > .content > ul {
transition-property: left;
transition-duration: 0;
}
.carousel-detail-01.ready > .inner > .content > ul.static {
transition: none;
}
.carousel-detail-01.ready > .inner > .content > ul > li {
flex-grow: 1;
flex-basis: 0;
display: flex;
justify-content: center;
align-items: center;
}
.carousel-detail-01.ready > .inner > .ui {
margin: 10px 0 0 0;
}
.carousel-detail-01.ready > .inner > .ui .indicator {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
margin: 0 0 0 -25px;
}
.carousel-detail-01.ready > .inner > .ui .indicator > li {
flex-grow: 1;
flex-basis: 0;
display: flex;
justify-content: center;
align-items: center;
max-width: 125px;
min-width: 20%;
margin-top: 10px;
padding-left: 25px;
}
.carousel-detail-01.ready > .inner > .ui .indicator > li > button[aria-selected] {
position: relative;
}
.carousel-detail-01.ready > .inner > .ui .indicator > li > button[aria-selected]::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: block;
border: 2px solid transparent;
transition: border-color .2s;
}
.carousel-detail-01.ready > .inner > .ui .indicator > li > button[aria-selected="true"]::after {
border-color: #52a127;
}
.carousel-detail-01.static {
opacity: 1;
transition: none;
}
.carousel-detail-01.static > .inner > .content > ul > li {
width: 100%;
text-align: center;
}
.static .carousel-detail-01 {
opacity: 1;
}
.static .carousel-detail-01 > .inner {
position: static;
padding: 0;
}
.static .carousel-detail-01 > .inner > .content > ul {
flex-wrap: wrap;
}
.static .carousel-detail-01 > .inner > .content > ul > li {
width: 100%;
text-align: center;
}
.static .carousel-detail-01 > .inner > .content > ul > li + li {
margin-top: 20px;
}
@media only screen and (max-width: 1024px) {
.carousel-detail-01.ready > .inner > .ui {
margin-top: 15px;
}
.carousel-detail-01.ready > .inner > .ui .indicator > li {
max-width: 90px;
}
}
@media only screen and (max-width: 768px) {
.carousel-detail-01.ready > .inner > .ui .indicator > li {
max-width: 70px;
}
}
@media only screen and (max-width: 480px) {
.carousel-detail-01.ready > .inner > .ui {
margin-top: 10px;
}
.carousel-detail-01.ready > .inner > .ui .indicator > li {
max-width: 60px;
}
}
/* =====================================
CTS
------------------------------------- */
.cts .srm_hearing_list_label {
margin-bottom: .75em;
}
.cts .notice {
margin-top: .75em;
}
.cts .table_01 {
width: 100%;
margin: 30px 0;
border-top: 1px solid #ccc;
}
.cts .table_01 th,
.cts .table_01 td {
border-bottom: 1px solid #ccc;
padding: 20px 30px;
font-size: 1.6rem;
text-align: left;
vertical-align: middle;
}
.cts .table_01 th p:last-child,
.cts .table_01 th ul:last-child,
.cts .table_01 th ol:last-child,
.cts .table_01 th dl:last-child,
.cts .table_01 td p:last-child,
.cts .table_01 td ul:last-child,
.cts .table_01 td ol:last-child,
.cts .table_01 td dl:last-child {
margin-bottom: 0;
}
.cts .table_01 th {
background-color: #eee;
}
.cts .table_01 th > span[style="color:red;"] {
display: inline-block;
overflow: hidden;
color: #ed3131 !important;
font-size: 0;
background: #ed3131;
padding: 0 10px;
vertical-align: middle;
}
.cts .table_01 th > span[style="color:red;"]::after {
content: "必須";
font-size: 1.2rem;
font-weight: bold;
line-height: 2em;
color: #fff;
}
.cts .table_01 td {
background-color: #fff;
}
.cts .table_01 td > .srm_select:only-child {
width: 100%;
max-width: 50%;
}
.cts .table_01 td font[color="#ff3300"] {
color: #ed3131 !important;
}
.cts .table_01 .text-01 {
display: inline-flex;
align-items: flex-end;
margin-right: 3.75vw;
}
.cts .table_01 .text-01:last-child {
margin-right: 0;
}
.cts .table_01 .text-01.w-large {
width: 50%;
}
.cts .table_01 .text-01.w-medium {
width: 42.5%;
}
.cts .table_01 .text-01.w-small {
width: 21.25%;
min-width: 160px;
}
.cts .table_01 .text-01 > span + span {
margin-left: 10px;
}
.cts .table_01 .text-01 > span.label {
flex-shrink: 0;
margin-bottom: .6em;
}
.cts .table_01 .text-01 > span.input {
flex-grow: 1;
}
.cts .table_01 .text-01 > span.input .example {
display: block;
line-height: 1.25;
margin-bottom: .5em;
color: #666;
}
.cts .table_01 .text-01 > span.input input[type="text"], .cts .table_01 .text-01 > span.input input[type="tel"], .cts .table_01 .text-01 > span.input input[type="number"] {
width: 100%;
border: 1px solid #ccc;
padding: .46875em 5px;
font-size: 1.6rem;
}
.cts .table_01 .text-01 > span.input input[type="number"] {
-webkit-appearance: textfield;
appearance: textfield;
}
.cts .table_01 .text-01 > span.input input[type="number"]::-webkit-outer-spin-button, .cts .table_01 .text-01 > span.input input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.cts .table_01 .text-01 > span.input input[type="number"]::outer-spin-button, .cts .table_01 .text-01 > span.input input[type="number"]::inner-spin-button {
appearance: none;
margin: 0;
}
.cts .table_01 .radio-01,
.cts .table_01 .checkbox-01 {
display: inline-block;
margin-right: 3.75vw;
margin-bottom: 0;
}
.cts .table_01 .radio-01:last-child,
.cts .table_01 .checkbox-01:last-child {
margin-right: 0;
}
.cts .table_01 .radio-01 input[type="radio"],
.cts .table_01 .radio-01 input[type="checkbox"],
.cts .table_01 .checkbox-01 input[type="radio"],
.cts .table_01 .checkbox-01 input[type="checkbox"] {
position: absolute;
left: -2em;
}
.cts .table_01 .radio-01 input[type="radio"]:checked + label::after,
.cts .table_01 .radio-01 input[type="checkbox"]:checked + label::after,
.cts .table_01 .checkbox-01 input[type="radio"]:checked + label::after,
.cts .table_01 .checkbox-01 input[type="checkbox"]:checked + label::after {
opacity: 1;
}
.cts .table_01 .radio-01 input[type="radio"] + label,
.cts .table_01 .radio-01 input[type="checkbox"] + label,
.cts .table_01 .checkbox-01 input[type="radio"] + label,
.cts .table_01 .checkbox-01 input[type="checkbox"] + label {
position: relative;
display: inline-block;
vertical-align: bottom;
padding-left: 40px;
}
.cts .table_01 .radio-01 input[type="radio"] + label::before, .cts .table_01 .radio-01 input[type="radio"] + label::after,
.cts .table_01 .radio-01 input[type="checkbox"] + label::before,
.cts .table_01 .radio-01 input[type="checkbox"] + label::after,
.cts .table_01 .checkbox-01 input[type="radio"] + label::before,
.cts .table_01 .checkbox-01 input[type="radio"] + label::after,
.cts .table_01 .checkbox-01 input[type="checkbox"] + label::before,
.cts .table_01 .checkbox-01 input[type="checkbox"] + label::after {
content: "";
position: absolute;
top: 50%;
display: block;
}
.cts .table_01 .radio-01 input[type="radio"] + label::before,
.cts .table_01 .radio-01 input[type="checkbox"] + label::before,
.cts .table_01 .checkbox-01 input[type="radio"] + label::before,
.cts .table_01 .checkbox-01 input[type="checkbox"] + label::before {
left: 0;
border: 1px solid #ccc;
}
.cts .table_01 .radio-01 input[type="radio"] + label::after,
.cts .table_01 .radio-01 input[type="checkbox"] + label::after,
.cts .table_01 .checkbox-01 input[type="radio"] + label::after,
.cts .table_01 .checkbox-01 input[type="checkbox"] + label::after {
left: 6px;
opacity: 0;
transition: opacity .2s;
}
.cts .table_01 .radio-01 input[type="radio"] + label ~ label,
.cts .table_01 .radio-01 input[type="checkbox"] + label ~ label,
.cts .table_01 .checkbox-01 input[type="radio"] + label ~ label,
.cts .table_01 .checkbox-01 input[type="checkbox"] + label ~ label {
margin-left: 3.75vw;
}
.cts .table_01 .radio-01 input[type="radio"] + label::before, .cts .table_01 .radio-01 input[type="radio"] + label::after,
.cts .table_01 .checkbox-01 input[type="radio"] + label::before,
.cts .table_01 .checkbox-01 input[type="radio"] + label::after {
border-radius: 50%;
}
.cts .table_01 .radio-01 input[type="radio"] + label::before,
.cts .table_01 .checkbox-01 input[type="radio"] + label::before {
width: 24px;
height: 24px;
margin-top: -12px;
}
.cts .table_01 .radio-01 input[type="radio"] + label::after,
.cts .table_01 .checkbox-01 input[type="radio"] + label::after {
width: 12px;
height: 12px;
margin-top: -6px;
background-color: #52a127;
}
.cts .table_01 .radio-01 input[type="checkbox"] + label,
.cts .table_01 .checkbox-01 input[type="checkbox"] + label {
padding-left: 30px;
}
.cts .table_01 .radio-01 input[type="checkbox"] + label::before,
.cts .table_01 .checkbox-01 input[type="checkbox"] + label::before {
width: 18px;
height: 18px;
margin-top: -9px;
}
.cts .table_01 .radio-01 input[type="checkbox"] + label::after,
.cts .table_01 .checkbox-01 input[type="checkbox"] + label::after {
width: 7px;
height: 11px;
margin-top: -7px;
border-right: 2px solid #52a127;
border-bottom: 2px solid #52a127;
transition: opacity .2s;
transform: rotate(45deg) skew(10deg);
}
.cts .textarea-01 {
width: 100%;
}
.cts .textarea-01 textarea {
display: block;
width: 100%;
height: 13em;
line-height: 1.375;
border: 1px solid #ccc;
padding: .5em 10px;
font-size: 1.6rem;
}
.cts .textarea-01 .example {
display: block;
line-height: 1.25;
margin-bottom: .5em;
color: #666;
}
.cts .select-01 {
display: inline-flex;
align-items: flex-end;
margin-right: 3.75vw;
}
.cts .select-01.w-largest {
width: 70%;
}
.cts .select-01.w-large {
width: 50%;
}
.cts .select-01.w-medium {
width: 42.5%;
}
.cts .select-01.w-small {
width: 21.25%;
}
.cts .select-01 .example {
display: block;
line-height: 1.25;
margin-bottom: .5em;
color: #666;
}
.cts .select-01 > span + span {
margin-left: 10px;
}
.cts .select-01 > span.label {
flex-shrink: 0;
margin-bottom: .6em;
}
.cts .select-01 > span.select {
position: relative;
flex-grow: 1;
}
.cts .select-01 > span.select::after {
content: "";
position: absolute;
top: 50%;
right: 15px;
display: block;
width: 0;
height: 0;
margin-left: -4px;
border-width: 6px 4px 0 4px;
border-style: solid;
border-color: #000 transparent transparent transparent;
margin-top: -3px;
pointer-events: none;
}
.cts .select-01 > span.select select {
display: inline-block;
width: 100%;
border-radius: 0;
border: 1px solid #ccc;
padding: .5em 30px .5em 10px;
background-color: #fff;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.cts .select-01 > span.select select::-ms-expand {
display: none;
}
.cts input[type='file'] {
width: 100%;
}
@media only screen and (max-width: 768px) {
.cts .table_01 {
margin: 30px 0;
}
.cts .table_01 tr,
.cts .table_01 th,
.cts .table_01 td {
display: block;
}
.cts .table_01 th {
width: 100%;
padding: 15px 10px 15px 20px;
}
.cts .table_01 td {
border-top: none;
padding: 20px;
}
.cts .table_01 td {
padding: 15px 20px;
}
.cts .table_01 td > .srm_select:only-child,
.cts .table_01 td > .srm_input_text:only-child {
max-width: none;
width: 100%;
margin: 5px 0;
}
.cts .table_01 .text-01 {
margin-right: 0;
}
.cts .table_01 .text-01.w-large, .cts .table_01 .text-01.w-medium {
width: 100%;
}
.cts .table_01 .text-01.w-small {
width: 27.5%;
margin-right: 20px;
}
.cts .table_01 .text-01 + .text-01 {
margin-top: .625em;
}
.cts .table_01 .radio-01,
.cts .table_01 .checkbox-01 {
width: 100%;
margin-right: 0;
}
.cts .table_01 .radio-01 + .radio-01,
.cts .table_01 .checkbox-01 + .radio-01 {
margin-top: 10px;
}
.cts .table_01 .textarea-01 textarea {
height: 11em;
}
.cts .table_01 .select-01.w-largest, .cts .table_01 .select-01.w-large, .cts .table_01 .select-01.w-medium, .cts .table_01 .select-01.w-small {
width: 100%;
}
.cts .table_01 .select-01.w-largest {
flex-wrap: wrap;
margin-left: -10px;
margin-top: -10px;
}
.cts .table_01 .select-01.w-largest > :first-child {
margin-left: 10px;
}
.cts .table_01 .select-01.w-largest > span {
margin-top: 10px;
}
.cts .table_01 .select-01.w-largest .select {
min-width: 150px;
flex-grow: 0;
}
}
.area-live#live-04 .carousel-blog-01 {
margin-top: 50px;
margin-bottom: 20px;
text-align: left;
}
.area-live#live-04 .carousel-blog-01 > .inner > .content > ul > li > a {
color: #fff;
}
.area-live#live-04 .carousel-blog-01 > .inner > .content > ul > li > a > .text .hdg::before {
border-color: #fff;
}
.area-live#live-04 .carousel-blog-01 > .inner > .content > ul > li > a > .text .author {
color: #fff;
}
.area-live#live-04 .carousel-blog-01 {
margin-top: 30px;
margin-bottom: 10px;
}
.carousel-blog-01 {
opacity: 0;
transition: opacity .6s;
line-height: 1.6;
}
.carousel-blog-01 > .inner {
position: relative;
padding: 0 30px;
}
.carousel-blog-01 > .inner > .content {
width: 100%;
overflow: visible;
}
.carousel-blog-01 > .inner > .content > ul {
position: relative;
display: flex;
margin-bottom: 0;
}
.carousel-blog-01 > .inner > .content > ul > li {
padding: 0 10px 30px 10px;
}
.carousel-blog-01 > .inner > .content > ul > li > a {
display: flex;
flex-direction: column;
width: 100%;
color: #000;
text-decoration: none;
}
.carousel-blog-01 > .inner > .content > ul > li > a > .text {
order: 2;
margin: 13px 0 0;
font-size: 1.6rem;
}
.carousel-blog-01 > .inner > .content > ul > li > a > .text .hdg,
.carousel-blog-01 > .inner > .content > ul > li > a > .text .author {
display: block;
}
.carousel-blog-01 > .inner > .content > ul > li > a > .text .hdg {
position: relative;
font-weight: bold;
margin-bottom: 10px;
}
.carousel-blog-01 > .inner > .content > ul > li > a > .text .hdg::before {
content: "";
position: absolute;
top: .625em;
left: -14px;
display: none;
width: 8px;
height: 8px;
border-top: 2px solid #52a127;
border-right: 2px solid #52a127;
transform: translateX(-50%) rotate(45deg);
}
.carousel-blog-01 > .inner > .content > ul > li > a > .text .author {
margin-top: .75em;
color: #999;
font-size: 1.3rem;
}
.carousel-blog-01 > .inner > .content > ul > li > a > .img {
order: 1;
height: 240px;
text-align: center;
}
.carousel-blog-01 > .inner > .content > ul > li > a:hover > .text .hdg,
.carousel-blog-01 > .inner > .content > ul > li > a:hover > .text .author, .carousel-blog-01 > .inner > .content > ul > li > a:focus > .text .hdg,
.carousel-blog-01 > .inner > .content > ul > li > a:focus > .text .author, .carousel-blog-01 > .inner > .content > ul > li > a:active > .text .hdg,
.carousel-blog-01 > .inner > .content > ul > li > a:active > .text .author {
text-decoration: underline;
}
.carousel-blog-01.ready > .inner > .content > ul {
transition-property: left;
transition-duration: 0;
}
.carousel-blog-01.ready > .inner > .content > ul.static {
transition: none;
}
.carousel-blog-01.ready > .inner > .content > ul > li {
flex-grow: 1;
flex-basis: 0;
}
.carousel-blog-01.ready > .inner > .ui > .next,
.carousel-blog-01.ready > .inner > .ui > .prev {
position: absolute;
bottom: 57.5%;
display: block;
width: 40px;
height: 60px;
overflow: hidden;
background-color: rgba(0, 0, 0, .8);
}
.carousel-blog-01.ready > .inner > .ui > .next::before,
.carousel-blog-01.ready > .inner > .ui > .prev::before {
content: "";
position: absolute;
top: 50%;
display: block;
width: 15px;
height: 15px;
transform: translateY(-50%) rotate(45deg);
}
.carousel-blog-01.ready > .inner > .ui > .next > span,
.carousel-blog-01.ready > .inner > .ui > .prev > span {
position: absolute;
top: -999em;
left: -999em;
}
.carousel-blog-01.ready > .inner > .ui > .next {
right: -20px;
}
.carousel-blog-01.ready > .inner > .ui > .next::before {
right: 37.5%;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
}
.carousel-blog-01.ready > .inner > .ui > .prev {
left: -20px;
}
.carousel-blog-01.ready > .inner > .ui > .prev::before {
left: 37.5%;
border-left: 2px solid #fff;
border-bottom: 2px solid #fff;
}
.carousel-blog-01.show {
opacity: 1;
}
.carousel-blog-01.static {
opacity: 1;
transition: none;
}
.static .carousel-blog-01 {
opacity: 1;
}
.static .carousel-blog-01 > .inner {
position: static;
padding: 0;
}
.static .carousel-blog-01 > .inner > .content > ul {
flex-wrap: wrap;
}
.static .carousel-blog-01 > .inner > .content > ul > li {
width: 25%;
}
@media only screen and (max-width: 768px) {
.carousel-blog-01.ready > .inner > .ui > .next,
.carousel-blog-01.ready > .inner > .ui > .prev {
width: 35px;
height: 55px;
}
.carousel-blog-01.ready > .inner > .ui > .next::before,
.carousel-blog-01.ready > .inner > .ui > .prev::before {
width: 13px;
height: 13px;
}
.carousel-blog-01.ready > .inner > .ui > .next {
right: -15px;
}
.carousel-blog-01.ready > .inner > .ui > .prev {
left: -15px;
}
.static .carousel-woblogrk-01 > .inner > .content > ul > li {
width: 50%;
}
}
@media only screen and (max-width: 480px) {
.static .carousel-blog-01 > .inner > .content > ul > li {
width: 100%;
}
}
.carousel-blog-01 > .inner > .content > ul > li > a > .text .date {
margin-top: .75em;
color: #999;
font-size: 1.5rem;
}
.carousel-blog-01 > .inner > .content > ul > li > a:hover .text .date {
text-decoration: none;
}
.carousel-blog-01 > .inner > .content > ul > li > .label {
display: inline-block;
width: auto;
padding: 5px 10px;
border: 1px solid #aaa;
border-radius: 25px;
font-size: 14px;
font-weight: bold;
background: #fff;
}
.carousel-blog-01 > .inner > .content > ul > li > .label > .wrap {
display: flex;
}
.carousel-blog-01 > .inner > .content > ul > li > .label > .wrap img {
display: flex;
align-self: center;
max-height: 20px;
margin-right: 10px;
}
.carousel-blog-01 > .inner > .content > ul > li > .label:hover {
text-decoration: underline;
}
.carousel-blog-01 > .inner > .content > ul > li > a > .img > .img-in {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.carousel-blog-01 > .inner > .content > ul > li > a > .img > .img-in > img {
max-height: 100%;
}
.carousel-blog-01 > .inner > .content > ul > li > a > .img.-none {
padding: 25px;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
background-color: #fff;
border: 1px solid #ccc;
}
.carousel-blog-01 > .inner > .content > ul > li > a > .img.-none > .icon {
margin: 0 5px 0 0;
width: 100%;
max-width: 55px;
}
.carousel-blog-01 > .inner > .content > ul > li > a > .img.-none > .name {
font-family: "Hiragino Kaku Gothic Pro", "\30d2\30e9\30ae\30ce\89d2\30b4 Pro", Meiryo, "\30e1\30a4\30ea\30aa", Arial, sans-serif;
font-style: italic;
font-size: 2.8rem;
font-weight: bold;
max-width: 70%;
margin: 0;
}
.box-news-01 {
position: relative;
width: 100%;
padding: 0 15px;
font-weight: bold;
}
.box-news-01::after {
position: absolute;
display: block;
content: "";
top: 0;
left: 0;
width: 100vw;
height: 100%;
background: #f0f8f0;
}
.box-news-01 > .inner {
position: relative;
max-width: 1280px;
min-height: 190px;
padding: 28px 32px;
margin: 0 auto;
background: #fff;
border: 8px solid #ffdd55;
box-shadow: 0 0 .5em rgba(0, 0, 0, .25);
z-index: 1;
}
.box-news-01 > .inner > *:last-child {
margin-bottom: 0;
}
.box-news-01 > .inner > .read {
display: inline-block;
margin-bottom: 20px;
font-size: 2.8rem;
font-weight: bold;
}
.box-news-01 > .inner > .read > b {
padding-bottom: 3px;
background-image: linear-gradient(to bottom, transparent 0%, transparent 90%, #ffdd55 90%, #ffdd55 100%);
}
.box-news-01 > .inner > .link-01 > a {
position: relative;
display: inline-block;
padding-left: 16px;
color: #000;
text-decoration: none;
transition: color .2s;
}
.box-news-01 > .inner > .link-01 > a:hover,
.box-news-01 > .inner > .link-01 > a:focus,
.box-news-01 > .inner > .link-01 > a:active {
color: #ffa902;
}
.box-news-01 > .inner > .link-01 > a::before {
content: "";
position: absolute;
top: .625em;
left: 2px;
display: block;
width: 8px;
height: 8px;
border-top: 2px solid #ffa902;
border-right: 2px solid #ffa902;
transform: translateX(-50%) rotate(45deg);
transition: left .2s;
}
.box-news-01 > .inner > .link-01 > a:hover::before,
.box-news-01 > .inner > .link-01 > a:focus::before,
.box-news-01 > .inner > .link-01 > a:active::before {
left: 6px;
}
@media only screen and (max-width: 768px) {
.box-news-01 > .inner {
min-height: auto;
padding: 20px 8px;
}
.box-news-01 > .inner > .read {
font-size: 2.4rem;
}
.box-news-01 > .inner > .link-01 {
text-align: center;
}
}
#footer.ranch_list {
position: relative;
margin-top: 20px;
}
#pagetop {
bottom: auto;
line-height: 1;
opacity: 0;
position: absolute;
right: 20px;
text-align: right;
top: -68px;
transition: .4s all;
z-index: 555;
}
#pagetop.active {
opacity: 1;
}
#pagetop.stop {
bottom: 15px;
position: fixed;
top: auto;
margin: 0;
}
#pagetop a {
background: #333;
display: inline-block;
height: 50px;
opacity: .8;
overflow: hidden;
position: relative;
transition: .2s all;
width: 50px;
}
#pagetop a::before {
border-bottom: solid 2px #fff;
border-right: solid 2px #fff;
content: "";
display: block;
height: 12px;
left: 50%;
margin-left: -6px;
margin-top: -4px;
position: absolute;
top: 50%;
transform: rotate(-135deg);
width: 12px;
will-change: transform;
}
#pagetop a:hover,
#pagetop a:focus {
opacity: .7;
}
#pagetop a span {
display: block;
position: absolute;
right: -999em;
}
@media only screen and (max-width: 768px) {
#pagetop {
right: 15px;
}
}
.btn-link-01.ranch_list {
text-align: right;
margin: 0;
}
.btn-link-01.ranch_list > a {
padding: .875em 25px;
}
.btn-link-01.ranch_list > .ranch_list-link {
margin-left: 12px;
}
.btn-link-01.ranch_list > .ranch_list-link > span {
padding-left: 27px;
}
.btn-link-01.ranch_list > a.ranch_list-none > span {
padding-left: 0;
}
.btn-link-01.ranch_list > .ranch_list-link > span::before {
top: 5px;
left: 7px;
width: 15px;
height: 15px;
border-radius: 50%;
border: 2px solid #52a127;
}
.btn-link-01.ranch_list > .ranch_list-link > span::after {
content: "";
position: absolute;
display: block;
top: 19px;
left: 11px;
width: 9px;
height: 2px;
border-radius: 1px;
background-color: #52a127;
transform: rotate(45deg);
}
.btn-link-01.ranch_list > a.ranch_list-none > span::before,
.btn-link-01.ranch_list > a.ranch_list-none > span::after {
display: none;
}
@media only screen and (max-width: 768px) {
.btn-link-01.ranch_list {
text-align: center;
}
.btn-link-01.ranch_list > a {
padding: .875em 18px;
width: 100%;
max-width: 310px;
}
.btn-link-01.ranch_list > .ranch_list-link {
margin-left: 0;
margin-top: 12px;
}
}
.sns-list {
display: flex;
justify-content: center;
}
.sns-list .btn {
border-radius: 50%;
}
.sns-list .btn > a img {
height: 40px;
}
.sns-list .btn + .btn {
margin-left: 25px;
}
.postcode-button {
border: 2px solid #52a127;
padding: 2px 13px 0;
background-color: #fff;
color: #52a127;
font-size: 1.4rem;
font-weight: bold;
white-space: nowrap;
margin: auto;
margin-left: 18px;
}
.postcode-button:hover {
text-decoration: underline;
}
.acceptance__state {
margin-bottom: .25em;
}
.acceptance__defTtl,
.acceptance__defDesc {
display: inline;
}
