@charset "UTF-8";

/*-----------------------------------------------------
html
-------------------------------------------------------*/
html, body{
	margin: 0;
	padding: 0;
	margin-left:auto;
	margin-right:auto; 
	font-size: var(--base);
	font-family: "Noto Sans JP","ヒラギノ角ゴ Pro W3","Yu Gothic Medium","游ゴシック Medium",YuGothic,游ゴシック体,メイリオ,sans-serif;
	color: #333333;
	line-height: 1.0;
	letter-spacing: .1em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-feature-settings: 'palt';
    font-feature-settings: 'palt';
	z-index: -9999;
    box-sizing: border-box;
    text-align: left;
}

a{
    text-decoration: none !important;
}



img {
    image-rendering: -webkit-optimize-contrast;
}


/*-----------------------------------------------------
root
-------------------------------------------------------*/

:root {
    
/*font-size*/    
font-size: 62.5% !important;
--base: 1.7rem;
--s10: 1.0rem;
--s12: 1.2rem;
--s13: 1.3rem;
--s14: 1.4rem;    
--s15: 1.5rem; 
--s16: 1.6rem;    
--s18: 1.8rem;
--s20: 2.0rem;
--s22: 2.2rem;
--s24: 2.4rem;    
--s26: 2.6rem;     
--s28: 2.8rem;     
--s32: 3.2rem;
--s38: 3.8rem;
--s40: 4.0rem;
--s42: 4.2rem;
--s44: 4.4rem;
    
--imgh: 34vw; 
	
/*line-height*/    
--lh12: 1.2;
--lh14: 1.4;
--lh16: 1.6;
--lh18: 1.8;
--lh20: 2.0;

    
--bg:#fff;
--border:#ccc;
--color-1:#C81A2B;
--radius:6px;
}

/*-----------------------------------------------------
global
-------------------------------------------------------*/
.g_only_pc{
    display: block;
}

.g_only_tb{
    display: block;
}

.g_only_sp{
    display: none !important;
}

.g_only_pc_in{
    display: inline-block;
}

.g_w1240{
	max-width: 1240px;
	margin: 0 auto;
}

.g_w1100{
	max-width: 1100px;
	margin: 0 auto;
}

.g_w1000{
	max-width: 1000px;
	margin: 0 auto;
}

.g_w900{
	max-width: 900px;
	margin: 0 auto;
}

.g_w800{
	max-width: 800px;
	margin: 0 auto;
}



/*header*/

#header_box{
    width: 100%;
	padding: 30px 30px;
	border-bottom: 1px solid #ddd;
}

.header_logo{
    max-width: 170px;
    height: auto;
}



/* Shell */
.container{
  max-width: 1260px;
  margin: 0 auto;
}

.tabs{
  padding: 60px 0 100px 0;
}

.tab-nav{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px;
}

/* radio inputs hidden */
.tabs input[type="radio"]{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.tab-label{
  position: relative;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  user-select: none;
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
	font-weight: bold;
}

.tab-label:hover{
	background: #fafafa;
}

/* active state (using :has() as progressive enhancement) */
.tab{
  display: none;
}

/* Default: first tab visible when JS is absent */
.tabs input#tab-1:checked ~ .tab-panels #panel-1,
.tabs input#tab-2:checked ~ .tab-panels #panel-2,
.tabs input#tab-3:checked ~ .tab-panels #panel-3,
.tabs input#tab-4:checked ~ .tab-panels #panel-4,
.tabs input#tab-5:checked ~ .tab-panels #panel-5,
.tabs input#tab-6:checked ~ .tab-panels #panel-6{
  display: block;
}

.tabs input#tab-1:checked ~ .tab-nav label[for="tab-1"],
.tabs input#tab-2:checked ~ .tab-nav label[for="tab-2"],
.tabs input#tab-3:checked ~ .tab-nav label[for="tab-3"],
.tabs input#tab-4:checked ~ .tab-nav label[for="tab-4"],
.tabs input#tab-5:checked ~ .tab-nav label[for="tab-5"],
.tabs input#tab-6:checked ~ .tab-nav label[for="tab-6"]{
  color:#fff;
  background: #C81A2B;
	border: none;
}

/* Panels */
.tab-panels{
  padding: 16px;
}

.panel-card{
  overflow: hidden;
}

.panel-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 0;
}

.panel-title{
  font-weight: bold;
  font-size: var(--s20);
	color: var(--color-1);
}

.io-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  min-height: 340px;
}

.io{
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.io:last-child{
  border-right: none;
}

.io-toolbar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 0;
}

.io-toolbar .chip{
  font-size: 13px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
}

.io-text{
  width: 100%;
  height: 260px;
  flex: 1;
  resize: none;
  padding: 16px;
  background: transparent;
  border: 1px solid var(--border);
	border-radius: 10px;
  outline: none;
  font-size: 15px;
  line-height: 1.7;
	
}

.io-text::placeholder{
  color: #999;
}

.io-footer{
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding: 10px 12px;

}

.btn{
  appearance: none;
  border: none;
  border-radius: 10px;
  padding: 10px 14px;
  cursor: pointer;
  font: var(--s14);
  border: 1px solid var(--border);
}

.btn:hover{
  background: #fafafa;
}

.btn.primary{
}


/*-----------------------------------------------------
footer
-------------------------------------------------------*/
footer{
}

#footer_box{
    padding: 100px 0px 40px;
	border-top: 1px solid #ddd;
}

.footer_logo{
	width: 170px;
	margin: 0 auto 30px;
}


.footer_copyright{
    text-align: center;
    font-size: var(--s13);
	line-height: var(--lh16);
}

/*-----------------------------------------------------
page-top
-------------------------------------------------------*/

#page_top {
    position: fixed;
    bottom: 0;
    right: 30px;
	z-index: 9999;
	margin: 0 0 32px;
    display: none;
}

#page_top.active{
    display: block;
    transition: 1s all;     
}

#page_top a{
	width: 50px;
	height: 50px;
    display: inline-block;
}

#page_top a:hover{
    text-decoration: none;
    opacity: 0.8;
}

#page_top a img{
}

/*-----------------------------------------------------
reCAPTCHA
-------------------------------------------------------*/
.grecaptcha-badge { visibility: hidden; }

.recaptcha{
    margin: 54px auto 15px;
    border: 1px solid #cccccc;
    padding: 20px;
    border-radius: 4px;
    width: 100%;
    text-align: center;
}

.recaptcha p{
  font-size:12px;
  color:#808080;
  line-height: 1.75;
}

.recaptcha a{
  display: inline;
  text-decoration: underline;
  color:#808080;
}

.recaptcha span{
    display: block;
    color: #222222;
}


/*-----------------------------------------------------
translate
-------------------------------------------------------*/
#gt-nvframe{
    display: none;
}