{"version":3,"sources":["global/_setting.scss","project/p-interviewItem.css","project/p-interviewItem.scss"],"names":[],"mappings":"AAkCA;EACE,2CALiB;EAMjB,WAdM;EAeN,oBAAA;EAAA,oBAAA;EAAA,aAAA;EACA,4BAAA;EAAA,6BAAA;MAAA,0BAAA;UAAA,sBAAA;EACA,yBAAA;MAAA,sBAAA;UAAA,8BAAA;EACA,8CAAA;EAAA,sCAAA;EACA,UAAA;EACA,mCAAA;EACA,kBAAA;ACjCF;;ADoCA;EACE,gBAAA;ACjCF;;ACZA;EACI,cAAA;EACA,qBAAA;ADeJ;;ACZA;EACI,4BAAA;ADeJ;ADiDE;EEjEF;IAGQ,4BAAA;EDiBN;AACF;;AD4CE;EE1DF;IAEQ,WAAA;IACA,cAAA;IACA,kBAAA;IACA,UAAA;IACA,SAAA;IACA,OAAA;IACA,gGAAA;IAAA,8DAAA;IACA,WAAA;IACA,aAAA;IACA,gCAAA;EDiBN;AACF;;ACdA;EACI,qBAAA;ADiBJ;;ACdA;EACI,WAAA;EACA,kBAAA;EACA,UAAA;EACA,OAAA;EACA,SAAA;EACA,wCAAA;EACA,gCAAA;EACA,sBAAA;EAAA,sBAAA;EACA,oBAAA;EAAA,oBAAA;EAAA,aAAA;EACA,4BAAA;EAAA,6BAAA;MAAA,0BAAA;UAAA,sBAAA;EACA,qBAAA;MAAA,kBAAA;UAAA,yBAAA;EACA,WFtBI;ACuCR;ADUE;EEvCF;IAcQ,qBAAA;IACA,YAAA;EDmBN;AACF;;AChBA;EACI,gBAAA;EACA,uCFvBiB;EEwBjB,iBAAA;EAAA,iBAAA;EACA,iBAAA;EACA,qBAAA;EACA,6BAAA;ADmBJ;;AChBA;EACI,kBAAA;EAAA,kBAAA;EACA,iBAAA;EAAA,iBAAA;EACA,uCFjCiB;EEkCjB,gBAAA;EACA,qBAAA;EACA,iBAAA;ADmBJ;;AChBA;EACI,gBAAA;EACA,eAAA;EAAA,eAAA;EACA,iBAAA;EACA,qBAAA;ADmBJ","file":"p-interviewItem.css","sourcesContent":["@use \"sass:math\";\n\n////////////////////\n// インナー幅設定\n////////////////////\n\n// コンテンツのインナー幅（最も共通の幅が多い部分）\n$inner: 1280px;\n\n// 余白\n$padding-pc: 25px;\n$padding-sp: 16px;\n\n// ヘッダー\n$header-pc: 130px;\n$header-sp: 80px;\n\n////////////////////\n// 色の指定\n////////////////////\n\n//色指定\n$black: #333;\n$white: #FFF;\n$blue: #4880E0;\n\n////////////////////\n// フォント設定\n////////////////////\n\n$base-font-family: \"noto-sans-cjk-jp\", sans-serif;\n$second-font-family: 'Noto Sans JP', sans-serif;\n$third-font-family: 'Noto Serif JP', serif;\n\nbody {\n  font-family: $base-font-family;\n  color: $black;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  transition: opacity .8s .3s ease-out;\n  opacity: 0;\n  -webkit-font-smoothing:antialiased;\n  line-break: strict;\n}\n\nfooter {\n  margin-top: auto;\n}\n\n////////////////////\n// メディアクエリとブレークポイントの設定\n////////////////////\n\n//ブレイクポイント\n$breakpoints: (\n  sm: 767,\n  md: 768,\n  lg: 1024,\n  xl: 1440,\n);\n\n//メディアクエリー\n$mediaquerys: (\n  sm: \"screen and (max-width: #{map-get($breakpoints,'sm')}px)\",\n  md: \"screen and (min-width: #{map-get($breakpoints,'md')}px)\",\n  lg: \"screen and (min-width: #{map-get($breakpoints,'lg')}px)\",\n  xl: \"screen and (min-width: #{map-get($breakpoints,'xl')}px)\",\n);\n\n// @include mq(){}で書くとブレークポイントが反映される（初期値はmd）\n@mixin mq($mediaquery: md) {\n  @media #{map-get($mediaquerys, $mediaquery)} {\n    @content;\n  }\n}\n\n// remへの計算式（16pxを基準としている。10pxを基準とする場合は16を10に変更する）\n@function rem($pixels) {\n  @return math.div($pixels, 10) * 1rem;\n}\n","body {\n  font-family: \"noto-sans-cjk-jp\", sans-serif;\n  color: #333;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  transition: opacity 0.8s 0.3s ease-out;\n  opacity: 0;\n  -webkit-font-smoothing: antialiased;\n  line-break: strict;\n}\n\nfooter {\n  margin-top: auto;\n}\n\n.p-interviewItem {\n  display: block;\n  border-radius: 1.6rem;\n}\n\n.p-interviewItem__img::before {\n  padding-top: 133.2361516035%;\n}\n@media screen and (min-width: 768px) {\n  .p-interviewItem__img::before {\n    padding-top: 133.4415584416%;\n  }\n}\n\n@media screen and (min-width: 768px) {\n  .p-interviewItem__img::after {\n    content: \"\";\n    display: block;\n    position: absolute;\n    z-index: 1;\n    bottom: 0;\n    left: 0;\n    background: linear-gradient(rgba(51, 51, 51, 0) 0%, #333 100%);\n    width: 100%;\n    height: 16rem;\n    border-radius: 0 0 1.6rem 1.6rem;\n  }\n}\n\n.p-interviewItem__img img {\n  border-radius: 1.6rem;\n}\n\n.p-interviewItem__filter {\n  width: 100%;\n  position: absolute;\n  z-index: 2;\n  left: 0;\n  bottom: 0;\n  background-color: rgba(72, 128, 224, 0.8);\n  border-radius: 0 0 1.6rem 1.6rem;\n  padding: 2.4rem 1.6rem;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n  color: #FFF;\n}\n@media screen and (min-width: 768px) {\n  .p-interviewItem__filter {\n    border-radius: 1.6rem;\n    height: 100%;\n  }\n}\n\n.p-interviewItem__words {\n  font-weight: 500;\n  font-family: \"Noto Sans JP\", sans-serif;\n  font-size: 1.6rem;\n  line-height: 1.25;\n  letter-spacing: 0.1em;\n  border-bottom: 2px solid #FFF;\n}\n\n.p-interviewItem__position {\n  margin-top: 1.6rem;\n  font-size: 1.4rem;\n  font-family: \"Noto Sans JP\", sans-serif;\n  font-weight: 500;\n  letter-spacing: 0.1em;\n  line-height: 1.25;\n}\n\n.p-interviewItem__name {\n  font-weight: 500;\n  font-size: 2rem;\n  line-height: 1.25;\n  letter-spacing: 0.1em;\n}","@use \"global\" as *;\n\n.p-interviewItem {\n    display: block;\n    border-radius: rem(16);\n}\n\n.p-interviewItem__img::before {\n    padding-top: calc(457 / 343 * 100%);\n    @include mq(md) {\n        padding-top: calc(411 / 308 * 100%);\n    }\n}\n\n.p-interviewItem__img::after {\n    @include mq(md) {\n        content: \"\";\n        display: block;\n        position: absolute;\n        z-index: 1;\n        bottom: 0;\n        left: 0;\n        background: linear-gradient(rgba(#333, 0) 0%, #333 100%);\n        width: 100%;\n        height: rem(160);\n        border-radius: 0 0 rem(16) rem(16);\n    }\n}\n\n.p-interviewItem__img img {\n    border-radius: rem(16);\n}\n\n.p-interviewItem__filter {\n    width: 100%;\n    position: absolute;\n    z-index: 2;\n    left: 0;\n    bottom: 0;\n    background-color: rgba(#4880E0, .8);\n    border-radius: 0 0 rem(16) rem(16);\n    padding: rem(24) rem(16);\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-end;\n    color: $white;\n    @include mq(md) {\n        border-radius: rem(16);\n        height: 100%;\n    }\n}\n\n.p-interviewItem__words {\n    font-weight: 500;\n    font-family: $second-font-family;\n    font-size: rem(16);\n    line-height: 1.25;\n    letter-spacing: .1em;\n    border-bottom: 2px solid $white;\n}\n\n.p-interviewItem__position {\n    margin-top: rem(16);\n    font-size: rem(14);\n    font-family: $second-font-family;\n    font-weight: 500;\n    letter-spacing: .1em;\n    line-height: 1.25;\n}\n\n.p-interviewItem__name {\n    font-weight: 500;\n    font-size: rem(20);\n    line-height: 1.25;\n    letter-spacing: .1em;\n}"]}