@charset "UTF-8";
/*
Theme Name: Plat
Theme URI: https://www.plat-com.jp/
Description: PlatTheme
Version: 6.0
Author: Yucky
*/


#glt-translate-trigger {
right: 20px;
top:7px;
}


#pageTopImg img {
width:100%;
height:auto;
margin:0;
padding:0;
aspect-ratio: 5 / 3;
display:flex;
justify-content: center;
align-items: center;
}
#pageTopImg h2 {
position:absolute;
width:100%;
text-align:center;
color: var(--white);
top: 50%;
left: 50%;
font-size:2rem;
font-weight:normal;
background-color: rgb(0,0,0,0.5);
-ms-transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
margin:0;
padding:0;
}
#dl001 dl span {
color:var(--white);
padding:5px;
font-weight:700;
margin-right:8px;
border-radius: 4px;
}
#dl001 dt {
line-height:1.6;
margin-bottom:10px;
}
#dl001 dt span {
background-color:var(--blue);
}
#dl001 dd {
line-height:1.6;
margin-bottom:20px;
}
#dl001 dd span {
background-color:var(--red);
}
.chip {
display: inline-block;
position: relative;
}

.chip summary {
  list-style: none;
  cursor: pointer;
  border-radius: 6px;
  font-size: 14px;
}

.chip summary::-webkit-details-marker {
  display: none;
}
.chip[open] summary {
  font-weight: bold;
}
.chip-content {
position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  padding:3px 0 3px 8px;
  background: var(--blue);
  color:var(--white);
  border-radius: 6px;
  width: 165px;
  font-size: 11px;
}



/* Tablet
---------------------------------------------------- */
@media screen and (min-width: 640px) {

#pageTopImg img {
aspect-ratio: 5 / 2;
}	
#pageTopImg h2 {
font-size:48px;
}
	
}	
/* Tablet
---------------------------------------------------- */
@media screen and (min-width: 768px) {
#glt-translate-trigger {
right: 20px;
top:50px;
}
#topStart {
margin-top:23px;
}	
.pcOnly {
display:block;
}
.mobileOnly {
display:none;
}
	
#pageTopImg img {
aspect-ratio: 5 / 1;
}		
	
.topHead {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}		
.leftHeader {
width:55%;
margin-left:10px;
}
.leftHeader dl {
width:100%;
align-items: center;
}
.leftHeader dl dt {
width:60px;
line-height:1;
}
	
	
.leftHeader dl dd h1 {
text-align:left;
font-size:20px;
}
.leftHeader dl dd p {
text-align:left;
font-size:14px;
color:#333;
}
.rightHeader {
display:block;
width:320px;
margin:10px 0 0;
}	
.rightHeader ul {
margin:0;
display: flex;
flex-wrap: wrap;
justify-content:space-around;
}	
	
.rightHeader ul li {
width:250px;
margin:0;
text-align:center;
line-height:50px;
font-weight:700;
color:var(--blue);
display: flex;
flex-wrap: wrap;
align-items: center;
}
.rightHeader ul li p {
margin:0;
}	
	
	
	
.rightHeader ul li:last-child {
display:block;
width:35px;
border:none;
}	
.topImg {
display:grid;
place-items:center;
margin-top:0;
}
.topImg > * {
z-index:999;
grid-area:1 / 1 / -1 / -1;
color:var(--blue);
}
.topText h2 {
font-size:min(4vw,18px);
place-items:center;
margin-bottom:1em;
color:var(--blue);
}
.topText h3 {
font-size:min(6vw,30px);
justify-self: end;
text-align: right;
margin-bottom:1em;
border-bottom:none;
color:var(--white);
}
	

.topImg li {
font-size:min(4vw,28px);
place-items:center;
line-height:1.6;
}			
	
.topImg img {
width:100%;
height:auto;
-ms-filter: blur(5px);
filter: blur(4px);
}
.content-grid {
display: grid;
grid-template-columns: 3fr 1fr;
gap: 20px;
align-items: center;
justify-content: center;
width: 100%;
max-width:950px;
box-sizing: border-box;  
}

.topText {
grid-column: 1 / -1;
text-align: right;
padding-right: 40px;
}



	
.topImg img.alignright {
-ms-filter:none;
filter: none;
justify-content: flex-end;
}		
	

	
}	
/* PC
---------------------------------------------------- */
@media screen and (min-width: 1201px) {
#glt-translate-trigger {
right: 20px;
top:10px;
}	
.pcOnly {
display:block;
}
.topImg .pcOnly {
display: grid;
aspect-ratio: 5 / 2;
}
.mobileOnly {
display:none;
}	
.content-grid {
max-width:1200px;
margin:0 auto;
}	
	
.topImg {
  display: grid;
  align-items: center;
  justify-items: start;
}
	
.topText h2 {
justify-self: center;
text-align: center; 
font-size:min(5vw,30px);
color:var(--blue);
text-shadow:
    1px 1px 2px var(--white),
   -1px 1px 2px var(--white),
    1px -1px 2px var(--white),
   -1px -1px 2px var(--white),
    0 0 6px var(--white),
    0 0 10px var(--white);
}
.topText h3 {
font-size:min(6vw,48px);
margin-bottom:1em;
border-bottom:none;
color:var(--white);
text-shadow:
    1px 1px 2px var(--blue),
   -1px 1px 2px var(--blue),
    1px -1px 2px var(--blue),
   -1px -1px 2px var(--blue),
    0 0 6px var(--white),
    0 0 10px var(--white);
}	
	
.topImg li {
font-size:min(4vw,36px);
place-items:center;
line-height:1.6;
}		

-webkit-text-stroke: 1px var(--white);
text-stroke: 1px var(--white);
	
	
	
	
}