/*====================================================================
Base [PC standerd]
=====================================================================*/
body {
font-family: 'Avenir Next', 'Helvetica Neue', sans-serif;
text-align: center;
margin: 0;
}
article {
width: 100%;
overflow: hidden;
}/**/
/** リングがtelの場合デフォルトの表示 **/
a[href^="tel:"] { cursor: default; }
/*-------------------------------------
![]()
可変
-------------------------------------*/
img {
max-width:100%;
height:auto;
/* 画像下のマージンを消す */
vertical-align: bottom;
}
picture {
display: block;
}
picture sorce,
picture img {
width: 100%;
}
em, dfn {
font-style: normal;
}
/*----------------------------------------------
一定スクロールでheader出現 [commom.js]
-----------------------------------------------*/
.fix{
position: fixed;
top: 0;
z-index: 200;
animation: fadeInDown 1s ease 0s 1 normal;
-webkit-transition: all 0.5s;
-ms-transition: all 0.5s;
transition: all 0.5s;
}
article {
margin: 0 auto;
/*border: thin dashed #9F3;*/
}
section {
}
/*main {
border: thin dashed #963;
}*/
/*--------------------------------
Mainimage
--------------------------------
main div.MainImage {
width: 100%;
}*/
/*---------------------------------
他ページtitle
---------------------------------*/
main > section:first-child {
color: #FFF;
width: 100%;
background-color: #8CC63F;
padding: 1px;
}
main > section:first-child div {
width: 80%;
max-width: 900px;
margin: 0 auto;
padding: 1% 0;
}
main > section:first-child div h2 {
font-size: 1.5rem;
letter-spacing: 2px;
line-height: 1.9rem;
}
/*---------------------------------
from確認画面
----------------------------------
main > section.FormKakunin {
color: #333;
background-color: transparent;
}*/
/*----------------------------
Contents
-----------------------------
main > section:nth-child(3) {
width: 80%;
max-width: 1020px;
margin: 0 auto 5% auto;
}*/
/*==========================================
アンカーリンク位置設定
===========================================*/
span.Anchor {
width: 1px;
position: relative;
top: -80px;
display: block;
background-color: #F96;
/*border: thin dashed #C93;*/
}
/*=======================================
↑Anchor PageTop
========================================*/
#topBtn{
min-width: 45px;
position: fixed;
right: 2%;
bottom: 20px;
z-index: 9999;
}
/** Tablet size 未満 **/
@media all and (max-width: 768px) {
#topBtn{
max-width: 25px;
position: fixed;
right: 2%;
bottom: 20px;
z-index: 9999;
}
}
/*======================================================================
Footer [PC Standerd]
=======================================================================*/
footer {
width: 100%;
/*background-color: #8DC63F;*/
margin: 0;
background-image: url(../img/footer_back.jpg);
background-repeat: repeat;
}
footer section {
width: 95%;
max-width: 1020px;
margin: 0 auto;
padding: 2% 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-justify-content: space-between;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
/*border: thin dashed #FFF;*/
}
/*=======================================================
FooterContents
Logo / FooterMenu
========================================================*/
/*----------------------------------------------
Logo 詳細
-----------------------------------------------*/
footer section > div:first-child {
width: 15%;
min-width: 10rem;
color: #736357;
margin-right: 2%;
/*border: thin dashed #FFF;*/
vertical-align: top;
}
/** 総合福祉サービス **/
footer section > div:first-child p:first-child {
font-size: 0.9rem;
letter-spacing: 0.3rem;
padding-bottom: 2%;
/*background-color: #CC0;
border: thin dashed #CF0;*/
}
/** logo **/
footer section > div:first-child img:nth-child(2) {
width: 100%;
}
/** total welfare service **/
footer section > div:first-child p:nth-child(3) {
font-size: 0.9rem;
letter-spacing: 1px;
margin-top: 2%;
}
/** address **/
footer section > div:first-child address {
display: block;
margin-top: 1rem;
}
/** 株式会社 大地 **/
footer section > div:first-child address p:first-child {
font-size: 1.1rem;
line-height: 1.2rem;
font-weight: bold;
padding-bottom: 1rem;
}
/** 住所 **/
footer section > div:first-child address p:nth-child(2) {
font-size: 0.8rem;
line-height: 0.9rem;
padding-bottom: 2%;
}
/** TEL **/
footer section > div:first-child address p:nth-child(3) {
font-size: 1rem;
font-weight: bold;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-justify-content: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-items: center;
-ms-aling-itmes: center;
align-items: center;
}
/** 受付時間 **/
footer section > div:first-child address p:nth-child(4) {
font-size: 0.8rem;
margin-top: 4%;
}
/*------------------------------------------
footer MENU Link
------------------------------------------*/
footer section div:nth-child(2) {
width: 70%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
/*-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;*/
-webkit-align-items: center;
-ms-aling-itmes: center;
align-items: center;
/*background-color: #060;
border: thin dashed #F33;*/
flex: 1;
}
/** Link Menu **/
footer section div:nth-child(2) > ul {
width: 100%;
max-width: 45rem;
list-style-type: none;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-justify-content: space-between;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
margin: 0 auto;
/*background: #FFF;*/
}
footer section div:nth-child(2) ul li a {
color: #736357;
font-style-type: normal;
text-decoration: none;
display: block;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
/*-webkit-justify-content: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;*/
-webkit-aling-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
footer section div:nth-child(2) > ul > li a:hover {
color: #630;
}
/** 子要素Link **/
footer section div:nth-child(2) > ul > li > ul {
color: #736357;
line-height: 2rem;
list-style-type: disc;
box-sizing: boreder-box;
margin: 0;
padding: 0;
padding-left: 1rem;
/*border: thin dashed #F63;*/
}
footer section div:nth-child(2) > ul > li > ul li {
border: none;
margin: 0;
padding: 0;
}
footer section div:nth-child(2) > ul > li > ul li a {
text-align: left;
/*border: thin dashed #F66;*/
display: block;
}
/*==================================
CopyRight
==================================*/
small {
color: #736357;
max-width: 100em;
font-size: 0.7rem;
letter-spacing: 2px;
text-align: center;
vartical-align: center;
display: block;
margin: 0 auto;
padding: 0.5%;
}
/*============================================================================*
● 最大 PC size
window width 1020px以上
*=============================================================================*/
@media (min-width: 1020px) {
/** 最大サイズ判定用 **/
header {
/*border: 2px dashed #060;*/
}
}
/*===================================================================================
●tablet.css 画面の横幅が768pxまで
====================================================================================*/
@media screen and (max-width: 768px) {
/** tabletサイズ判定用 **/
article {
/*border: 2px dashed #C03;
margin: 0 auto;*/
}
/*===========================================================
fullSlideShow カルーセル
============================================================*/
div.area_slider {
width: 100%;
max-width: 1100px;
height: auto;
/*text-align: center;
background-color: #FF0;*Yellow*
margin: 0 auto;
position: static;
top: 0;*/
}
div.logo_box{
top: 28%;
}
div.logo_box > img {
display: block;
width: 70%;
margin: auto auto;
}
/*======================================================================
Footer [PC Standerd]
=======================================================================*/
footer {
width: 100%;
/*border: thin dashed #C03;
margin: 0;
background-image: url(../img/footer_back.jpg);
background-repeat: repeat;*/
}
footer section {
width: 90%;
max-width: 1020px;
/*border: thin dashed #F36;*/
margin: 0 auto;
padding: 2% 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-justify-content: space-between;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
/*border: thin dashed #FFF;*/
}
/*=======================================================
Footer Menu Link
========================================================*/
/*----------------------------------------------------
Logo
-----------------------------------------------------*/
footer section div:first-child {
width: 25%;
/*max-width: 50%;*/
/*border: thin dashed #FFF;*/
}
footer section div:first-child > img {
width: 100%;
}
/*-----------------------------------------------------
footer Menu link
-----------------------------------------------------*/
footer section div:nth-child(2) {
width: 78%;
/*border: 2px dashed #FFF;*/
/*display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-webkit-box-direction: column;
-ms-flex-direction: column;
flex-direction : column;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-align-items: center;
-ms-aling-itmes: center;
align-items: center;*/
}
footer section div:nth-child(2) > ul {
width: 100%;
list-style-type: none;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
/*-webkit-flex-direction: column;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;*/
-webkit-jusitfy-content: sapce-around;
-webkit-box-pack: distribute;
-webkit-flex-pack: distribute;
justify-content: space-around;
/*border: thin dashed #900;*/
}
/** li **/
footer section div:nth-child(2) > ul > li {
width: 20%;
text-align: left;
/**/
display: block;
border-right: none;
/*border-bottom: thin solid #690;
background: #FFF;*/
}
/** Home / お問合せ **/
footer section div:nth-child(2) > ul > li:first-child, footer section div:nth-child(2) > ul > li:last-child {
width: 12%;
min-width: 4rem;
/*background: #EFEFEF;*/
}
/** 会社概要 / 募集要項 **/
footer section div:nth-child(2) > ul > li:nth-child(2), footer section div:nth-child(2) > ul > li:nth-child(4) {
width: 14%;
min-width: 4rem;
}
/** 福祉サービス一覧 **/
footer section div:nth-child(2) > ul > li:nth-child(3) {
width: 32%;
/*width: 17rem;
max-width: 100%;
background: #EFEFEF;*/
}
/** a **/
footer section div:nth-child(2) ul li a {
font-style-type: normal;
text-decoration: none;
line-height: 3rem;
display: block;
/*padding-left: 2%;*/
}
footer section div:nth-child(2) ul li a:hover {
color: #630;
/*background-color: #FFF;
border-top: thin solid #360;
border-bottom: thin solid #FFF;*/
}
/** 子リンク **/
footer section div:nth-child(2) ul:first-child li > ul {
width: 100%;
/*background-color: #F7EFE9;*/
list-style-type: disc;
margin-left: 3px;
padding-left: 3px;
}
footer section div:nth-child(2) ul:first-child > li ul > li {
width: #FFF;
color: #736357;
font-size: 0.9rem;
display: list-item;
/*background: #FFF;*/
}
/** NotLink [会社概要/福祉サービス一覧] *
footer section div:nth-child(2) > ul > li:nth-child(2), footer section div:nth-child(2) > ul > li:nth-child(3) {
padding-top: 0.5rem;
}
footer section div:nth-child(2) > ul > li:nth-child(2) > a, footer section div:nth-child(2) > ul > li:nth-child(3) > a {
line-height: 1rem;
display: inline;
}
footer section div:nth-child(2) > ul > li:nth-child(2) > a:hover, footer section div:nth-child(2) > ul > li:nth-child(3) > a:hover {
background-color: transparent;
border: none;
}*/
/*==================================
CopyRight
==================================*/
small {
color: #630;
/*width: 80%;
max-width: 1020px;*/
/**/
width: 100%;
font-size: 0.6rem;
letter-spacing: 2px;
text-align: center;
vartical-align: center;
margin: 0 auto;
padding: 0.5%;
/*border: thin dashed #F00;*/
display: block;
}
}
/*============================================================================
●smart.css 画面の横幅が640pxまで
===============================================================================*/
@media screen and (max-width: 640px) {
/** SmartPhoneサイズ判定用 **/
article {
/*border: 2px dashed #6CC;*/
}
a {
color: #1B1464;
}
/*===================================
fullSlideShow カルーセル
===================================*/
/** area_slider
--------------------------------- */
div.area_slider{
width: 100%;
/**/height: 100vh;
text-align: center;
position: relative;
/*position: fixed;*/
z-index: 0;
/*border: 2px dashed #396;*/
}
.fullSlideShow {
width: 100%;
/*height: 100vh;*/
text-align: left;
/*position: relative;*/
overflow: hidden;
z-index: 0;
/*border: thin dashed #933;
transform: translate3d(0, 0, 0);
transform: none !important;*/
/* 親要素をFixedにすると高さが無くなる。ulをFixedにするとsafariのみparallax化する。*/
position: fixed;
top: 0;
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
.fullSlideShow ul {
top: 50%;
left: 50%;
width: 100%;
/* absolute or fixed */
/**/position: fixed;
transform: translate3d(0, 0, 0);
transform: translateZ(0);-webkit-transform: translateZ(0);
/*overflow: hidden;*/
z-index: 1;
/*border: thin dashed #FFF;
background-attachment: fixed;*/
}
.fullSlideShow ul li {
top: 0;
left: 0;
width: 100%;
display: none;
/*position: absolute;*/
position: fixed;
z-index: -1;
}
.fullSlideShow ul li img {
width: 100%;
}
/*== PagiNation
================================ */
.pagiNation {
bottom: 30px;
left: 0;
width: 100%;
height: 15px;
text-align: center;
position: fixed; /* absolute or fixed */
z-index: 30; /* 非表示にする場合は「90」以下に */
visibility: hidden; /* 非表示にする場合は「hidden」に */
}
.pagiNation a {
margin: 0 5px;
width: 20px;
height: 20px;
display: inline-block;
overflow: hidden;
background: #000;
}
.pagiNation a.pnActive {
filter:alpha(opacity=100)!important;
-moz-opacity: 1!important;
opacity: 1!important;
}
/*=======================================
ClearFixElements
======================================= */
.fullSlideShow ul:after {
content: ".";
height: 0;
clear: both;
display: block;
visibility: hidden;
}
.fullSlideShow ul {
display: inline-block;
overflow: hidden;
font-size: 0;
}
/*=============================
MainImage Logo
==============================
section.area_slider {
width: 100%;
text-align: center;
position: relative;
z-index: 0;
}
div.logo_box {
position: absolute;
top: 20%;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
div.logo_box > img {
display: block;
margin: auto auto 30px;
width: 30%;
}*/
/*============================
↓ScrollIcon
=============================*/
.logo_box a {
/*position: absolute;*/
bottom: 20px;
left: 50%;
bottom: 20%;
z-index: 2;
display: inline-block;
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
color: #fff;
font : normal 400 15px/1 'Josefin Sans', sans-serif;
letter-spacing: .1em;
text-decoration: none;
transition: opacity .3s;
}
.logo_box a:hover {
opacity: .5;
}
.logo_box a {
padding-top: 70px;
}
.logo_box a span {
position: absolute;
top: 0;
left: 50%;
width: 24px;
height: 24px;
margin-left: -12px;
border-left: 1px solid #fff;
border-bottom: 1px solid #fff;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-animation: sdb05 1.5s infinite;
animation: sdb05 1.5s infinite;
box-sizing: border-box;
}
/***********************/
/** index以外 title **/
/***********************/
/*==============================
MainImage Logo
==============================
section.area_slider {
width: 100%;
text-align: center;
position: relative;
z-index: 0;
}
div.logo_box {
position: absolute;
top: 30%;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
div.logo_box div p {
font-size: 1em;
letter-spacing: 3px;
padding-bottom: 1%;
}
div.logo_box div h2 {
font-size: 3rem;
letter-spacing: 0.2em;
}
div.logo_box div img {
display: block;
margin: 30px auto;
width: 5rem;
}*/
@-webkit-keyframes sdb05 {
0% {
-webkit-transform: rotate(-45deg) translate(0, 0);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
-webkit-transform: rotate(-45deg) translate(-20px, 20px);
opacity: 0;
}
}
@keyframes sdb05 {
0% {
transform: rotate(-45deg) translate(0, 0);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
transform: rotate(-45deg) translate(-20px, 20px);
opacity: 0;
}
}
/*======================================================================
Footer [PC Standerd]
=======================================================================*/
footer {
width: 100%;
/*border: thin dashed #C03;
margin: 0;
background-image: url(../img/footer_back.jpg);
background-repeat: repeat;*/
}
footer section {
width: 100%;
max-width: 1020px;
/*border: thin dashed #F36;*/
margin: 0 auto;
padding: 4% 0;
/*display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-justify-content: space-between;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
border: thin dashed #FFF;*/
display: block;
}
/*=======================================================
Footer Menu Link
========================================================*/
/*----------------------------------------------------
Logo
-----------------------------------------------------*/
footer section div:first-child {
width: 100%;
max-width: 100%;
text-align: center;
margin: 0 auto;
/*border: thin dashed #FFF;*/
}
/** daichi **/
footer section > div:first-child img:nth-child(2) {
width: 10rem;
min-width: 5rem;
}
/** Tel **/
footer section > div:first-child address p img {
width: 1rem;
}
/*-----------------------------------------------------
footer Menu link
-----------------------------------------------------*/
footer section div:nth-child(2) {
width: 100%;
/*border: 2px dashed #FFF;*/
margin: 5% auto;
/*display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-webkit-box-direction: column;
-ms-flex-direction: column;
flex-direction : column;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-align-items: center;
-ms-aling-itmes: center;
align-items: center;*/
}
footer section div:nth-child(2) > ul {
width: 100%;
list-style-type: none;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
-webkit-jusitfy-content: sapce-between;
-webkit-box-pack: justify;
-webkit-flex-pack: justify;
justify-content: space-between;
/*border: thin dashed #900;*/
}
/** li **/
footer section div:nth-child(2) ul li {
width: 100%;
text-align: left;
/*background: #CC6;*/
display: block;
border-right: none;
/*border-bottom: thin solid #690;*/
}
/** Home / 募集要項 / お問合せ **/
footer section div:nth-child(2) > ul > li:first-child,
footer section div:nth-child(2) > ul > li:nth-child(4),
footer section div:nth-child(2) > ul > li:last-child {
width: 100%;
max-width: 100%;
/*background: #EFEFEF;*/
}
/** 会社概要 **/
footer section div:nth-child(2) > ul > li:nth-child(2) {
width: 100%;
max-width: 100%;
/*background: #EFEFEF;*/
}
/** 福祉サービス一覧 **/
footer section div:nth-child(2) > ul > li:nth-child(3) {
width: 100%;
max-width: 100%;
/*background: #EFEFEF;*/
}
/** a **/
footer section div:nth-child(2) ul li a {
width: 100%;
font-style-type: normal;
text-decoration: none;
line-height: 3rem;
display: block;
/**/
box-sizing: border-box;
padding-left: 4%;
border-top: thin solid #FFF;
border-bottom: thin solid #330;
}
footer section div:nth-child(2) ul li a:hover {
background-color: #FFF;
border-top: thin solid #663;
border-bottom: thin solid #FFF;
}
/** 子リンク **/
footer section div:nth-child(2) ul:first-child li ul {
width: 100%;
/*background-color: #060;*/
list-style-type: disc !important;
/*margin-left: 3px;
padding-left: 3px;*/
}
footer section div:nth-child(2) ul:first-child > li ul > li {
width: 100%;
color: #736357;
display: list-item;
}
footer section div:nth-child(2) ul:first-child > li ul > li a {
width: 100%;
background: rgba(60,30,10,0.1);
/*margin:0;
padding: 0;*/
position: relative;
}
footer section div:nth-child(2) ul:first-child > li ul > li a::before {
position: abusolute;
content: "●";
}
}
/*========================================================
iphone SE size
=========================================================*/
@media screen and (max-width: 340px) {
article {
/*border: 2px dashed #663;*/
}
}