/* レスポンシブ対応のためのcss */
/* 
	このcssを適用するhtmlに必ず
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	を記述する 
*/


/* スマホ～タブレット共通 */
@media screen and (max-width:1024px) {
	.flow_content {
		display: block;
	}

	.flow_content > div {
		width: auto;
	}

	.idea_content {
		display: block;
	}

	.idea_content > div {
		width: auto;
	}

	.idea_text {
		padding: unset;
	}

	/* ハンバーガー cssのみで実装パターン*/
	.hamburger-menu {
		display: block;
	}

	.menu-btn div {
		position: absolute;
		width: 25px;
		height: 30px;
		top: -10px;
	}
	.menu-btn span {
		content: '';
		display: block;
		height: 3px;
		width: 25px;
		border-radius: 3px;
		background-color: #fff;
		position: absolute;
		top: 10px;
		transition-duration: 0.6s;
	}
	.menu-btn span:before,
	.menu-btn span:after {
		content: '';
		display: block;
		height: 3px;
		width: 25px;
		border-radius: 3px;
		background-color: #fff;
		position: absolute;
		transition-duration: 0.6s;
	}
	.menu-btn span:before {
		bottom: 8px;
	}
	.menu-btn span:after {
		top: 8px;
	}

	#menu-btn-check:checked ~ .menu-btn span {
		background-color: rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/
		transition-duration: 0.6s;
	}
	#menu-btn-check:checked ~ .menu-btn span::before {
		top: -10px;
		transform: translateY(12px) rotate(45deg);
		transition-duration: 0.6s;
	}
	#menu-btn-check:checked ~ .menu-btn span::after {
		top: -10px;
		transition-duration: 0.6s;
		transform: translateY(12px) rotate(-45deg);
	}

	#menu-btn-check:checked ~ .menu-content {
		top: 0;/*メニューを画面内へ*/
	}

	.open_menu {
		display: block;
	}
	
	.menu-nav-index {
		display: block;
	}

	#nav {
		display: unset;
	}

	#nav > li > a:hover {
		text-decoration:none;
		color:#fff;
	}

	.menu-content ul li {
		border-bottom: solid 1px #dc4a4d;
		list-style: none;
	}

	.menu_contents > ul {
		padding: unset;
	}

	.menu_contents li:not(:first-child) {
		border-top: unset;
	}
	
	.menu-content > nav > ul > li > a {
		display: block;
		padding: 20px 10px;
		position: relative;
	}
	.menu-content {
		width: 100%;
		height: 100%;
		position: fixed;
		top: -100%;
		left: 0;/*leftの値を変更してメニューを画面外へ*/
		z-index: 80;
		background-color: #3a3a3a;
		background-color: #2a3849;
		transition: all 0.5s;/*アニメーション設定*/
		overflow: scroll;
	}

	.menu-content > nav {
		margin-top: 60px;
	}

	/* SERVICE・ABOUTの中のメニュー */
	.menu_contents {
		position: unset;
		padding: unset;
	}
	.menu_contents li {
		padding: 20px 10px;
	}

	/* フッター */
	.fwrapper {
		height: auto;
	}

	.footer {
		height: auto;
		display: block;
		padding: 5px 10px 5px 10px;
	}

	.footer_content {
		flex-flow: column-reverse;
		margin-bottom: unset;
	}

	.footer_block {
		margin: 0 0 20px 0;
	}

	.footer_nav {
		text-align: unset;
	}

	.footer_nav ul {
		display: unset;
		padding: unset;
	}

	.footer_nav > ul {
		background: unset;
		padding: unset;
	}

	.footer_nav a {
		margin: 0 10px;
	}

	.footer_nav li:not(:last-child) {
		border-right: unset;
	}

	.footer_nav > ul > li{
		width: auto;
		padding-inline-start: 0;
		display: list-item;
		padding: 20px 0;
		border-bottom: 1px solid #cf484c;
	}

	.footer_sub_nav {
		background-color: #b30000;
		background-color: #a10000;
	    margin: 20px 0 0 0;
	}

	.footer_sub_nav > ul > li:not(:first-child) {
		border-bottom: 1px solid #cf484c;
	}

	.footer_sub_nav > ul > li{
		border-top: 1px solid #cf484c;
		padding: 20px 0;
	}

	.footer_sub_nav > ul > li > a{
		padding-inline-start: 20px;
	}

	.footer_text {
		font-size: 12px;
	}

	.footer_image {
		width: 100%;
	}

	.footer_title {
		font-size: 15px;
	}

	.footer_contact {
		margin: 15px 0 30px 0;
	}
}


/* スマホ */
@media screen and (max-width:600px) {
	.wrap {
		margin: 0 10px 10px 10px;
		padding-top: 60px;
	}

	.logo {
		width: 60px;
		margin: 0 5px;
	}

	.menu-btn {
		position: absolute;
		top: 45%;
		left: 86%;
		z-index: 90;
	}

	/* ヘッダー */
	.header {
		display: block;	
	}

	.header_title {
		font-size: 10px;
	}

	.menu-content ul li.single a::before {
		content: "";
		width: 7px;
		height: 7px;
		border-top: solid 2px #dc4a4d;
		border-right: solid 2px #dc4a4d;
		transform: rotate(45deg);
		position: absolute;
		left: 90%;
		top: 27px;
	}

	#nav > li.multi > a::before {
		content: "";
		border-top: solid 2px #fff;
		border-right: solid 2px #fff;
		transform: rotate(135deg);
		width: 7px;
		height: 7px;
		position: absolute;
		left: 90%;
		top: 27px;
		transition-duration: 0.5s;
	}

	#nav > li.multi.down > a::before {
		content: "";
		border-top: solid 2px #fff;
		border-right: solid 2px #fff;
		transform: rotate(-45deg);
		width: 7px;
		height: 7px;
		position: absolute;
		left: 90%;
		top: 27px;
		transition-duration: 0.5s;
	}

	.menu_contents li a {
		color: #fff;
		font-size: 15px;
		font-weight: bold;
		text-decoration: none;
		padding: 20px 0 20px 20px;
	}

	.container {
		width: auto;
	}

	.summary_image {
		height: 300px;
	}

	.description {
		left: 0;
		right: 0;
		margin: unset;
		font-size: 3vw;
	}

	/* 事業内容 */
	.content {
		flex-flow: column;
		margin: 20px 0;
	}

	.content_r {
		flex-flow: column;
		margin: 20px 0;
	}

	.contents_box {
		overflow-x: hidden;
	}

	.content_title {
		font-size: 7vw;
	}

	.content_text {
		position: unset;
		top: unset;
		left: unset;
		width: auto;
	}

	.content_text_r {
		position: unset;
		top: unset;
		left: unset;
		width: auto;		
	}

	.content_image {
		height: 200px;
		width: auto;
		object-fit: cover;
		box-shadow: 0px 5px 2px 1px rgb(0 0 0 / 30%);
	}

    /* トップページコンテンツ */
    .section {
		display: block;
        margin: 75px 0;
    }
    .section img {
        box-shadow: none;
    }

    .section_content {
        top: -25px;
        left: 0;
		width: 100%;
		height: 80%;
		padding: 25px 0;
    }

    .section_content_r {
        top: -25px;
        right: 0;
		width: 100%;
		height: 80%;
		padding: 25px 0;
    }

    .section_block {
        width: auto;
    }

	.section_description {
		padding: 0 20px;
		font-size: 5vw;
	}

	.section_button {
		margin: 30px 0 0 0;
		text-align: center;
	}

	.flow_box {
		font-size: inherit;
	}

	/* 新コンテンツ */
	.section_item {
		flex-flow: column-reverse;
		margin: 20px;
	}

	.section_item:nth-child(2) {
		flex-flow: column;
	}

	.section_item > div {
		width: auto;
	}

	.section_image > img {
		height: 200px;
	}

	.section_title2 {
		font-size: 4vw;
		padding: 0 10px;
	}

	.section_description2 {
		font-size: 3vw;
		margin: unset;
		padding: 0 10px;
	}
	
	.section_block2 {
		padding: 30px 30px 0 30px;
	}

}

/* タブレット */
@media only screen and (min-width: 600px) and (max-width: 1024px) {
	.description {
		right: 0;
		top: 10%;
		margin: unset;
	}

	.menu-btn {
		position: absolute;
		top: 45%;
		left: 93%;
		z-index: 90;
	}

	.menu-content ul li.single a::before {
		content: "";
		width: 7px;
		height: 7px;
		border-top: solid 2px #dc4a4d;
		border-right: solid 2px #dc4a4d;
		transform: rotate(45deg);
		position: absolute;
		left: 90%;
		top: 20px;
	}

	#nav > li.multi > a::before {
		content: "";
		border-top: solid 2px #fff;
		border-right: solid 2px #fff;
		transform: rotate(135deg);
		width: 7px;
		height: 7px;
		position: absolute;
		left: 90%;
		top: 20px;
		transition-duration: 0.5s;
	}

	#nav > li.multi.down > a::before {
		content: "";
		border-top: solid 2px #fff;
		border-right: solid 2px #fff;
		transform: rotate(-45deg);
		width: 7px;
		height: 7px;
		position: absolute;
		left: 90%;
		top: 20px;
		transition-duration: 0.5s;
	}

	.menu-navs {
		margin-top: 90px;
	}

	#nav > li > a {
		padding: 10px;
		margin: 8px 0;
		border-bottom: none;
	}

	#nav li a:hover {
		border-bottom: none;
		color: #fff;
	}

}

@media screen and (min-width: 600px) and (max-width: 767px) {

	.content {
		flex-flow: column;
		margin: 20px 0;
	}

	.content_r {
		flex-flow: column;
		margin: 20px 0;
	}

	.contents_box {
		overflow-x: hidden;
	}

	.content_text {
		position: unset;
		top: unset;
		left: unset;
		width: auto;
	}

	.content_text_r {
		position: unset;
		top: unset;
		left: unset;
		width: auto;		
	}

	.content_image {
		height: 400px;
		width: auto;
		object-fit: cover;
		box-shadow: 0px 5px 2px 1px rgb(0 0 0 / 30%);
	}

}