/*
Theme Name: Stammy-corporate

*/

@charset "UTF-8";

/*余白の確認*/
/*  *{
outline: 2px red solid;
}  */
html {
font-size: 100%;
max-width: 100%;
width: 100% !important;/*position abusolutを使うと右側に余白ができるので予防する*/   
 	overflow-x: hidden !important;/*position abusolutを使うと右側に余白ができるので予防する*/ 
}
header {
height: 100px;
}

html, body {
margin: 0;
padding: 0;
}

body {
background-color: #ffeef8;
font-family: 'Hina Mincho', serif;
    font-weight: 400;
    font-style: normal;
line-height: 1.7;
color: #746b6b;
margin: 0;
-webkit-text-size-adjust: 100%;/*レスポンシブの時の文字の設定*/
overscroll-behavior-x: none; /*safariの右ズレ防止
-webkit-overflow-scrolling: touch; /* ← iOS対応の滑らかスクロール用 */
} 
/*webフォント*/
.hina-mincho-regular {
font-family: "Hina Mincho", serif;
font-weight: 400;
font-style: normal;
}


/**サファリ対策**/
@media not all and (min-resolution:.001dpcm) {
@supports (-webkit-appearance:none) {
.first-view {
    padding-top: 1000px; /* Safariだけズレを補正 */
}
}
}

/****ファーストビュー以外の要素に幅の制限をかける****/
.concept, .ser, .address, .snsSection, .footerFlex {
max-width: 1000px;
margin: 0 auto;
}
.big-bg { /*ロゴとmenuにfixdをかけるので、親divにfixdをかける*/
position: fixed;
z-index: 3000;
width: 100%;
/* 	margin-top: 20px; */
}
/* // 最新のsafari用 */
::-webkit-full-page-media, :future, :root .big-bg {
margin: 53px auto;
}
/* // 古いsafari用 */
@media screen and (-webkit-min-device-pixel-ratio:0) {
::i-block-chrome, .big-bg {
margin: 53px auto;
}
}


.page-header { /*親divにfixdをかけたので、子divに幅を設定する*/
max-width: 1400px;
margin: 0 auto;
}

.rogo {
transition: 1s;
position:fixed;
}
.rogo img{
width: 130%;
}
.rogo-s img {
width:123%;
}

.small-logo {
width: 120px;
transition: opacity 0.5s ease;
opacity: 0;
}



.full-logo {
position: fixed;
top: 50%;
left: 43%;
transform: translate(-50%, -50%) translateZ(0);
z-index: 999;
transition: opacity 0.5s ease, transform 0.5s ease;
backface-visibility: hidden;
}

.hide {
opacity: 0;
pointer-events: none;
transform: translate(-50%, -70%) translateZ(0);
}

/******* ハンバーガーボタンのスタイル *******/
.hamburger {
position: relative;
top: -134px;
right: 20px;
width: 38px;
cursor: pointer;
z-index: 20;
margin-left: 95%;
}
.hamburger p {
font-size: 1.8rem;
margin-top: -17px;
color: #b187b3;
}

.hamburger span {
display: block;
height: 4px;
width: 100%;
background-color: #b187b3;
margin: 5px 0 5px 7px;
transition: 0.4s;
}

/* バツ印に変化するスタイル */
.hamburger.active span:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px);
}

.hamburger.active span:nth-child(2) {
opacity: 0;
}

.hamburger.active span:nth-child(3) {
transform: rotate(-45deg) translate(6px, -6px);
}

/* メニューのスタイル */
.menu {
position: fixed;
top: -100%; /* 初期状態でメニューを画面の外に */
right: 0;
width: 50%;
height: 100%;
background-color: #f4dafa;
padding: 20px;
box-sizing: border-box;
z-index: 5;
transition: top 0.3s ease; /* スライドアニメーション */
opacity: 0.8;
backface-visibility: hidden;
}

/* メニューが表示される時 */
.menu.open {
top: 0; /* メニューが表示される位置 */
}
.menu-li {
margin-left: 13%;
font-size: 1.1rem;
}
.listyle {
margin-top: 12%;
}
/*====ここまで???======*/


a {
/*下線をなくす*/
    text-decoration: none;
}

.main-nav li {
margin: 36px;
}
.main-nav a {
color: #746858;
}
.main-nav a:hover{
color: #0bd
}

.home-content {
text-align: center;
height: 1285px;
background-repeat: no-repeat;
background-size: cover;
background-position: -35px;
width: 100%;
}  


/*******ファーストビュー*****/
.first-view {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
top: -98px;
}
.first-view img {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
object-fit: cover;
transform: translate(-50%, -50%) scale(1); /* ← 初期から100% */
animation: zoomIn 4s ease-out 0.5s forwards;
opacity: 0.7;
}

@keyframes scaleUp {
from {
transform: translate(-50%, -50%) scale(0.8) translateZ(0);
}
to {
transform: translate(-50%, -50%) scale(1) translateZ(0);
}
}
@keyframes zoomIn {
from {
transform: translate(-50%, -50%) scale(1) translateZ(0); /* 画面ジャストサイズ */
}
to {
transform: translate(-50%, -50%) scale(1.1) translateZ(0); /* 少しだけ拡大 */
}
}

/***終了***/




.home-content h1 {
font-size: 5rem;
}
.home-content p {
font-size: 3rem;
}
.midasi h2 {
font-size: 9rem;
}

.concept {
text-align: center;
width: 70%;
margin: 0 auto;
margin-top: 9%;
background-color: #fefefe;
border-radius: 30px;
box-shadow: 0px 0px 20px 20px #ffffff;
padding: 10px;
overflow: hidden;
}

.conts {
font-size: 7.5rem;
margin-top: -88px;
}
.conts h4 {
font-size: 1.7rem;
margin-top: -37px
}
.midorumidasi h4 {
font-size: 1.7rem;
margin-top: -26px;
}

.personal {
margin-top: 6%;
font-size: 1.5rem;
}
.personal h5 {
font-weight: bold;
}
.midorumidasi p {
font-size: 1.1rem;
width: 90%;
margin: 0 auto;

}

.midorumidasi-3 {
	display: none;
}
.businessTrip {
	display: none;
}
.detail {
margin: 0 auto;
}


.content {
display:flex;
flex-direction: row;
justify-content: space-between;
width: 85%;
margin: 0 auto;
padding-top: 90px;
}
.content-2 {
display:flex;
flex-direction: row-reverse;
justify-content: space-between;
width: 85%;
margin: 0 auto;
padding-top: 90px;
}
.con {
width: 50%;

}
.content img {
width: 41%;
}
.content-2 img {
width: 41%;
}
.content h5 {
font-size: 2rem;
}
.content p{
font-size: 1.1rem;
text-align: left;
}
.content-2 h5 {
font-size: 2rem;
}
.content-2 p{
font-size: 1.1rem;
text-align: left;
}
/**価格コンテンツ**/
.concept img {
width: 82%;
margin-top: 4%;

}
.conceptImgup {
margin-top: 3%;
}
.conceptImgdown {
transform: scale(1, -1) translateZ(0);
margin-bottom: 3%;
}
/*==================================================
地図のためのcss
===================================*/
.map {
	margin: 0 auto ;
	width: 80%;
	text-align: center;
    position: relative;
	z-index: 3500;
}
/****住所***/
.address {
	width: 98%;
	margin: 0 auto;
}
.address h4 {
	font-size: 7.5rem;
	margin-left: 3%;
}
.address2 {
	text-align: center;
	margin-top: 3%;
}
.postNo {
    font-size: 1.4rem;
}
.addressDetail {
	font-size: 1.7rem;
}
iframe {  /*地図サイズ*/
	width: 100%;
	height: 350px;
}

/******   SNS   *****/
.snsSection {
	padding: 3% 15%;
	margin-top: 13%;
}
.snsSection h4 {
	font-size: 3rem;
}
.sns {
	display: flex;
	justify-content: space-evenly;
}

.sns img {
	width: 78px;
	position: relative;
	z-index: 3500;
}



/*========= レイアウトのためのCSS ===============*/



a{
color: #904893;
}

a:hover,
a:active{
text-decoration: none;
}


/*******************お問い合わせ*************************/

.ser {
	margin-top: 5%;
	width: 70%;
    margin: 14% auto 10%;
	background-color: #fefefe;
    border-radius: 30px;
    box-shadow: 0px 0px 20px 20px #ffffff;
	text-align: center;
}

.ser img {
	width: 82%;
    margin-top: 4%;
}
.midasi-sav {
    text-align: center;
    font-size: 4rem;
    padding-top: 100px;
    text-shadow: 1px 0 5px rgb(248 244 244);
}

.contactLine {
	text-align: left;
    margin-left: 16%;
}
.contactLine p {
	font-size: 1.5rem;
}
.contactLine img {
	width: 78px;
	position: relative;
    z-index: 3500;
}

.contactForm {
	text-align: left;
    margin: 7% 0% 2% 16%;
}
.contactForm p {
	font-size: 1.5rem;
}
/*=================お問合せフォーム======================*/

/* --- お問い合わせフォーム --- */
/* デザインカスタマイズ */
div.wpcf7 p { 
    padding:20px 20px 0; 
    margin:0; 
	font-size: 1rem;
}
div.wpcf7 input, .wpcf7 textarea {
    border:1px solid #b495c3; 
    padding:8px; font-size:14px; 
	border-radius: 7px;
	width: 100%;
}
div.wpcf7 textarea { 
	width: 100%; 
    height:300px; 
}
div.wpcf7 input.wpcf7-submit {
   cursor:pointer; 
   color:#fff; 
   font-weight:bold; 
   font-size:14px; 
   width:200px; 
   height:45px; 
   margin:5% auto; 
   display:block;
   -moz-border-radius:5px; 
   -khtml-border-radius:5px; 
   -webkit-border-radius:5px; 
   border-radius:5px;
   background:#333; 
   box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.5), inset 0px 32px 0px -12px #808080; 
   border:1px solid #666;
}
div.wpcf7 input.wpcf7-submit:hover { 
    background:#006080; 
    box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.5), inset 0px 32px 0px -12px #007ea8; border:1px solid #006080; 
}
.wpcf7 input.wpcf7-submit:active { 
    box-shadow:none; 
    bottom:-2px; position:relative; 
}
.wpcf7 input:focus, .wpcf7 textarea:focus { 
    border:1px solid #009de1; 
}
.wpcf7-captchac { 
    border:1px solid #ccc; 
}
 
 
/* エラー個所をわかりやすく表示 */
.wpcf7 .wpcf7-not-valid { 
    background: #ffb6c1; 
}
.wpcf7 span.wpcf7-not-valid-tip {
    font-size: 80%;
}
.wpcf7 .wpcf7-response-output {
    margin: 10px 0 0; 
    padding: 8px 35px 8px 14px; 
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
    -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; 
}
.wpcf7 .wpcf7-validation-errors {
    color: #B94A48; 
    background-color: #F2DEDE; 
    border: 1px solid #EED3D7;
}
.wpcf7 .wpcf7-mail-sent-ok {
    color: #3A87AD; 
    background-color: #D9EDF7; 
    border: 1px solid #BCE8F1;
}
 
/* 必須赤色表示 */
.wpcf7 .required { 
    color: #f00;
}
/* 任意緑色表示 */
.wpcf7 .any{ 
    color: #080;
}
.contact {
    width: 80%;
    margin: 6% auto;
    text-align: left;
    font-size: 1.3rem;
}
#content-con {
    text-align: center;
    width: 70%;
    margin: 0 auto;
	text-align: left;
	position: relative;
    z-index: 3500;
}

.contactP {
	text-align: left;
    font-size: 0.9rem;
	width: 90%;
    margin: 0 auto;
}

/* 記事一覧 */

/* .kijiitirann img {
width: 100%;
max-height: 240px;
}

.kijiitirannblok {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 1fr;
grid-row-gap: 6px;
grid-column-gap: 6px;
padding: 0;
margin: 0;
list-style-type: none;
}

.kijiitirannblok li {
box-sizing: border-box;
margin: 10px;
}

.kijiitirann .kiji_category,
.kijiitirann h5,
.kijiitirann .excerpt p {   
margin: 0px 10px 0px 10px;
}

.kijiitirann .excerpt p {
font-size: 0.9em;
color: #777;
}

.kijiitirann a {
color: #333;
}

.excerpt {
position: relative;
height: 174px;
} */

/* .excerpt a {
color: rgb(180, 181, 245);
}

.btn-primary {
position: absolute;
bottom: 10px;
left: 10px;
}
 */
/* 記事一覧 end*/

/*****フッターまで来たらヘッダーを消す*****/
.hidden {
animation: fade .2s ease-in-out forwards;
pointer-events: none;
}

@keyframes fade {
from {
opacity: 1;
}

to {
opacity: 0;
}
}

.visible {
animation: fadeOut .2s ease-in-out forwards;
pointer-events:all;
}

@keyframes fadeOut {
from {
opacity: 0;
}

to {
opacity: 1;
}
}
/*=====================フッター====================*/


.footerFlex {
display: flex;
justify-content: center;
}

.footer-rogo img {
position: relative;
width: 125%;
position: relative;
top: 76px;
}
ul {
	list-style: none;
	font-size: 1.5rem;
	margin: 16% 0 0 16%;
	padding: 0;
	list-style: none;
	max-width: 21%;
	z-index: 3500;
}
.item-2 {
    padding-bottom: 15px;
}
.name {
    text-align: center;
    font-size: 1.3rem;
    padding-top: 100px;
}
.co {
	text-align: center;
	padding-top: 100px;
}

/*-------------------------------------------
カラム部分
-------------------------------------------*/
.main {
	padding: 20px;
}
.arc {
	display: flex;
	margin: 0 auto;
	width: 85%;
	padding-top: 100px;
}

.side {
	width: 40%;
	padding: 20px;
}
.author img {
	padding-bottom: 30px;
	width: 95%;
}


	
/*=============================モバイルmax-width1300px====================*/ 
@media screen and (max-width: 1300px){
ul {
	max-width: 47%;
}

}   

/*=============================モバイルmax-width1000px====================*/ 
@media screen and (max-width: 1000px){
    .main-nav {
    font-size: 1rem;
    left: 12%;
    top: -135px;
}
.full-logo {
	top: clamp(0px, 50%, 450px);
}
.home-content {
	height: 773px;	
}

.footer-fle {
    display: initial;
}

.footer-nav {
    margin: 0;
    position: relative;
    top: 110px;
    text-align: center;
    left: 0%;
}
.footer-rogo img {
    width: 90%;
    left: 25%;
    transform: translateX(-50%) translateZ(0);
}
.content img {
    width: 41%;
    height: 300px;
    padding-top: 63px;
}
.content-2 img {
    width: 41%;
    height: 300px;
    padding-top: 63px;
}
.bigpic-1 {
    background-position-y: -39px!important;
}


	
/* // 最新のsafari用 */
::-webkit-full-page-media, :future, :root .full-logo {
  top: clamp(0px, 50%, 390px);
  width: 33%;
  left: 46%;
}


.concept {
	margin-bottom: 20%;
}
}

	
/***横向きだけのデザイン：1000ps以下****/
@media screen and (max-width: 1000px) and (orientation: landscape) {
html:not(.safari) .full-logo {
    top: 53%;
	left: 50%;
}
html:not(.safari) .rogo img {
    width: 50%;
  }

.listyle {
  margin-top: -2%;
}
	ul {
		margin-top: clamp(0px, 50%, 28px);
	}
}
/* // 古いsafari用 846行と同じ設定*/
@media screen and (max-width: 1000px) and (-webkit-min-device-pixel-ratio: 0) {
	::i-block-chrome, .full-logo {
  top: 50%;
  width: 33%;
  left: 46%;
	}

}	
	
	
/*=============================モバイルmax-width900px====================*/ 
@media screen and (max-width: 900px){
.conts {
font-size: 3.5rem;
	margin-top: -50px;
}
.address h4 {
	font-size: 3.5rem;	
}
}



/*=============================モバイルmax-width740px====================*/ 
@media screen and (max-width: 740px){
.hamburger {
	margin-left: 87%;
}  
ul {
	max-width: 100%;
/* /	margin-top: 38%; */
}
.rogo img {
	width: 120%;
}

.concept {
    width: 80%;
    margin-bottom: 24%;
}

.midasi h2 {
font-size: 4rem;
}
.ser {
	width: 80%;
	margin-bottom: 15%;
}

	
.home-content h1 {
	font-size: 3rem;
}
.content {
	display: initial;
}

.content img {
	width: 90%;
	padding-top: 100px;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
}
.content-2 {
	display: initial;
}
.content-2 img {
	width: 90%;
	padding-top: 100px;
	position: relative;
	left: 50%;
	transform: translateX(-50%) translateZ(0);
}
.con {
	padding: 0;
	width: 90%;
}
.kijiitirannblok {
display: initial;
}
    
.blog-detail__body img {
width: 91% !important
}
.footer-rogo img {
width: 79%;
left: 37%;
}


/*=====================事業内容ページ==================*/
.arc {
display: initial;
}
.service img {
width: 100%!important;
}
.side {
width: 95%;
padding: 13px;
margin: 0 auto;
}
/*======================新着情報========================*/
.midasi-sav {
padding-top: 0!important;
}

/*=====================会社概要======================*/
.gaiyou img {
width: 95%;
}

/*===================投稿記事=======================*/
.kiji {
display: block !important;
}
.kijinaiyo {
width: 100% !important;
padding-right: 0% !important;
}
.side-2 {
width: 100% !important; 
padding-top: 70px;
}
}

/***横向きだけのデザイン：740ps以下****/
@media screen and (max-width: 740px) and (orientation: landscape) {
html:not(.safari) .rogo img {
    width: 50%;
  }

	
/* // 最新のsafari用 */
::-webkit-full-page-media, :future, :root ul {
    margin-top: -7%;
}
::-webkit-full-page-media, :future, :root .listyle {
    margin-top: 1%;
}

}
/*// 古いsafari用 */
@media screen and (max-width: 740px) and (-webkit-min-device-pixel-ratio: 0) {
::i-block-chrome, .listyle {
    margin-top: 1%;
}
	
::i-block-chrome, ul {
    margin-top: -7%;
}
}

/*=============================モバイルmax-width600px====================*/ 
@media screen and (max-width: 600px){
/* // Chrome・edge用 javascript併用*/
html.chrome-or-edge:not(.safari) .footer-nav {
     left: -14%;
}
}
/*=============================モバイルmax-width480px====================*/ 
/*// 古いsafari用 */
@media screen and (max-width: 480px) and (-webkit-min-device-pixel-ratio: 0) {
	::i-block-chrome, .full-logo {
 	width: 58%;
	left: 43%;
	}
	::i-block-chrome, .rogo img {
  margin: 0% 0 12%;
	}
}
@media screen and (max-width: 480px){

	
/* // 最新のsafari用 */
::-webkit-full-page-media, :future, :root .full-logo {
 	width: 58%;
	left: 43%;
}
	
/* // 最新のsafari用 */
::-webkit-full-page-media, :future, :root .rogo img {
  margin: 0% 0 12%;
}
	

html.chrome-or-edge:not(.safari) .page-header {
  margin-top: 22% !important;
}
	
html.chrome-or-edge:not(.safari) .rogo img {
	margin: 12% 0 112%;
}
	

.rogo-s img {
	width: 63%;
	position: relative;
	top: -50px;
}
.midorumidasi-2 span {
	display: none;
}
.midorumidasi-3 {
	display: block;
	font-size: 0.9rem!important;
}	
.businessTrip {
	display: block;
}
.midorumidasi-bt2 {
	font-size: 0.9rem!important;
}
.detail {
    text-align: left;
}
#content-con {
    width: 96%;
}
.hamburger {
    right: 1px;
    width: 28px;
}
.hamburger span {
    display: block;
    height: 3px;
}
.hamburger p {
    font-size: 1.3rem;
}
.concept {
    margin-bottom: 29%;
}
.midorumidasi h4 {
	font-size: 1.3rem;
}
.contactLine {
    margin-left: 4%;
}
.contactLine p {
    font-size: 1.2rem;
}
.contactForm {
    margin-left: 4%;
}
.contactForm p {
    font-size: 1.2rem;
}
.contact_item {
    margin-bottom: 1.6rem;
}
div.wpcf7 p {
    padding: 0;
}
.addressDetail {
    font-size: 1.2rem;
}
.contact {
    font-size: 1.1rem;
	width: 100%;
}
.label {
    font-size: 1.5rem;
    margin-bottom: .4rem;
}
.label_tag {
    font-size: 1.1rem;
}
input[type="text"],input[type="email"] {
    padding: .4rem;
    font-size: 1.5rem;
}
textarea {
    padding: .4rem;
    font-size: 1.5rem;
}
input[type="submit"]{
    font-size: 1.5rem;
}
	
.sns img {
    width: 59px;
}
.contactLine img {
	width: 59px;
}
.footer-nav {
    left: -8%;
}
}

/*=============================モバイルmax-width380px====================*/ 
@media screen and (max-width: 380px){
.rogo img {
margin: -262% 0 112%;
}
.concept {
    margin-bottom: 36%;
}
.contact p {
	font-size: 1rem;
}
}