@charset "utf-8";
/* CSS Document */
/*------------------------

	スマホ用レイアウト
  769pxまでPC、768px以下はSP

------------------------*/

@media screen and (max-width:768px){
	body{
		font-size: 1.6rem;
		font-weight: 400;
		margin: 0 auto;
		width: 100%;
		overflow-x: hidden;
		box-sizing: border-box;
	}
	img{
		max-width: 100%;
	}
	.pc{
		display: none;
	}
	.sp{
		display: block;
	}
	main {
		width: 100%;
		margin: 0 auto;
		padding: 0;
	}
	.inner{
		width: 100%;
		padding-left: 0;
		padding-right: 0;
	}
	section {
		padding-right: 0;
		padding-left: 0;
	}
	.pa-left-right50{
		padding-left: 20px;
		padding-right: 20px;
	}
	/*header
	------------------------*/
	/*-----------------------------
	
	　　　スマホ用メニュー
	
	------------------------------*/
	
	.logo {
		text-align: center;
		width: 87px;
		margin-top: 25px;
	}
	.logo.sp {
		margin-top: 0;
		margin-left: 20px;
	}
	/*===========================================================*/
/* 5-1-12 クリックしたらナビが下から上に出現 */
/*===========================================================*/
#g-nav{
    /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
    position:fixed;
    z-index: 999;
    /*ナビのスタート位置と形状*/
	bottom:-120%;
	width:100%;
    height: 100vh;/*ナビの高さ*/
	background:#26a6d1;
    /*動き*/
	transition: all 0.6s;
}

/*アクティブクラスがついたら位置を0に*/
#g-nav.panelactive{
    bottom: 0;
}

/*ナビゲーションの縦スクロール*/
#g-nav #g-nav-list{
    /*ナビの数が増えた場合縦スクロール*/
    position: fixed;
    z-index: 999; 
    width: 100%;
    height: 100vh;/*表示する高さ*/
    overflow: auto;
    -webkit-overflow-scrolling: touch;
	font-size: 1.8rem;
}

/*ナビゲーション*/
#g-nav ul {
    /*ナビゲーション天地中央揃え*/
    position: absolute;
    z-index: 999;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
}

/*リストのレイアウト設定*/

#g-nav li{
	list-style: none;
    text-align: center; 
}

#g-nav li a{
	color: #fff;
	text-decoration: none;
	padding:10px;
	display: block;
	letter-spacing: 0.1em;
}

/*===========================================================*/
/* 5-2-5	MENUが×に */
/*===========================================================*/

.openbtn{
	position:fixed;
    z-index: 9999;/*ボタンを最前面に*/
	top:0;
	right: 0;
	cursor: pointer;
    width: 80px;
    height:70px;
    border-left:2px solid #fff;
}
	
/*ボタン内側*/
.openbtn span{
    display: inline-block;
    transition: all .4s;/*アニメーションの設定*/
    position: absolute;
  }

.openbtn span:nth-of-type(1),
.openbtn span:nth-of-type(3) {
    height: 2px;
	background: #fff;
  	width:30%;
    opacity: 0;
    top:22px;
    left:20px;
 }

.openbtn span:nth-of-type(2) {
	top: 29px;
    left: 20px;
	text-transform: uppercase;
	color: #333;
    font-size: 0.9rem;
	font-weight: bold;
}

@media screen and (max-width:550px) {
.openbtn span:nth-of-type(2) {
    font-size: 0.8rem;
    }
    
}

.openbtn span:nth-of-type(3) {
    top:35px;
}


/*activeクラスが付与されると線が回転して×になり、Menu表記をしている2つ目の要素が透過して消える*/

.openbtn.active span:nth-of-type(1),
.openbtn.active span:nth-of-type(3) {
    opacity:1;
}

.openbtn.active span:nth-of-type(1) {
    top: 30px;
    left: 26px;
    transform: translateY(6px) rotate(-45deg);
}

.openbtn.active span:nth-of-type(2) {
	opacity:0;
}

.openbtn.active span:nth-of-type(3){
    top: 42px;
    left: 26px;
    transform: translateY(-6px) rotate(45deg);
}

	/*---------------------
	
		header
	
	---------------------*/
	header{
		height: 70px;
		background: #fff;
	}
	.header-under{
		background: #e1f4ff;
	}
	h1{
		width: 118px;
		top:10px;
	}
	h1 img{
		width: 40px;
		margin-bottom: 0;
	}
	h1 p{
		font-size: 1.2rem;
	}
	/*---------------------
	
		main-visual
	
	---------------------*/
	.main-visual {
		display: inherit;
		padding-left: 0;
		padding-right: 0;
		position: relative;
		margin-top: 0;
    	z-index: -1;
		
	}
	
	.main-visual-right {
		width: 100%;
		padding-right: 0;
	}
	
	.main-visual-left {
		width: auto;
    	display: inherit;
		position: absolute;
		top: 45%;
		transform: translateY(-45%);
	}
	.main-visual-box-1 p{
		background-color: #333;
		color: #fff;
		padding: 0 10px;
		margin-bottom: 10px;
	}
	.main-visual-box-1 p:last-of-type{
		display: inline-block;
	}
	.main-visual-box-2  {
		background-color: #333;
		color: #fff;
		padding: 3px 10px;
		margin-bottom: 0;
		font-size: 1rem;
	}
	.header-left{
		width: 100%;
		height: 80px;
		position: absolute;
		bottom: 0;
	}
	.scrolldown:before {
    	background: #fff;
	}
	.scrolldown:after {
    	background: #fff;
	}
	.scrolldown span {
    	color: #fff;
	}
	.scrolldown {
		top:50%;
		left: 50%;
		transform: translate(-50%, -50%);
		animation: arrowmove 1s ease-in-out infinite;
	}
	/*---Topへ戻るボタン位置------*/
	.pagetop a {
		right: 10px;
		bottom: 60px;
	}
	/*--------------------
	
		top-about
	
	---------------------*/
	.top-about {
		padding-top: 50px;
		margin-top: 0;
		padding-bottom: 60px;
	}
	.top-about-box {
    max-width: 100%;
		display: inherit;
		text-align: center;
	}
	.top-about-left {
		width: 100%;
		margin-right: 0;
		margin-bottom: 30px;
	}
	.main-visual-box-1 {
		font-size: 1.6rem;
	}
	.top-about-left p {
    	font-size: 2.4rem;
		display: inline-block;
		top: 70px;
    	left: 50%;
		transform: translateX(-50%);
		white-space: nowrap;
	}
	.top-about-left img {
		width: 100px;
	}
	.top-about-right {
    width: 100%;
		text-align: justify;
		line-height: 2;
	}
	.main-visual-box span {
		display: none;
	}
	/*--------------------
	
		top-service
	
	--------------------*/
	.top-works {
		padding-top: 50px;
		padding-bottom: 60px;
	}
	.top-service {
		padding-top: 50px;
		padding-bottom: 60px;
	}
	.section-title {
		margin-bottom: 30px;
	}
	.top-service-list {
		display: inherit;
		margin-bottom: 0;
	}
	.top-service-item {
		margin-right: 0;
		width: 100%;
		margin-bottom: 30px;
	}
	
	.delay-time05 {
		animation-delay: 0s;
	}
	.delay-time1 {
		animation-delay: 0s;
	}
	/*--------------------
	
		top-works
	
	--------------------*/
	.top-works-list {
    	/*display: inherit;*/
	}
	.top-works-item{
		margin-right: 20px;
		width: calc(50% - 20px / 2);
		margin-bottom: 30px;
	}
	.top-works-item:nth-child(2n){
		margin-right: 0;
	}
	
	/*最後の行のmargin-bottomを0にする*/
	
	.top-works-item:nth-child(4n+3):nth-last-child(-n+2),/* ４列リストの左から3つ目ある要素 */
	.top-works-item:nth-child(4n+4):nth-last-child(-n+1)/* ４列リストの左から4つ目にある要素 */{
		margin-bottom: 0px;
	}
	.top-works-item:nth-child(4n+1):nth-last-child(-n+4),/* ４列リストの左から1つ目にある要素 */
	.top-works-item:nth-child(4n+2):nth-last-child(-n+3)/* ４列リストの左から2つ目にある要素 */{
		margin-bottom: 30px;
	}
	.top-works-title{
		font-size: 1.4rem;
	}
	/*--------------------
	
		footer
	
	--------------------*/
	.top-contact {
		padding-top: 50px;
	}
	.top-contact a{
		margin-bottom: 35px;
		padding-top: 25px;
    	padding-bottom: 25px;
		font-size: 1.6rem;
	}
	.footer-logo{
		margin-bottom: 35px;
	}
	.copyright {
    	position: inherit;
		width: 100%;
    	height: auto;
		writing-mode: inherit;
	}
	.site-map-box {
    	padding: 20px;
		display: flex;
    	flex-wrap: wrap;
	}
	.site-map span {
		margin-right: 30px;
		width: calc(25% - 90px / 4);
	}
	.site-map span:nth-child(4n) {
		margin-right: 0;
	}
	/*----------------------
		
		about.html
	
	-----------------------*/
	.page-visual {
		padding-left: 20px;
		padding-right: 20px;
		position: relative;
		margin-bottom: 0;
	}
	.pankuzu-background{
		width: 45%;
	}
	.pankuzu{
		height: 50%;
		width: 100%;
		padding-top: 20px;
	}
	.pankuzu ol {
    	padding-left: 25px;
		white-space: nowrap;
	}
	.about-inner {
		padding: 0 20px;
	}
	.about{
		padding-top: 50px;
		padding-bottom: 60px;
	}
	.office dt {
    	width: 40%;
	}
	.office dd {
    width: 60%;
	}
	.office-title p {
    	font-size: 2.1rem;
	}
	.office-title {
		margin-bottom: 15px;
	}
	.page-title{
		padding-top: 20px;
		padding-bottom: 20px;
	}
	
	/*----------------------
	
		service.html
	
	-----------------------*/
	.service-1, .service-2, .service-3, .service-4 {
		padding-bottom: 50px;
	}
	.price-list {
		display: inherit;
	}
	.price-item {
		margin-right: 0;
		width: 100%;
	}
	.price-item:nth-child(3){
		margin-bottom: 40px;
	}
	.service-5{
		padding-top: 50px;
    	padding-bottom: 60px;
	}
	.service-title p {
		font-size: 1.8rem;
	}
	.flow-item {
		margin-bottom: 10px;
	}
	/*----------------------
	
		works.html
	
	-----------------------*/
	.works {
		margin-top: 0;
		padding-bottom: 60px;
	}
	.category-list {
		justify-content: left;
    	white-space: nowrap;
		overflow-x:scroll
	}
	/*----------------------
	
		contact.html
	
	-----------------------*/
	/* コンタクトフォーム
	-----------------------*/
	.contact-lead p {
		font-size: 1.8rem;
	}
	/* iOSでのデフォルトスタイルをリセット */
	input[type="submit"],
	input[type="button"] {
	  border-radius: 0;
	  -webkit-box-sizing: content-box;
	  -webkit-appearance: button;
	  -moz-appearance: button;
	       appearance: button;
	  border: none;
	  -webkit-box-sizing: border-box;
	          box-sizing: border-box;
	  cursor: pointer;
	}
	input[type="submit"]::-webkit-search-decoration,
	input[type="button"]::-webkit-search-decoration {
	  display: none;
	}
	input[type="submit"]::focus,
	input[type="button"]::focus {
	  outline-offset: -2px;
	}
	.form-footer {
		margin-left: 0;
		padding: 30px 0;
		text-align: center;
	}
	.form-item {
		display: inherit;
		margin-bottom: 20px;
	}
	.form-parts {
		line-height: 1;
		margin-bottom: 20px;
	}
	.contact-lead1 {
		font-size: 1.6rem;
		margin-bottom: 40px;
	}
	#contact .section-inner-r:before{
		width: 0;
	}
	form p {
    	text-align: center;
	}
	#contact .section-inner-r{
		padding-bottom: 0;
	}
	/*---------------------------/

		archive.php
		index.php
		search.php
		single.php
		ブログ一覧

	/---------------------------*/
	.blog-container {
		display: inherit;
	}
	.blog-archive {
		width: 100%;
		padding-right: 0;
	}
	.blog-list {
    	display: inherit;
	}
	.blog-item{
		width: 100%;
		margin-right: 0;
	}
	.blog-sidebar {
		width: 100%;
		padding-bottom: 30px;
	}
	.single-pagination {
		display: inherit;
	}
	.single-pagination li {
		margin-bottom: 10px;
	}
	/*-----------------------
	
		single-works.php
	
	------------------------*/
	.works-container {
		display: inherit;
	}
	.works-content {
		width: 100%;
		margin-right: 0;
		margin-bottom: 30px;
	}
	.works-data {
		width: 100%;
	}
	.works-data dl{
		font-size: 1.4rem;
	}
	/*ブログの右側*/
	.blog-right {
		width: 100%;
		padding-top: 0;
	}
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
}