@charset "UTF-8";

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

* {
    font-family: sans-serif;
}


body {
    font-family: 'メイリオ', 'Hiragino Kaku Gothic Pro', sans-serif;
    -webkit-text-size-adjust: 100%;
}

/*共通ーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/

/*カラー*/
:root {
    /*section 青*/
    --sec_01: #0068b6;
    /*section02 ピンク*/
    --sec_02: #e5004d;
}



a {
	color: #fff;
	text-decoration: none;
}

main section {
	width: min(840px,90%);
    margin: 0 auto;
}

h3 {
    font-size: 2rem;
}


h5 {
    font-size: 1.5rem;
    margin-bottom: 8px;
	text-align: left;
	color: #F07800;
}

small {
    font-size: 1rem;
}

span01 {
    display: inline-block;
}

.text_center{
    text-align: center;
    margin-bottom: 24px;
}

.flex_display {
	display: flex;
	column-gap: 8px;
}

.flex_wrap {
	display: flex;
	column-gap: 24px;
}

.flex_decoration_column {
	flex-direction: column;
    justify-content: center;
	grid-row-gap: 16px;
}

.section_title {
    text-align: center;
    margin-bottom: 48px;
	background: var(--sec_01);
	color: #fff;
	padding: 24px;
}

.section_title_02 {
    margin-bottom: 48px;
	background: var(--sec_02);
	color: #fff;
	padding: 12px;
    display: flex;
    justify-content: center;
    gap: 16px;
}

.section_title_box{
    text-align: center;
    margin-bottom: 32px;
}

.section_title_box p{
    font-size: 1.1rem;
}

.btn:hover {
    opacity: 0.8;
    transition: 0.3s;
    transform: scale(0.99);
}

.indent-text {
  text-indent: -1em; /* 「※」マークより一文字分ずらす */
  padding-left: 1em; /* 最初の行の「※」マーク部分のスペースを確保 */
}


/*背景画像*/
.bg-img_01{
    background: url("../img/idpw_bg_01.webp") no-repeat;
    background-size: cover;
    margin-top: 50px;
    padding: 64px 0;
}
.bg-img_02{
    background: url("../img/idpw_bg_02.webp") no-repeat;
    background-size: cover;
    background-position: bottom;
    height: min(580px);
    margin: 100px auto 40px;
    position: relative;
}
.bg-img_03{
    position: relative;
    background: url("../img/idpw_bg_03.png") no-repeat;
    background-color:rgba(255,255,255,0.3);
    background-size: cover;
    background-position: 1% -400px;
    z-index: 0;
}

.bg-img_03::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.9); /* ← 透過度：0.0～1.0 */
  z-index: -1;
}





/*共通 endーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/

/*ロゴエリア====================*/
.logo_box {
    width: min(1200px,90%);
	height:94px;
    margin: 0 auto;
}

.logo_box1 {
    display: flex;
	margin-top:24px;
    margin-left: 40px;
}

.logo_box1 img {
    width: min(240px,100%);
}
/*ロゴエリア end====================*/


/*section_01--------------------------------------------*/

h4 {
    font-size: 1.6rem;
	padding-left: 16px;
	margin-bottom: 16px;
    color: var(--sec_01);
}

.day_title img {
    width: 16px;
}

.day_title {
    display: flex;
    align-items: flex-start;
}

/*マーカー*/
.marker-text {
  display: inline;
  background: linear-gradient(transparent 60%, #fff400 60%, #fff400 80%, transparent 80%);
}

.annotation_text p {
    margin-bottom: 6px;
}


/*テキスト左右の斜線ーーーーーーーーー*/
.side-lines {
  position: relative;
  display: inline-block;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--sec_01);
  padding: 0 24px; /* 斜線との間隔用 */
}

/* 左側の斜め線 */
.side-lines::before,
.side-lines::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 24px;   /* 線の長さ */
  height: 2px;   /* 線の太さ */
  background: var(--sec_01); /* 線の色 */
}

/* 左線：右上がり（\） */
.side-lines::before {
  left: 0;
  transform: translateY(-50%) rotate(50deg);
}

/* 右線：右下がり（／） */
.side-lines::after {
  right: 0;
  transform: translateY(-50%) rotate(-50deg);
}
/*テキスト左右の斜線 endーーーーーー*/


/* 吹き出しフレームのスタイルーーーーーーー */
.balloon-frame {
    text-align: center;
    /* 吹き出しの枠線と背景色（画像に合わせて青の枠と白の背景を使用） */
    background-color: white;
    border: 2px solid var(--sec_01); /* Laplace Blueを枠線色に */
    border-radius: 1rem;
    padding: 1.5rem;
    position: relative; /* 擬似要素の基準点とする */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.06);
}

/* 吹き出しの三角（内側：白）を作成 */
.balloon-frame::before {
    content: '';
    position: absolute;
    top: -14px; /* 枠線の上端に合わせる */
    left: 50%;
    transform: translateX(-50%);
    /* 三角形をCSSで作成 (本体の背景色と同じ) */
    border-style: solid;
    border-width: 0 10px 14px 10px; /* 左右0、底辺14pxの高さの三角 */
    border-color: transparent transparent white transparent;
    z-index: 20; /* 枠線の上に来るように */
}

/* 吹き出しの三角（外枠：青）を作成 */
.balloon-frame::after {
    content: '';
    position: absolute;
    top: -18px; /* 枠線より少し上 */
    left: 50%;
    transform: translateX(-50%);
    /* 三角形をCSSで作成 (枠線の色と同じ) */
    border-style: solid;
    border-width: 0 12px 18px 12px; /* beforeより少し大きく */
    border-color: transparent transparent var(--sec_01) transparent; /* 枠線と同じ色 */
    z-index: 10;
}

.frame-text {
    font-size: 2rem;
    font-weight: bold;
    color: var(--sec_01);
}
/* 吹き出しフレームのスタイル endーーーーーーー */





/*section_01 end--------------------------------------------*/

/*section_02--------------------------------------------*/
.sec_01 {
    color: var(--sec_01);
}

.sec_02 {
    color: var(--sec_02);
}


/*赤フレームーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
.notice-frame {
  position: absolute;
  top: -40px;
    
  position: relative;
  border: 6px solid #d73d3d; /* 太めの赤枠 */
  border-radius: 18px;
  padding: 32px 24px 20px;
  background: #d73d3d; /* 内部背景も赤 */
  color: #fff;
  text-align: center;
  width: min(840px,100%);
  margin: 40px auto;
}

/* 白背景のラベル */
.notice-label {
    width: min(240px,100%);
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  color: #000;
  padding: 6px 20px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 1.5rem;
  border: 3px solid #d73d3d; /* 外側枠の一部とつなげる太線 */
}

/* 本文エリア */
.notice-body {
  background: #d73d3d;
  padding: 4px;
}

/* メインメッセージ */
.notice-main {
  font-size: 2rem;
  font-weight: 700;
  margin: 0 0 8px;
  line-height: 1.5;
}

/* 補足 */
.notice-sub {
  font-size: 1.1rem;
  opacity: 0.9;
  margin: 0;
}

.bg-img_02 h2 {
    font-size: 1.8rem;
    margin-top: -40px;
}
/*赤フレーム endーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/


/*section_02 end--------------------------------------------*/

/*section_03--------------------------------------------*/

.title_text p {
    font-size: 1.2rem;
    line-height: 1.8;
}

.secthion_text{
    margin: 40px auto;
    width: min(840px,100%);
}

.img_title {
    font-size: 1.8rem;
    font-weight: bold;
}

.section_img{
    width: min(640px,100%);
    margin: 0 auto 40px;
}

.section_img img{
    width: min(600px,100%);
}

/*section_03 end--------------------------------------------*/





/*トップーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/

.top_logo {
	text-align: center;
	margin-bottom: 48px;
}

.top_logo img {
	width: min(560px,100%);
}

.title_text {
	margin: 0 auto 24px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
    align-items: flex-end;
	column-gap: 24px;
    grid-row-gap: 24px;
}

.none_wrap {
	flex-wrap: nowrap;
}



.title_text h1{
	font-size: 3.6rem;
}

.title_text h2{
	font-size: 2rem;
}

.title_text p{
	font-size: 1.6rem;
}


.contact_btn {
    display: flex;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap; 
    margin-bottom: 64px;
}


.link_btn {
    display: inline-block;
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 12px;
    
    width: min(420px,100%);
    font-size: 1.3rem;
    font-weight: bold;
    text-align: center;
    border: 3px solid var(--sec_01);
    background: #fff;
    color: #000;
    padding: 20px ;
    border-radius: 80px;
}


/*footer*/

.footer_box {
	padding: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
	flex-wrap: wrap;
	grid-row-gap: 32px;
}

.footer_box1 {
    width: min(400px,100%);
    display: flex;
    justify-content: center;
    column-gap: 24px;
}

#footer {
    width: 100%;
    margin: 0 auto;
    padding: 0px 50px 50px;
    text-align: center;
    font-size: 0.8rem;
    color: #000000;
}









/* スマホサイズのレスポンシブ対応ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
@media (max-width: 959px) {

.none_wrap {
	flex-wrap: wrap;
}
  
    .none_wrap img {
        width: 200px;
    }
    
}

/* スマホサイズのレスポンシブ対応ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
@media (max-width: 768px) {
     
span01 {
    display: inline;
}
    
    
.logo_box1 {
    display: flex;
    justify-content: center;
	margin-top:24px;
    margin-left: 40px;
}

.logo_box1 img {
    width: min(240px,100%);
}
    

	
	.title_text {
		width: 90%;
	}

    .title_text h1{
        font-size: 2.6rem;
    }

    .title_text h2{
        font-size: 1.4rem;
    }

    .title_text p{
        font-size: 1.2rem;
    }
    
    .title_text .sp_font {
        font-size: 1rem;
    }
	


.bg-img_02{
    height: min(840px);
    margin: 100px auto 40px;
}
    
    
	
.wrap_1200 {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	grid-row-gap: 16px;
}
	
	.flex_wrap {
	flex-wrap: wrap;
		justify-content: center;
		grid-row-gap: 32px;
}
    
	
    
    /*footer*/

.footer_box {
    flex-wrap: wrap;
    grid-row-gap: 24px;
}

    
}

/* スマホサイズのレスポンシブ対応ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
@media (max-width: 450px) {
     
.bg-img_02{
    height: min(1100px);
    margin: 100px auto 40px;
}
    
    .section_title_02 {
    flex-wrap: wrap;
}
    
    
.link_btn {
    width: min(420px,90%);
    margin: 0 auto;
}
    
    
    
}