/*
Theme Name:nodaroof-theme
Template:twentytwenty
Author:saori
Description:ノダルーフ様用のテーマです.
Text Domain:twentytwenty
*/
@import url('../twentytwenty/style.css');


/* ■■■■■ ここから共通設定 ■■■■■ */
* {
  font-feature-settings: "palt";
  letter-spacing:0.12em;
  font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
}

/* bodyの初期設定の左右のマージンを消す */
body.template-full-width .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide) {
	width:100%;
}

/* コンテンツの下部のマージンを消す */
.entry-content > * {
	margin-bottom:auto;
}

/* スマホメニューなどの区切り線全般の色変更 */
.header-footer-group pre, .header-footer-group fieldset, .header-footer-group input, .header-footer-group textarea, .header-footer-group table, .header-footer-group table *, .footer-nav-widgets-wrapper, #site-footer, .menu-modal nav *, .footer-widgets-outer-wrapper, .footer-top {
	border-color:#dcdcdc !important;
}


/* 各種PCかSPスライドの表示非表示 */
.pc-slider {
	width:100%;
	display:block;
}

.sp-slider {
	display:none;
}

/* 画面サイズが750以下の場合ここから */
@media screen and (max-width: 750px) {
.pc-slider {
	display:none;
}

.sp-slider {
	width:100%;
	display:block;
}
}
/* 画面サイズが750以下の場合ここまで */


/* アンカーリンクずれ補正 */
.anchor-height {
	margin-top:-80px;
	padding-top:80px;
	box-sizing:border-box;
}


/* 各ページタイトル部分 */
.page-main-title {
	font-size:30px;
	width:90%;
	margin:auto;
	text-align:center;
	font-weight: bold;
}
/* 画面サイズが750以下の場合ここから */
@media screen and (max-width: 750px) {
.page-main-title {
	font-size:25px;
}
}
/* 画面サイズが750以下の場合ここまで */



/* 最初センターで後に左揃え文用 */
.textbox-c-l {
	width:90%;
	font-size:16px;
	text-align:center;
	line-height: 30px;
	letter-spacing:0.15em;
	margin:auto;
}
/* 画面サイズが750以下の場合ここから */
@media screen and (max-width: 750px) {
.textbox-c-l {
	text-align: justify;/*文字の均等配置*/
	text-justify: inter-ideograph;/*文字の均等配置IE*/
}
}
/* 画面サイズが750以下の場合ここまで */


/* 汎用画像box最大横2枚 */
.imgbox-maxyoko2 {
	width:100%;
	text-align:center;
}
.imgbox-maxyoko2 img {
	width:49%;
	padding:20px 10px;
	box-sizing:border-box;
	display: inline-block;
	vertical-align: top;
}
/* 画面サイズが1200以下の場合ここから */
@media screen and (max-width: 1200px) {
.imgbox-maxyoko2 {
	width:90% !important;
	margin:auto;
}
}
/* 画面サイズが1200以下の場合ここまで */
/* 画面サイズが550以下の場合ここから */
@media screen and (max-width: 550px) {
.imgbox-maxyoko2 img {
	width:100%;
	padding:20px 0px;
}
}
/* 画面サイズが550以下の場合ここまで */


/* 汎用線 */
.hanyou-border {
	width:100%;
	border-top:1px solid #dcdcdc;
	margin:auto;
}
/* 画面サイズが1200以下の場合ここから */
@media screen and (max-width: 1200px) {
.hanyou-border {
	width:90% !important;
}
}
/* 画面サイズが1200以下の場合ここまで */


.font-big {
	font-size:27px;
}
/* 画面サイズが750以下の場合ここから */
@media screen and (max-width: 750px) {
.font-big {
	font-size:23px;
}
}
/* 画面サイズが750以下の場合ここまで */

.font-small {
	font-size:14px;
}

.small-lineheight {
	display:inline-block;
	line-height: 25px;
}


.blue {
	color:#0DB7D6;
}

.green {
	color:#A9CD36;
}

.space10 {
	width:100%;
	display:inline-block;
	padding-bottom:10px;
}

.space20 {
	width:100%;
	display:inline-block;
	padding-bottom:20px;
}

.space30 {
	width:100%;
	display:inline-block;
	padding-bottom:30px;
}

.space40 {
	width:100%;
	display:inline-block;
	padding-bottom:40px;
}

.space50 {
	width:100%;
	display:inline-block;
	padding-bottom:50px;
}

.space60 {
	width:100%;
	display:inline-block;
	padding-bottom:60px;
}

.space70 {
	width:100%;
	display:inline-block;
	padding-bottom:70px;
}

.space80 {
	width:100%;
	display:inline-block;
	padding-bottom:80px;
}

.space90 {
	width:100%;
	display:inline-block;
	padding-bottom:90px;
}

.space100 {
	width:100%;
	display:inline-block;
	padding-bottom:100px;
}


/* ■■■■■ ここまで共通設定 ■■■■■ */



/* ■■■■■ ここからヘッダー ■■■■■ */
/* スマホ版メニューの「メニュー」文字位置調整 */
.toggle-inner .toggle-text {
	top:calc(100% + 0.2rem);
}

/* ヘッダーをfixしたので本文コンテンツの高さ調節 */
/* 画面サイズが100以上の場合ここから */
@media screen and (min-width: 100px) {
.header-inner {
	padding:20px 0px;
}

.entry-content {
	margin-top:75px;
}
}
/* 画面サイズが100以上の場合ここまで */

/* 画面サイズが700以上の場合ここから */
@media screen and (min-width: 700px) {
.header-inner {
	padding:20px 0px;
}

.entry-content {
	margin-top:75px;
}
}
/* 画面サイズが700以上の場合ここまで */

/* 画面サイズが780以上の場合ここから */
@media screen and (min-width: 780px) {
.header-inner {
	padding:20px 0px;
}

.entry-content {
	margin-top:75px;
}
}
/* 画面サイズが780以上の場合ここまで */

/* 画面サイズが1000以上の場合ここから */
@media screen and (min-width: 1000px) {
.header-inner {
	padding:20px 0px;
}

.entry-content {
	margin-top:75px;
}
}
/* 画面サイズが1000以上の場合ここまで */


header#site-header {
	width:100%;
	position:fixed;
	top:0px;
	z-index:100;
	background-color:rgba(255,255,255,0.8);
}

/* スマホメニューの選択肢を一番手前にする */
.menu-modal {
	z-index:101;
}

/* PCメニュードロップダウンの矢印色変更 */
body:not(.overlay-header) .primary-menu > li > .icon {
	color:#0DB7D6 !important;
}

/* PCメニュー子ドロップダウンの矢印色変更 */
body:not(.overlay-header) .primary-menu > li li .icon {
	color:#0DB7D6 !important;
}

/* PCメニュー子カテゴリの色変更 */
.primary-menu ul {
	background-color:#DFF2FC !important;
}

/* PCメニュー子カテゴリの吹き出しの三角の色変更 */
body:not(.overlay-header) .primary-menu > li > ul:after {
	border-bottom-color:#DFF2FC !important;
}

/* PCメニュー孫カテゴリの吹き出しの三角の色変更 */
body:not(.overlay-header) .primary-menu ul ul:after {
	border-left-color:#DFF2FC !important;
}

/* PCメニュー子カテゴリの下線を消す */
.primary-menu .current_page_ancestor {
	text-decoration: none !important;
}

/* メニューアイコンの文字の下線を消す */
.toggle {
	text-decoration: none !important;
}

.toggle:hover {
	opacity: 0.6;
  	filter: alpha(opacity=60);
  	-ms-filter: "alpha(opacity=60)";
}

.toggle-text {
	text-decoration: none !important;
}

.header-navigation-wrapper a {
	color:#000 !important;
	text-decoration: none !important;
}

.header-navigation-wrapper a:hover {
	color:#0DB7D6 !important;
}

.primary-menu > li {
	margin:0.8rem 0 0 3rem;
}

/* スマホメニューの選択肢のデザイン変更 */
.modal-menu > li > a, .modal-menu > li > .ancestor-wrapper > a {
	text-decoration: none !important;
	color:#000 !important;
	letter-spacing:0.12em;
	font-size:20px;
}

.modal-menu > li > a:hover, .modal-menu > li > .ancestor-wrapper > a:hover {
	text-decoration: none !important;
	color:#0DB7D6 !important;
}

/* ■■■■■ ここまでヘッダー ■■■■■ */



/* ■■■■■ ここから固定ページ ■■■■■ */
/* 固定ページのタイトルを表示しない */
header.entry-header {
	display:none;
}

/* 動作確認用ページ */
#dousa-content {
}


/* ===== ここからTOPページ ===== */
#top-page-content {
}

/* ===== ここから天空 ===== */
#ten {
}

.ten-box {
	width:100%;
	box-sizing:border-box;
	padding-top:30px;
	margin:auto;
	text-align:center;
}
/* 画面サイズが950px以下の場合ここから */
@media screen and (max-width: 950px) {
.ten-box {
	width:90%;
}
}
/* 画面サイズが950px以下の場合ここまで */

.ten-box-photo {
	width:100%;
	max-width:250px;
	padding-top:170px;
	padding-right:20px;
	box-sizing:border-box;
	vertical-align: top;
	display:inline-block;
}
/* 画面サイズが950px以下の場合ここから */
@media screen and (max-width: 950px) {
.ten-box-photo {
	padding-top:0px;
	padding-right:0px;
}
}
/* 画面サイズが950px以下の場合ここまで */

.ten-box-text {
	width:100%;
	max-width:600px;
	display:inline-block;
	text-align:left;
}
/* 画面サイズが950px以下の場合ここから */
@media screen and (max-width: 950px) {
.ten-box-text {
	max-width:900px;
	text-align:center;
}
}
/* 画面サイズが950px以下の場合ここまで */


.ten-box-text-ten-name {
	width:100%;
	max-width:310px;
	margin:auto;
	display:inline-block;
	box-sizing:border-box;
	padding-bottom:20px;
	text-align:center;
}
/* 画面サイズが950px以下の場合ここから */
@media screen and (max-width: 950px) {
.ten-box-text-ten-name {
	padding-top:20px;
}
}
/* 画面サイズが950px以下の場合ここまで */


.ten-font-big {
	font-size:90px;
	font-weight: bold;
	color:#696969
}

/* ルビの微調整 */
.ten-font-big ruby {
	font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
}
.ten-rt {
	font-size:16px;
	text-align:center !important;
	font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
}

.ten-font-littlebig {
	font-size:30px;
	font-weight: bold;
	font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
	color:#696969;
}

ul.ten-list {
	width:100%;
	font-size:16px;
	margin:0px;
	list-style: none;
}
/* 画面サイズが950px以下の場合ここから */
@media screen and (max-width: 950px) {
ul.ten-list {
	margin:auto;
}
}
/* 画面サイズが950px以下の場合ここまで */

ul.ten-list li {
	width:100%;
	display:inline-block;
	padding:20px;
	margin:0px;
	border-bottom:1px solid #000;
	box-sizing:border-box;
}
ul.ten-list li:first-child {
	border-top:1px solid #000;
}

.ten-list-category {
	width:20%;
	padding-right:20px;
	text-align:center;
	vertical-align: top;
	text-align:left;
	display:inline-block;
	box-sizing:border-box;
}
/* 画面サイズが950px以下の場合ここから */
@media screen and (max-width: 950px) {
.ten-list-category {
	width:80px;
}
}
/* 画面サイズが950px以下の場合ここまで */

.ten-list-content {
	width:80%;
	display:inline-block;
	text-align: justify;/*文字の均等配置*/
	text-justify: inter-ideograph;/*文字の均等配置IE*/
	vertical-align: top;
	box-sizing:border-box;
}
/* 画面サイズが600px以下の場合ここから */
@media screen and (max-width: 600px) {
.ten-list-content {
	width:60%;
}
}
/* 画面サイズが600px以下の場合ここまで */


.ten-photo-3 {
	width:100%;
	max-width:850px;
	display:inline-block;
	box-sizing:border-box;
}

.ten-photo-3 img {
	width:100%;
	display:inline-block;
	box-sizing:border-box;
}

/* ===== ここまで天空 ===== */

.insta {
	max-height:450px;
	width:90%;
	margin:auto;
	overflow: auto;
	padding:20px 10px;
	box-shadow:0px 0px 8px 3px #ccc inset;
}

.insta-linkbutton {
	width:90%;
	margin:auto;
	text-align:center;
}
.insta-linkbutton a {
	display:inline-block;
	background-color:#0DB7D6;
	border-radius:10px 10px 10px 10px;
	color:#fff;
	text-decoration: none;
	font-weight: bold;
	padding:20px 40px;
	margin-bottom:50px;
	box-sizing:border-box;
	transition: .3s;
  -webkit-transition: .3s;/*サファリで動くように*/
  -moz-transition: .3s;/*ファイアーフォックスで動くように*/
  -ms-transition: .3s;/*IEで動くように*/
}
.insta-linkbutton a:hover {
	background-color:#A9CD36;
}

.ggmap {
	width:100%;
	height:400px;
}

.top-businessguide-button-notlink {
	width:100%;
	text-align:center;
}

.top-businessguide-button-notlink-text {
	padding:15px 50px;
	border:2px solid #0DB7D6;
	color:#0DB7D6;
	box-sizing:border-box;
	font-weight: bold;
	border-radius:10px 10px 10px 10px;
	text-align:center;
	display:inline-block;
}

.top-businessguide-button {
	width:100%;
	text-align:center;
}

.top-businessguide-button a {
	padding:15px 50px;
	border:2px solid #0DB7D6;
	color:#0DB7D6;
	box-sizing:border-box;
	font-weight: bold;
	text-decoration: none;
	border-radius:10px 10px 10px 10px;
	position:relative;
	display:inline-block;
}

.top-businessguide-button a:hover {
	color:#fff;
	background-color:#0DB7D6;
	text-decoration: none;
}

.yubisashi {
	width:40px;
	position:absolute;
	bottom:-10px;
	right:0px;
	display:inline-block;
}

.nikukyu {
	width:55px;
	position:absolute;
	bottom:-10px;
	right:-15px;
	display:inline-block;
}

.top-businessguide-content {
	margin:auto;
	text-align:left;
}

.top-businessguide-text {
	box-sizing:border-box;
	padding:20px 15px;
	text-align: justify;/*文字の均等配置*/
	text-justify: inter-ideograph;/*文字の均等配置IE*/
	display:inline-block;
	vertical-align: top;
}
/* 画面サイズが1200以下の場合ここから */
@media screen and (max-width: 1200px) {
.top-businessguide-content {
	width:90% !important;
	margin:auto;
}

.top-businessguide-text {
	padding:15px 15px;
}
}
/* 画面サイズが1200以下の場合ここまで */
/* 画面サイズが850以下の場合ここから */
@media screen and (max-width: 850px) {
.top-businessguide-text {
	padding:10px 15px;
}
}
/* 画面サイズが850以下の場合ここまで */


/* ===== ここから業務案内 ===== */
#business-guide {
}
/* ===== ここまで業務案内 ===== */


/* ===== ここまでTOPページ ===== */


/* ===== ここからごあいさつ ===== */
#greeting-content {
}
/* ===== ここまでごあいさつ ===== */


/* ===== ここから会社概要 ===== */
#aboutus-content {
}

.aboutus-content-box {
	width:90%;
	margin:auto;
}

.aboutus-content-box-content {
	width:100%;
	font-size:16px;
	line-height: 30px;
	letter-spacing:0.15em;
	padding:10px 0px;
	border-bottom:1px solid #dcdcdc;
}

.aboutus-content-box-content:first-child {
	border-top:1px solid #dcdcdc;
}

.aboutus-left {
	width:20%;
	text-align:right;
	font-weight: bold;
	display:inline-block;
	vertical-align: top;
}

.aboutus-right {
	width:70%;
	padding-left:30px;
	box-sizing:border-box;
	text-align: justify;/*文字の均等配置*/
	text-justify: inter-ideograph;/*文字の均等配置IE*/
	display:inline-block;
	vertical-align: top;
}

/* 画面サイズが750以下の場合ここから */
@media screen and (max-width: 750px) {
.aboutus-left {
	width:100%;
	text-align: justify;/*文字の均等配置*/
	text-justify: inter-ideograph;/*文字の均等配置IE*/
}

.aboutus-right {
	width:100%;
	padding-left:0px;
}
}
/* 画面サイズが750以下の場合ここまで */

/* ===== ここまで会社概要 ===== */


/* ===== ここからアクセス ===== */
#access-content {
}
/* ===== ここまでアクセス ===== */


/* ===== ここから施工ページ共通 ===== */
.sekou-headline {
	width:100%;
	text-align:center;
}

.sekou-headline-content {
	background-color:#0DB7D6;
	color:#fff;
	font-weight: bold;
	font-size:20px;
	padding:5px 50px;
	text-align:center;
	display:inline-block;
	border-radius:10px 10px 10px 10px;
}

.sekou-photo-yoko {
	max-width:640px;
	width:90%;
	margin:10px auto;
}

.sekou-photo-yoko img {
	width:100%;
	display:inline-block;
}

.sekou-photo-tate {
	max-width:500px;
	width:70%;
	margin:10px auto;
}

.sekou-photo-tate img {
	width:100%;
	display:inline-block;
}

.sekou-photo-yoko2 {
	max-width:640px;
	width:90%;
	margin:10px auto;
}

.sekou-photo-yoko2-l {
	width:49%;
	padding-right:5px;
	display:inline-block;
	box-sizing:border-box;
}

.sekou-photo-yoko2-l img {
	width:100%;
	display:inline-block;
}

.sekou-photo-yoko2-r {
	width:49%;
	padding-left:5px;
	display:inline-block;
	box-sizing:border-box;
}

.sekou-photo-yoko2-r img {
	width:100%;
	display:inline-block;
}

/* 画面サイズが400以下の場合ここから */
@media screen and (max-width: 400px) {
.sekou-photo-yoko2-l {
	width:100%;
	padding-right:0px;
	padding-bottom:10px;
}

.sekou-photo-yoko2-r {
	width:100%;
	padding-left:0px;
}
}
/* 画面サイズが400以下の場合ここまで */

/* ===== ここまで施工ページ共通 ===== */


/* ===== ここから屋根工事全般ページ ===== */
#roofing-work-in-general-content {
	width:100%;
}
/* ===== ここまで屋根工事全般ページ ===== */


/* ===== ここから板金工事全般ページ ===== */
#sheet-metal-work-in-general-content {
	width:100%;
}
/* ===== ここまで板金工事全般ページ ===== */


/* ===== ここから太陽光発電全般ページ ===== */
#solar-power-generation-in-general-content {
	width:100%;
}
/* ===== ここまで太陽光発電全般ページ ===== */


/* ===== ここからリフォーム・再生・補強工事ページ ===== */
#renovation-etc-content {
	width:100%;
}
/* ===== ここまでリフォーム・再生・補強工事ページ ===== */


/* ■■■■■ ここまで固定ページ ■■■■■ */



/* ■■■■■ ここからフッター ■■■■■ */
.footer-business-guide-button {
	width:100%;
	text-align:center;
	margin-bottom:30px;
}

.footer-business-guide-button a {
	padding:15px 50px;
	margin:20px 20px;
	border:2px solid #0DB7D6;
	color:#0DB7D6;
	box-sizing:border-box;
	font-weight: bold;
	text-decoration: none;
	text-align:center;
	border-radius:10px 10px 10px 10px;
	position:relative;
	display:inline-block;
}

.footer-business-guide-button a:hover {
	color:#fff;
	background-color:#0DB7D6;
	text-decoration: none !important;
}

.yubisashi {
	width:40px;
	position:absolute;
	bottom:-10px;
	right:0px;
	display:inline-block;
}



.footer-aboutus {
	width:90%;
	margin:auto;
	text-align:center;
	letter-spacing:0.1em;
}

.footer-aboutus img {
	display:inline-block;
	text-align:center;
	margin-bottom:20px;
}

.copyright {
	text-align:center;
	letter-spacing:0.1em;
}

/* ページトップへのスクロールボタン */
.page-top {
	position: fixed;
	bottom: 30px;
	right: 20px;
	text-align:center;
}

/* 画面サイズが710以下の場合ここから */
@media screen and (max-width: 710px) {
.page-top {
	bottom: 10px;
	right: 10px;
	text-align:center;
}
}
/* 画面サイズが710以下の場合ここまで */

.page-top a {
	display:inline-block;
	width:60px;
	height:60px;
	padding-top:6px;
	background-color:#0DB7D6 !important;
	color:#FFF;
	text-decoration:none;
	border-radius:50%;
	line-height:1.3em;
	box-shadow: 2px 2px rgba(0,0,0,0.2);
	transition: .2s;
  -webkit-transition: .2s;/*サファリで動くように*/
  -moz-transition: .2s;/*ファイアーフォックスで動くように*/
  -ms-transition: .2s;/*IEで動くように*/
}

.page-top a:hover {
	background-color:#A9CD36 !important;
	color:#FFF;
	text-decoration:none !important;
}
/* ■■■■■ ここまでフッター ■■■■■ */