@charset "utf-8";
/***************************************************
information
  filename : app_user.css;
***************************************************/

/* ** user_custom start ** */
/****************** カスタムcss ******************/

/* ここに自由に追記してください */

:root {
    --app-main-cr: #0e84d1; /* メインカラー */
    --app-sab-cr: #20b2db; /* サブカラー */
    --app-bg-main-cr: #cde4f7; /* 背景色 */
    --app-bg-sab-cr: #a8e0f2; /* サブ背景色 */
}


/****************** H2:タイトル大見出し ******************/

/* 見出しT1:下線 */
.articleBox h2.heading2T01{
    font-size: 30px;
    border-radius: 3px;
    background-color: transparent;
    border-bottom: 5px solid var(--app-main-cr);
    margin-top: 30px;
    margin-bottom: 30px;
    padding: 10px 5px;
}
@media screen and (max-width:540px){
    .articleBox h2.heading2T01{
        font-size: 20px;
        border-bottom: 2px solid var(--app-main-cr);
        padding: 7px 5px;
    }
}

/* 見出しT2:点線 */
.articleBox h2.heading2T02{
    font-size: 30px;
    border-radius: 3px;
    background-color: transparent;
    border-bottom: 5px dashed var(--app-main-cr);
    margin-top: 30px;
    margin-bottom: 30px;
    padding: 10px 5px;
}
@media screen and (max-width:540px){
    .articleBox h2.heading2T02{
        font-size: 1.7rem;
        border-bottom: 2px dashed var(--app-main-cr);
        padding: 7px 5px;
    }
}

/* 見出しT3:上下線 */
.articleBox h2.heading2T03{
    font-size: 30px;
    text-align: center;
    border-radius: 3px;
    background-color: transparent;
    border-top: 5px solid var(--app-main-cr);
    border-bottom: 5px solid var(--app-main-cr);
    margin-top: 30px;
    margin-bottom: 30px;
}
@media screen and (max-width:540px){
    .articleBox h2.heading2T03{
        font-size: 1.7rem;
        border-top: 2px solid var(--app-main-cr);
        border-bottom: 2px solid var(--app-main-cr);
    }
}

/* 見出しT4:中央下線 */
.articleBox h2.heading2T04{
    font-size: 30px;
    text-align: center;
    background-color: transparent;
    position: relative;
    margin-top: 30px;
    margin-bottom: 30px;
}
@media screen and (max-width:540px){
    .articleBox h2.heading2T04{
        font-size: 1.7rem;
    }
}
.articleBox h2.heading2T04::before{
    position: absolute;
    background-color: var(--app-main-cr);
    border-radius: 3px;
    bottom: 0;
    content: "";
    height: 3px;
    left: 50%;
    transform: translateX(-50%);
    width: 45px;
}

/* 見出しT5:背景メイン */
.articleBox h2.heading2T05{
    font-size: 30px;
    color: #fff;
    border-radius: 3px;
    background-color: var(--app-main-cr);
    margin-top: 30px;
    margin-bottom: 30px;
}
@media screen and (max-width:540px){
    .articleBox h2.heading2T05{
        font-size: 1.7rem;
    }
}

/* 見出しT6:背景サブ */
.articleBox h2.heading2T06{
    font-size: 30px;
    color: var(--app-main-cr);
    border-radius: 3px;
    background-color: var(--app-bg-main-cr);
    margin-top: 30px;
    margin-bottom: 30px;
}
@media screen and (max-width:540px){
    .articleBox h2.heading2T06{
        font-size: 1.7rem;
    }
}


/****************** H3:サブタイトル ******************/

/* サブタイトル1:左丸 */
.articleBox h3.heading3ST01{
    font-size: 20px;
    position: relative;
    padding-left: 25px;
    margin-top: 50px;
    margin-bottom: 30px;
}
.articleBox h3.heading3ST01::before{
    position: absolute;
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: var(--app-main-cr);

}

/* サブタイトル2:左縦線 */
.articleBox h3.heading3ST02{
    font-size: 20px;
    padding: 5px 15px;
    border-left: solid 5px var(--app-main-cr);
    margin-top: 50px;
    margin-bottom: 30px;
}


/****************** ステップ見出し ******************/

.articleBox h3.step-heading01,
.articleBox h3.step-heading02{
    font-size: 20px;
    margin-top: 25px;
    margin-bottom: 25px;
}
.articleBox h3.step-heading01 span,
.articleBox h3.step-heading02 span{
    color: #fff;
    background: var(--app-main-cr);
    margin-right: 10px;
}

/* ステップ見出し1 */
.articleBox h3.step-heading01 span{
    padding: 10px 50px;
    border-radius: 3px;
}

/* ステップ見出し2 */
.articleBox h3.step-heading02{
    background: var(--app-bg-main-cr);
    border-radius: 3px;
    padding: 20px 0 20px
}
.articleBox h3.step-heading02 span{
    padding: 20px 50px;
    border-radius: 3px 0px 0px 3px;
}


/****************** BOX ******************/

.articleBox .box{
    border-radius: 5px;
}
.articleBox .box p{
    padding: 1.5rem;
}

/* BOX(線のみ) */
.articleBox .box.line.main-cr{
    border: 2px solid var(--app-main-cr);
}
.articleBox .box.line.sab-cr{
    border: 2px solid var(--app-sab-cr);
}

/* BOX(タイトル付き1) */
.articleBox .box.center-ttl{
    position: relative;
    margin-top: 50px;
}
.articleBox .box.center-ttl.main-cr{
    border: 2px solid var(--app-main-cr);
}
.articleBox .box.center-ttl.sab-cr{
    border: 2px solid var(--app-sab-cr);
}
.articleBox .box.center-ttl .box-ttl{
    color: #fff;
    border-radius: 50px;
    text-align: center;
    font-weight: bold;
    width: 350px;
    position: absolute;
    right: 0;
    left: 0;
    top: -30px;
margin: auto;
}
.articleBox .box.center-ttl .box-ttl.main-cr{
    background: var(--app-main-cr);
}
.articleBox .box.center-ttl .box-ttl.sab-cr{
    background: var(--app-sab-cr);
}
.articleBox .box.center-ttl p.box-inner{
    padding-top: 45px;
}


/* BOX(タイトル付き2) */

.articleBox .box.left-ttl{
    position: relative;
    margin-top: 50px;
}
.articleBox .box.left-ttl.main-cr{
    border: 2px solid var(--app-main-cr);
}
.articleBox .box.left-ttl.sab-cr{
    border: 2px solid var(--app-sab-cr);
}
.articleBox .box.left-ttl .box-ttl{
    color: #fff;
    font-weight: bold;
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
}
.articleBox .box.left-ttl .box-ttl.main-cr{
    background: var(--app-main-cr);
}
.articleBox .box.left-ttl .box-ttl.sab-cr{
    background: var(--app-sab-cr);
}
.articleBox .box.left-ttl p.box-inner{
    padding-top: 75px;
}

/* BOX(背景色のみ) */
.articleBox .box.bg.main-cr{
    background: var(--app-bg-main-cr);
}
.articleBox .box.bg.sab-cr{
    background: var(--app-bg-sab-cr);
}


/****************** リスト ******************/

.articleBox .listBox{
    border-radius: 5px;
}
.articleBox .listBox li{
    list-style: none;
    position: relative;
    padding-left: 15px;
}

/* リスト1 */
.articleBox .listBox.bg{
    background: var(--app-bg-main-cr);
}
.articleBox .listBox.bg li::before{
    position: absolute;
    content: '';
    display: block;
    width: 10px;
    height: 5px;
    top: .5em;
    left: 0;
    border-left: 3px solid var(--app-main-cr);
    border-bottom: 3px solid var(--app-main-cr);
    transform: rotate(-45deg);   
}

/* リスト2 */
.articleBox .listBox.line{
    border: 1px solid var(--app-main-cr);
}
.articleBox .listBox.line li::before{
    position: absolute;
    content: "";
    background: var(--app-main-cr);
    display: block;
    border-radius: 50%;
    width: 10px;
    height: 10px;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}


/****************** ボタン ******************/

.articleBox .buttonBox{
	margin: 30px auto;
	text-align:center;
}
.articleBox .buttonBox a{
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: auto;
	max-width: 285px;
	padding: 20px 55px;
	color: #fff;
	transition: 0.3s ease-in-out;
	font-weight: 600;
	border-radius: 50px;
	z-index:0;
	overflow: hidden;
	text-decoration:none;
}
.articleBox .buttonBox.main-cr a {
	background: var(--app-main-cr);
}
.articleBox .buttonBox.sab-cr a {
	background: var(--app-sab-cr);
}

/* ボタン特大 */
.articleBox .buttonBox.large a{
	max-width: 500px;
}

/* ボタン線 */
.articleBox .buttonBox.line.main-cr a {
	background: transparent;
    color: var(--app-main-cr);
    border: solid 1px var(--app-main-cr);
}
.articleBox .buttonBox.line.sab-cr a {
	background: transparent;
    color: var(--app-sab-cr);
    border: solid 1px var(--app-sab-cr);
}


/****************** 画像・動画・スライド ******************/

/* 画像小 */
.articleBox .imgBox.small img{
    width: 450px;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* 画像大 */
.articleBox .imgBox.big img{
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* 画像横並び */
.articleBox .imgBox_col2{
    display: flex;
    gap: 15px;
    width: 100%;
}
.articleBox .imgBox_item{
    flex: 1;
}
.articleBox .imgBox_item img{
    max-width: 100%;
    height: auto;
}

.articleBox .link{
    width: 350px;
    margin-left: auto;
    margin-right: auto;
}
@media screen and (max-width:540px){
    .articleBox .link{
        width: 250px;
    }
}
.articleBox .link a{
    padding-top: 16px;
    padding-bottom: 16px;
}

/* 動画 */
.articleBox .video{
    width: 100%;
    aspect-ratio: 16 / 9;
}
.articleBox .video iframe{
    width: 100%;
    height: 100%;
}
/* 動画（管理画面調整） */
.video span {
  display: block;
  aspect-ratio: 16 / 9;
}
/* PDF */
.con_det .pdfBox{
 max-width: 500px;
 margin: auto;
}
.pdfBox iframe{
 width: 100%;
 height: 100%;
 aspect-ratio: 1 / 1.414;
}
@media screen and (max-width: 540px){
.con_det .pdfBox {
width: 100%;
  }
}
/* PDF調整（管理画面） */
.pdfBox span{
　display: block;
　aspect-ratio: 1 / 1.414;
}
.pdfBox span iframe{
    width: 100%;
    height: 100%;
}
/************　会社概要　***********/

/* 会社概要 */
.company{
	padding:16px 48px 0px;
}
.company dl {
	display: flex;
	border-bottom: 1px solid #DDDDDD;
	padding: 20px 0px 20px 0px;
  }
  @media screen and (max-width:540px) {
	.company{
		padding:16px 24px 0px;
	}
	.company dl {
	  font-size: 14px;
	}
  }
  .company dl:last-child {
	border-bottom: none;
  }
  .company dt {
	width: 20%;
  }
  @media screen and (max-width:540px) {
	.company dt {
	  width: 27%;
	}
  }
  .company dd {
	width: 80%;
	padding-left: 16px;
  }
  @media screen and (max-width:540px) {
	.company dd {
	  padding-left: 12px;
	  width: 73%;
	}
}

p.attention{
 font-size:85%;
 color:red;
font-weight:normal;
padding-bottom:4px;
}/* ** user_custom end ** */