@charset "UTF-8";


/* 1. Module -------------------------------------------------------------------------------------*/

a.button{
	width:100%;
	margin:0 auto;
}

a.btn_txt[data-icon-type="arrow"]:after,
a.btn_txt[data-icon-type="external"]:after,
a.btn_txt[data-icon-type="pdf"]:after,
a.btn_txt[data-icon-type="word"]:after,
a.btn_txt[data-icon-type="excel"]:after,
a.btn_txt[data-icon-type="more"]:after,
main ul.information_list li a[data-icon-type="arrow"] p:after,
main ul.information_list li a[data-icon-type="pdf"] p:after,
main ul.information_list li a[data-icon-type="external"] p:after,
main ul.information_list li a[data-icon-type="excel"] p:after,
main ul.information_list li a[data-icon-type="word"] p:after{
	height:1.475em;
	vertical-align:bottom;
}

select{
	width:100%;
}

label:has(input.pulldown){
	width:100%;
}

ul.label_selector{
	width:calc(100% - 40px);
}

main ul.tab{
	width:100%;
	flex-wrap:nowrap;
	overflow-wrap:break-word;
	align-items:flex-end;
}

main ul.tab li{
	display:block;
	font-size:150%;
	padding:0 8px;
}

main ul.tab li a.all{
	padding:calc(10px + 0.75em) 0;
}

main ul.tab li a{
	padding:10px 0;
	vertical-align:middle;
}

main ul.tab li a:not(.all){
	text-align:left;
}

main ul.tab li a.active:after,
main ul.tab li a:hover:after{
	left:calc(50% - 30px);
	width:60px;
}

main ul.information_list li a{
	padding:16px 0;
}

br.pc{
	display:none;
}

br.sp{
	display:inline;
}

img{
	max-width:100%;
}

/* anker link */

main article nav.anker{
	margin-bottom:30px;
}

main article nav.anker ul li{
	margin-bottom:1.5em;
}

/* accordion element */

main > article details summary{
	padding-right:40px;
}

main > article details p,
main > article details h4{
	padding:0 24px;
}

main > article details summary + p,
main > article details summary + h4{
	margin-top:16px;
}

main > article details p:last-child{
	padding-bottom:24px;
}

main > article details ul.img_list{
	display:flex;
	flex-direction:column;
	padding:0 24px 24px;
	margin-top:0;
}

main > article details ul.img_list li,
main > article details div ul.img_list.right_img li{
	max-width:100%;
	width:100%;
	padding:0;
	margin-top:16px;
	text-align:center;
}

main > article details ul.img_list li span{
	display:block;
	text-align:left;
	position:static;
}

/* image column element */

main article figure figcaption{
	font-size:120%;
	margin-top:1em;
}

main article figure img{
	width:100%;
	max-width:100%;
}

main article figure.center_img{
	width:100%;
}

main article div.left_img,
main article div.right_img{
	margin-top:60px;
	display:block;
}

main article div.right_img{
	flex-direction:row-reverse;
}

main article div.left_img figure,
main article div.right_img figure{
	width:100%;
	max-width:100%;
}

main article div.left_img figure img,
main article div.right_img figure img{
	margin-left:auto;
	margin-right:auto;
}

main article div.left_img  div.explanation,
main article div.right_img div.explanation{
	max-width:100%;
	width:100%;
	margin-top:24px;
}

main article div.col2,
main article div.col3,
main article div.col4{
	margin-top:30px;
}

main article div.col2 > *,
main article div.col3 > *,
main article div.col4 > * {
	width:calc(50% - 8px);
	margin:16px 16px 0 0;
}
main article div.col2 > *:nth-child(2n),
main article div.col3 > *:nth-child(2n),
main article div.col4 > *:nth-child(2n){
	margin-right:0;
}

main article div.video{
	padding:0;
}

/* IGNITURE block */

section.igniture{
	display:block;
	background:linear-gradient(90deg, rgba(81,133,197,1) 0%, rgba(66,77,153,1) 80%, rgba(66,77,153,1) 100%);
	padding:43px 0 40px;
	overflow:hidden;
}

section.igniture:before{
	width:287px;
	height:287px;
	clip-path:path("M 0 0 L 287 0 A 287 287 0 0 0 0 287 L 0 0 Z");
	top:-101px;
	left:-10px;
	z-index:1;
}

section.igniture:after{
	width:143px;
	height:143px;
	z-index:1;
}

section.igniture div.txt_set{
	width:100%;
	padding:0 20px;
	position:static;
	z-index:2;
}

section.igniture div.txt_set img{
	width:192px;
}

section.igniture div.txt_set p + p{
	margin-top:1.5em;
}

section.igniture div.txt_set p:not(:has(a)){
	font-size:120%;
	text-align:left;
}

section.igniture div.img_set{
	width:100%;
	min-width:0;
	height:auto;
	padding:28px 20px 0;
	text-align:center;
	border-left:none;
	z-index:2;
}

section.igniture div.img_set img.main{
	position:relative;
	left:0;
	top:0;
	margin:0 auto;
}

section.igniture div.img_set img.cap{
	top:196px;
	left:calc(50% - 140px);
}

/* Solution & Service block */

main section.solution_service,
main article section.solution_service{
	min-height:0;
	padding-top:64px;
	padding-bottom:64px;
}

main section.solution_service div.bg{
	position:static;
	padding-bottom:40px;
}

main section.solution_service div.bg picture{
	position:static;
	height:auto;
}

main section.solution_service div.bg picture img{
	height:auto;
	position:static;
	border-radius:8px;
}

main section.solution_service div.exp,
main article section.solution_service div.exp{
	min-height:0;
	padding-top:0;
	padding-bottom:0;
}

main section.solution_service h2,
main section.solution_service p{
	padding-left:0;
	width:100%;
	color:#181a24;
}

main section.solution_service p + p{
	margin-top:16px;
	padding-bottom:16px;
}

main section.solution_service a.button{
	width:100%;
}

main section.solution_service div.recommended_keywords{
	border-radius:8px;
	padding:20px 15px;
	margin-top:8px;
}

main section.solution_service div.recommended_keywords:before{
	width:24px;
	height:16px;
	top:-15px;
	left:calc(50% - 12px);
}

main section.solution_service div.recommended_keywords ul.hashtag li{
	margin-right:0.5em;
	margin-top:0.5em;
}

/* for Second Layer */

main article div.box{
	padding:32px;
	margin-top:16px;
}

main article div.box.frame{
	padding:32px;
}

main article blockquote{
	padding:64px 32px;
}

main article table{
	width:calc(100% + 40px);
	margin-left:-20px;
	padding:0 20px;
	display:block;
	overflow:scroll;
}

main article table tbody{
	display:table;
}

main article table th,
main article table td{
	padding:16px;
}
main article table:not(:has(th:first-child + td)) td{
	min-width:250px;
}





/* 2. Header -------------------------------------------------------------------------------------*/

body:has(input#sp_menu_check:checked){
	height:100vh;
	overflow:hidden;
}

header{
	position:relative;
	min-height:59px;
}

header label.sp_nav input#sp_menu_check{
	display:inline;
	height:0;
	width:0;
	border:none
}
header:has(input#sp_menu_check:checked){
	position:static;
	top:0;
	width:100%;
	z-index:99;
}

header div.global{
	display:none;
}

header a.logo{
	z-index:99;
	position:absolute;
	left:15px;
	top:15px;
	margin:0;
	width:124px;
	height:27px;
}

header a.logo picture{
	display:block;
	width:124px;
	height:27px;
	padding:0;
	margin:1px;
}

header label.sp_nav{
	display:block;
	width:24px;
	height:18px;
	border-top:8px solid #fff;
	border-bottom:8px solid #fff;
	background:#004098;
	position:absolute;
	right:16px;
	top:20px;
	transition:background 0.2s;
	z-index:99;
	outline-offset:5px;
}

header label.sp_nav:has(input:focus){
	outline:auto;
	outline:auto -webkit-focus-ring-color;
}


header label.sp_nav:before,
header label.sp_nav:after{
	content:"";
	display:block;
	width:100%;
	height:2px;
	background:#004098;
	position:absolute;
	bottom:-8px;
	transition:all 0.2s;
}

header label.sp_nav:before{
	top:-8px;
}

header label.sp_nav:has(input#sp_menu_check:checked){
	background:#fff;
}

header label.sp_nav:has(input#sp_menu_check:checked):before{
	transform:rotate(-45deg);
	top:0;
}

header label.sp_nav:has(input#sp_menu_check:checked):after{
	transform:rotate(45deg);
	top:0;
}

header label.sp_nav:has(input#sp_menu_check:checked) + nav{
	padding:20px 20px 0;
	top:59px;
}

header label.sp_nav:not(input#sp_menu_check:checked) + nav > ul,
header label.sp_nav:not(input#sp_menu_check:checked) + nav > div,
header label.sp_nav:not(input#sp_menu_check:checked) + nav form,
header label.sp_nav:not(input#sp_menu_check:checked) + nav p.logo_tgg{
	display:none;
}

header label.sp_nav:has(input#sp_menu_check:checked) + nav > ul:not(.skiplink),
header label.sp_nav:has(input#sp_menu_check:checked) + nav > div,
header label.sp_nav:has(input#sp_menu_check:checked) + nav form,
header label.sp_nav:has(input#sp_menu_check:checked) + nav p.logo_tgg{
	display:block;
}

header nav{
	width:100%;
	height:calc(100dvh - 59px);
	overflow-y:scroll;
	overflow-x:hidden;
	padding:20px 20px 0;
	position:fixed;
	top:-140vmax;
	right:0;
	left:0;
	z-index:90;
	background:#fff;
	display:flex;
	flex-direction:column;
	transition:top 0.4s,bottom 0.4s,padding-top 0.2s,padding-bottom 0.2s;
}

header:after{
	content:"";
	display:block;
	width:100%;
	height:59px;
	position:absolute;
	top:0;
	left:0;
	background:#fff;
	z-index:91;
}

header nav ul.skiplink{
	display:none;
}

header nav div.language{
	order:4;
	border-bottom:1px solid #e8e8e8;
	overflow:visible;
}

header nav div.language p{
	font-size:140%;
	order:3;
	display:flex;
}

header nav div.language p a,
header nav div.language > p a:hover,
header nav div.language > p a.on{
	display:flex;
	align-items:center;
	color:#181a24;
	position:static;
	width:100%;
	border-top:1px solid #e8e8e8;
	padding:17px 1em;
	background:url(/common/images/icon_plus.svg) center right 10px no-repeat;
	background-size:20px;
}

header nav div.language p.open a{
	background:url(/common/images/icon_minus.svg) center right 10px no-repeat;
	background-size:20px;
}

header nav div.language p a:after{
	content:"";
	display:inline-block;
	height:18px;
	width:18px;
	background:url(/common/images/icon_lang.svg) center no-repeat;
	background-size:18px 18px;
	position:relative;
	left:0.25em;
}

header nav div.language div{
	display:grid;
	grid-template-rows:0fr;
	transition:grid-template-rows 0.4s;
}

header nav div.language p.open + div{
	grid-template-rows:1fr;
	overflow:visible;
}

header nav div.language ul{
	overflow:hidden;
	flex-direction:column;
	flex-wrap:nowrap;
	position:static;
	width:100%;
	background:none;
	margin-top:0;
	border:none;
	padding:0;
	visibility:visible;
	opacity:1;
	transition:opacity 0,visibility 0;
}

header nav div.language p.open + ul{
	height:auto;
	overflow:visible;
}

header nav div.language ul li{
	border:none;
	font-size:140%;
	overflow:visible;
}

header nav div.language ul li a{
	color:#181a24;
	display:block;
	padding:17px 0 17px 2em;
	background:url(/common/images/icon_arrow_right.svg) center right 10px no-repeat;
	background-size:20px;
	overflow:visible;
}

header nav div.language ul li a:hover{
	background:#f5f5f6 url(/common/images/icon_arrow_right.svg) center right 10px no-repeat;
	background-size:20px;
}

header nav form.search{
	position:static;
	order:1;
}
header nav form.search label{
	position:relative;
	height:auto;
	top:0;
}

header nav form.search label input.search_btn,
header nav form.search label input.SS_searchSubmit{
	position:absolute;
	width:38px;
	height:38px;
	left:1px;
	top:0;
}

header nav form.search label input[type="text"]{
	display:block;
	position:static;
	visibility:visible;
	opacity:1;
	border:1px solid #e8e8e8;
	width:100%;
	font-size:160%;
	padding:9px 12px 9px 36px;
	background:#fff url(/common/images/icon_search_b.svg) center left 10px no-repeat;
}

header nav form.search label:before{
	display:none;
}

header nav form.search a.search_btn{
	display:none;
}

header nav > ul{
	order:2;
	flex-direction:column;
	width:100%;
	margin-top:20px;
}

header nav ul li{
	font-size:140%;
	font-weight:400;
	width:100%;
	border-top:1px solid #e8e8e8;
}

header nav ul li a,
header nav ul li > span{
	color:#181a24;
	display:block;
	padding:17px 3em 17px 1em;
	background:url(/common/images/icon_arrow_right.svg) center right 10px no-repeat;
	background-size:20px;
	font-size:100%;
}

header nav > ul > li > a:after,
header nav > ul > li > span:after{
	display:none;
}

header nav ul li:has(ul) > span{
	background:url(/common/images/icon_plus.svg) center right 10px no-repeat;
	background-size:20px;
}

header nav ul li:has(ul) > span.open{
	background:url(/common/images/icon_minus.svg) center right 10px no-repeat;
	background-size:20px;
}

header nav > ul > li > a[data-icon-type="external"]{
	display:block;
}

header nav ul li a[data-icon-type="external"],
header nav ul li span + div.sub ul li a[data-icon-type="external"]{
	background:url(/common/images/icon_external.svg) center right 14px no-repeat;
	background-size:12px;
	padding-right:3em;
}

header nav ul li a:hover,
header nav ul li:hover > a,
header nav ul li span:hover{
	border:none;
	color:#181a24
}

header nav ul li div.sub{
	z-index:1;
	overflow:hidden;
}

header nav ul li span + div.sub{
	display:grid;
	grid-template-rows:0fr;
	position:static;
	width:100%;
	background:none;
	margin-top:0;
	border-top:none;
	padding:0;
	visibility:visible;
	opacity:1;
	transition:grid-template-rows 0.4s;
}

header nav ul li span + div.sub div{
	overflow:hidden;
	display:block;
}

header nav ul li span.open + div.sub{
	grid-template-rows: 1fr;
}

header nav ul li span + div.sub p{
	font-size:100%;
	font-weight:400;
	flex-basis:100%;
	min-width:0;
	padding:0 0 0 1em;
	width:100%;
}

header nav ul li span + div.sub a.close{
	display:none;
}

header nav ul li ul{
	border-left:none;
	width:100%;
}

header nav ul li ul li{
	display:block;
	font-size:100%;
	font-weight:400;
	padding:0 0 0 1em;
	width:100%;
	min-width:0;
	margin:0;
	border:none;
}

header nav ul li ul li a{
	display:block;
	padding:17px 3em 17px 1em;
}

header nav ul li p > a,
header nav ul li p > a:hover,
header nav ul li ul li > a,
header nav ul li ul li > a:hover{
	color:#181a24;
}

header nav ul.sp_menu{
	display:block;
	border:none;
	order:5;
}

header nav ul.sp_menu li{
	border:none;
	font-size:120%;
	margin-top:0.75em;
}

header nav ul.sp_menu li a{
	display:inline;
	background:none;
	color:#004098;
	font-size:100%;
}

header nav p.logo_tgg{
	display:block;
	margin:30px 0;
	order:6;
}

header nav p.logo_tgg a{
	display:inline-block;
	text-align:left;
	width:100%;
	height:25px;
}

header nav label.menu_close{
	order:7;
	position:relative;
	display:block;
	padding:0.75em 0;
	left:0;
	margin-left:-20px;
	width:calc(100% + 40px);
	font-size:150%;
	text-align:center;
	background:#004098;
	color:#fff;
	vertical-align:bottom;
}

header nav label.menu_close:after{
	content:"";
	display:inline-block;
	width:20px;
	height:20px;
	background:url(/common/images/icon_close.svg) bottom no-repeat;
	margin-bottom:-0.25em;
}



/* 3. Footer -------------------------------------------------------------------------------------*/

footer{
	min-width:0;
}

footer nav{
	background:#004098;
	padding:30px 20px;
	display:flex;
	flex-direction:column;
}

footer nav ul{
	padding-right:0;
	order:3;
}

footer nav ul li{
	font-size:130%;
}

footer nav ul.tokyogas{
	order:1;
}

footer nav ul.tokyogas li{
	text-align:center;
}

footer nav ul.tokyogas li a{
	max-width:100%;
}

footer nav ul.en{
	order:2;
	margin:20px 0;
	text-align:center;
}

footer p.logo_tgg{
	margin:20px 20px 0;
}

footer p.logo_tgg a{
	display:block;
	width:100%;
	max-width:335px;
	height:18px;
}

footer small{
	display:block;
	width:auto;
	font-size:110%;
	text-align:left;
	margin:10px 20px;
}

footer a.backto_top{
	right:10px;
	bottom:10px;
	height:35px;
	width:35px;
}

footer a.backto_top.footer_fit{
	top:-45px;
}



/* 4. Main Contents -------------------------------------------------------------------------------------*/

main{
}

main section{
	padding:20px;
	min-width:0;
}

main section img{
	max-width:100%;
}



/* for Second Layer */

main nav.breadcrumb{
	display:none;
}

main nav.breadcrumb ol{
	padding:8px 20px;
}

main > h1{
	padding:40px 20px;
}

main > h1 + p.lead{
	padding:0 20px 40px;
}

main > article{
	padding:0 20px 80px;
}



/* 4. Aside Contents -------------------------------------------------------------------------------------*/

aside.topics ul{
	display:block;
	width:100%;
	margin-top:0;
	padding-top:10px;
}

aside.topics ul li,
aside.topics ul li:nth-child(-n+3){
	width:100%;
	margin-top:20px;
}

aside.topics ul li a picture{
	max-height:none;
}

aside.topics ul li a img{
	max-height:none;
	width:100%;
}

aside.topics ul li a:hover img{
	transform:scale(1);
}